1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format) 2.6 JPEG (Joint Photography Expert Group) 2.7 PNG (Portable Network Graphics)

2 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

3 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 Shape, size, color, relative positions (starting and ending points), etc. Resolution independent Resize without image quality loss Ideal for solid areas of color Ideal for logos, font and line drawings Handles complex color poorly

4 AdvantagesDisadvatanges Maintain quality as the size of the graphics is increased 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

5 2.3: Bitmapped Graphics Also called raster graphics or pixelized graphics. Graphics defined by colored areas of pixels 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 Resolution dependent Image quality is lost when image is resized Interpolation Ideal for images with complex color (i.e. photographs, artwork)

6 Advantages and Disadvantage of Bitmapped Graphics AdvantagesDisadvantages Can have different textures on the drawings Not easy to make modification to objects/drawings Large file size Graphics become "blocky" when the size is increased

7 Vector v. Bitmapped Graphics 100%200%100%200% Raster imageVector image

8 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.

9 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

10 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

11 AdvantagesDisadvatanges No color information lostCan only have a maximum of 256 Compress line art wellDoes not compress photographs well Interlaced images possibleCopyrighted format such that developers must pay royalty Animation possible Image can have transparent portion Advantages and Disadvantages of GIF Format

12 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

13 AdvantagesDisadvatanges 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

14 2.7: PNG (Portable Network Graphic) Newer format recommended by W3C Ideal for: Both color complex-images and images with transparency Supports millions of colors Lossless format Good alternative for both GIF and JPEG

15 AdvantagesDisadvatanges No color information lostNot 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

16 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 progressive JPEG