1. 1 Graphics and the Web INFO 654 – Spring 2007

2. 2 Sources and Credits for this Material Used examples from Son of Web Pages That Suck (2002) by Vincent Flanders Used graphics material from Web Style Guide (2001) by Lynch and Horton (excerpted from http://www.webstyleguide.com)http://www.webstyleguide.com

3. 3 Objectives In this session, we will address: Graphics Primer With examples

4. 4 Introduction to Graphics Parameters that influence the display of Web graphics: Display monitor – 256 colors or more? Bandwidth – dial-up?

5. 5 Color Displays Displays use red-green- blue (RGB) additive color model. OS organizes display into a grid of x and y coordinates, or pixels.

6. 6 Pixels and Color Depth Memory is allocated to each pixel (aggregate is called VRAM) In the simple extreme, a 1 bit display can only manage two colors, black and white.

7. 7 Pixels and Color Depth (cont’d) With 8 bits of memory dedicated to each pixel, each pixel can be one of 256 colors (2 to the eighth power).

8. 8 Pixels and Color Depth (cont’d) More memory allows nearly photographic color:

9. 9 VRAM Determines Color Depth Amount of VRAM dedicated to each pixel is “color depth”

10. 10 Color Depth and Graphics Files Same terminology and memory schemes describe color depth in graphics files

11. 11 True Color 24 bit images are much larger:

12. 12 Graphic File Formats: GIF Graphic Interchange Format (GIF) introduced by CompuServe in 1980s Adopted by original designers of WWW in 1990s Majority of Web images are GIF and all browsers that support graphics can display GIF files GIF has an efficient compression scheme GIF is limited to 8-bit (256 or fewer) color palettes. GIF variants support transparent color and interlaced formats popularized by Netscape Navigator.

13. 13 GIF File Compression Uses Lempel Zev Welch (LZW) file compression Best compressing images with homogenous color Not so good with many colors and complex textures

14. 14 Improving GIF Compression Reduce the number of colors http://www.dartmouth.edu/~hist12

15. 15 Interlaced GIF Permits display of low-resolution version of full- sized GIF picture while file is still downloading.

16. 16 Transparent GIF GIF format allows you to pick (often background) colors to be transparent: But transparency is not selective, can have unintended results:

17. 17 Animated GIF Can combine multiple GIF images into a single file to create animation. Has a multiplicative effect on file size Mitigated by streaming delivery to viewer No interface controls – play over and over again Only meaningful content is to illustrate a concept or technique where animation is really required. http://auto.howstuffworks.com/engine-inline.htm

18. 18 GIF Animations Two of Vincent Flanders’ non-rules: In Web design, when you’re not sure if you should do something, don’t do it because it is probably wrong. Remove unnecessary design elements. Too many non-optimized GIFs: http://www.gam-robert.com

19. 19 3-D Logos and Images: Just Say “Whoa” There’s nothing that says, “I’m an amateur Web designer and I don’t know what I’m doing” like 3-D logos The ‘big boys’ don’t use them, you shouldn’t either

20. 20 Graphic File Formats: JPEG Unlike GIF, Joint Photographic Experts Group (JPEG) images are full-color (24 bit, or “true color”) Favored by photographers JPEG ‘sliding scale’ graphics compression uses a discrete cosine transformation Can achieve extremely high compression ratios But it progressively degrades image details.

21. 21 JPEG Compression Discards “unnecessary” data “Lossy” compression technique

22. 22 Another JPEG Compression Note the compression noise and distortion in the bottom dolphin Is not worth the saved download time

23. 23 Another JPEG Compression Compressed interface graphic (a) in GIF format (b, no compression artifacts) and JPEG compression (c, with ‘noise’ around text and borders)

24. 24 PNG Image Format Portable Network Graphic (PNG, pronounced ‘ping’) is an image format developed by a consortium of graphic software developers as a GIF alternative. http://www.libpng.org/pub/png/book/chapter01.html Features designed specifically for web pages: Full range of color depths Supports sophisticated image transparency Better interlacing Automatically corrects display monitor gamma Holds short text description of image content, allowing Internet searches for images.

25. 25 Advantages of GIF Most widely supported graphics format on the Web Diagrammatic image GIFs look better than JPEGs GIFs support transparency and interlacing

26. 26 Advantages of JPEG Huge compression ratios mean faster downloads Excellent JPEG results for most photographs and complex images JPEG supports full-color (24-bit, “true color”) images

27. 27 Screen vs. Printed Color Artwork Computer screen is lower resolution than printed page. But differences in quality between conventional four- color printing and computer screen is not that great.

28. 28 Complex Illustrations or Photographs An anatomical illustration – extra detail and subtle nuances of high- resolution artwork are not entirely lost when graphic is reduced to Web page size.

29. 29 Diagrams for the Computer Screen Basic diagrams show well if they have horizontal or vertical lines, or diagonal lines at 45-degree angles.

30. 30 Diagrams for the Computer Screen Simple isometric perspective graphics also work well

31. 31 Diagrams for the Computer Screen This diagram compresses well because it is suited to LZW GIF compression.

32. 32 HTML and Graphics: Colored Backgrounds Web background colors offer a “zero- bandwidth” means to change the look of your pages without adding graphics.

33. 33 HTML and Graphics: Background Texture Patterns 1995 Netscape Navigator gave web page authors ability to use small tiled GIF or JPEG graphic as background pattern. Background texture graphic should be small GIF or JPEG, no more than 100 x 100 pixels in size.

34. 34 Bad Backgrounds and Color Problems When improperly used, background images make the text harder to read and increase page load times: http://www.nauticom.net/www/rnassif/ Some links to using color on the Web: http://www.colormatters.com

35. 35 One Image Equals One Page This technique can make the page size quite large, and one-image pages often have no text links: http://www.uiowa.edu/%7Etqstory/

36. 36 HTML and Graphics: Imagemaps Imagemaps offer a way to define multiple “live” link areas within a graphic.

37. 37 HTML and Graphics: Imagemaps Imagemaps can incorporate multiple links into a graphic illustration.