Creating Web Graphics

1. Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3 Bitmapped Graphics 2.4 Graphics 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. 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

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

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. 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. Advantages and Disadvantages of JPEG Format

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

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