Transcript Introduction to Web Graphics

Creating Web Graphics
Outline
2.1
2.2
2.3
2.4
2.5
2.6
2.7
Graphics Types
Vector Graphics
Bitmapped Graphics
Graphics for the Web
GIF (Graphics Interchange Format)
JPEG (Joint Photography Expert Group)
PNG (Portable Network Graphics)
1
2.1 : Graphics Types

Why do we need graphics on the web pages?





Use to create successful Web pages
Enhance user experience
Free generic graphics on the Web
Create original graphics to make your site unique
There are two types of graphic that you can create using
computer:


Vector graphics
Bitmapped Graphics
2
2.2: Vector Graphics

A vector graphic uses objects; lines, circles, curve with
instruction as where to place them on your drawings

Uses vector equations to define graphic properties


Resolution independent


Shape, size, color, relative positions (starting and ending points),
etc.
Resize without image quality loss
Ideal for solid areas of color


Ideal for logos, font and line drawings
Handles complex color poorly
3
Advantages
Maintain quality as the
size of the graphics is
increased
Disadvatanges
Objects/drawings cannot
have texture; it can only
have plain colors or
gradients
Small file size
Easy to edit the
drawings as each object
is independent of the
other.
Advantages and Disadvantage of Vector Graphics
4
2.3: Bitmapped Graphics

Also called raster graphics or pixelized graphics.

Graphics defined by colored areas of pixels



Resolution dependent



Uses a table of data addresses and instructions to light up each
pixel on the monitor
An object is stored as a group of pixels with information about
each pixel color
Image quality is lost when image is resized
Interpolation
Ideal for images with complex color (i.e. photographs,
artwork)
5
Advantages
Disadvantages
Can have different
Not easy to make
textures on the drawings modification to
objects/drawings
Large file size
Graphics become
"blocky" when the size is
increased
Advantages and Disadvantage of Bitmapped Graphics
6
Vector v. Bitmapped Graphics
Vector image
Raster image
100%
200%
100%
200%
7
2.4: Graphics for the Web

There is not less than 50 different graphics file format
that you can create using any graphic editor.

For the web, you can use only three: GIF, JPEG and
PNG

Anti-aliasing is a technique for smoothing jagged edges
in a graphic by fooling your eye.
8
2.5: GIF (Graphics Interchange Format)

Ideal for:


screen captures, line drawings, sharp-edged graphics and
images with transparency
Not good for:

Photographic images, artwork with complex colors

Supports 256 colors (8 bits/pixel)

Lossless format

Quality is not reduced by compression process
9

The gif format supports interlacing, transparency and
animation

Interlacing begins with a low-resolution image and
increases details as the file continue to load (progressive
display)

Transparent gif is where part of the image shows through
(transparent)

Ancillary information: textual comments and other data
can be stored within the image file
10
Advantages
Disadvatanges
No color information lost
Can only have a maximum
of 256
Compress line art well
Does not compress
photographs well
Interlaced images possible Copyrighted format such
that developers must pay
royalty
Animation possible
Image can have
transparent portion
Advantages and Disadvantages of GIF Format
11
2.6: JPEG (Joint Photography Expert
Group)

Ideal for:


Photographic images, images with rich color transitions (i.e:
images of natural, real world scenes)
Not good for:

Images with sharp edges, text, transparency; drawings; lettering;
simple cartoons

Supports millions of colors (24 bits/pixel or 16 million
colors)

Lossy format

Image quality is reduced by compression process
12
Advantages
Disadvatanges
Support a maximum of
16.7 million colors
Losses some image
information
Compresses photographs
well
Degradation of image
possible with repeated
editing and saving
Possible to select
compression ratio versus
quality
No transparency
Progressive (interlaced)
images possible
No animation
Advantages and Disadvantages of JPEG Format
13
2.7: PNG (Portable Network Graphic)

Newer format recommended by W3C


www.w3.org/Graphics/PNG
Ideal for:

Both color complex-images and images with transparency

Supports millions of colors

Lossless format

Good alternative for both GIF and JPEG
14
Advantages
No color information lost
Disadvatanges
Not yet implemented by
most browsers
Can use all color depth supports more than 16.7
million colors
Compresses well
Image can have
transparent portion
Advantages and Disadvantages of PNG Format
15
GIF or JPEG or PNG?

Two choices of web graphics file-type: GIF and JPEG
(Since not all browsers supports PNG)

The difference is that the way the data are being
compressed.

GIF: If the graphic is a simple black-and-white line
drawing, or a picture with (relatively) large areas of equal
colors.
JPEG: For picture that is best describe as "photo-like“.


For animations or have a transparent color graphic, then
you are stuck with GIF. If you want interlacing then you
have two choices either interlaced GIF or progressive16
JPEG