Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Design Concepts: Module B: Adding Images
  2. 2. Goals <ul><li>Understand how what dithering and gamma are </li></ul><ul><li>Understand how image compression works </li></ul><ul><li>Understand how to add images to your web pages </li></ul>
  3. 3. Dithering <ul><li>Typically, modern monitors can display 24-bit, “True Color” </li></ul><ul><li>However, there are other monitors which don’t have “True Color” capabilities </li></ul>
  4. 4. Dithering <ul><li>As a result, 24-bit colors which are not recognized by less powerful displays are approximated. </li></ul><ul><li>The approximation can result in a speckled look called dithering </li></ul><ul><li>Solution? The “Web Palette” </li></ul>
  5. 5. The Web Palette <ul><li>216 “Web safe” colors </li></ul><ul><li>Cross-section of Windows and Macintosh color palettes </li></ul><ul><li>Colors look generally the same for all users </li></ul><ul><li>AKA – “Netscape Colors” or “Web Safe Palette” </li></ul>
  6. 6. Gamma <ul><li>Gamma can be thought of as the “brightness” of a monitor </li></ul><ul><li>Windows & Unix displays tend to darker than Macintosh displays </li></ul>
  7. 7. Gamma <ul><li>Result? Images created on a Windows machine may look “washed-out” on a Mac; Images created on a Mac may look too dark on a Windows machine </li></ul><ul><li>Lesson? Test your images across platforms or, at the very least, check for gamma using a gamma correction tool </li></ul>
  8. 8. Displaying Color as Images <ul><li>Analog images are continuous representations of color </li></ul><ul><li>This is somewhat of a problem for computers, which like discrete measurements </li></ul>
  9. 9. Displaying Color as Images <ul><li>The analog signal representing a continuous image is sampled to produce discrete values which can be stored by a computer </li></ul><ul><li>The frequency of digital samples greatly affects the quality of the digital image </li></ul>
  10. 10. How Sampling Works The original analog representation Measurements are made at equal intervals Discrete samples are taken from the measurements
  11. 11. The Pixel <ul><li>Sample location and sample values combine to make the picture element or pixel </li></ul><ul><li>3 color samples per pixel: </li></ul><ul><ul><li>1 RED sample </li></ul></ul><ul><ul><li>1 GREEN sample </li></ul></ul><ul><ul><li>1 BLUE sample </li></ul></ul>
  12. 12. The Pixel <ul><li>Information about pixels is stored in a rectangular pattern and displayed to the screen in rows called rasters (from Spalter ). </li></ul>
  13. 13. The Pixel (continued) <ul><li>Monitor pixels are actually circular light representations of red, green and blue phosphors </li></ul><ul><li>Pixel density is measured using Dots Per Inch (DPI) </li></ul>
  14. 14. The Pixel (continued) <ul><li>Pixel size is measured using Dot Pitch </li></ul><ul><li>DPI and Dot Pitch have an inverse relationship ( DPI = Dot Pitch) </li></ul>
  15. 15. Bit-Depth <ul><li>Number of bits to represent pixel color </li></ul>64 6-bit 2 6 16 4-bit 2 4 2 2-bit 2 1 Colors Name Expression
  16. 16. Bit-Depth <ul><li>Number of bits to represent pixel color </li></ul>About 16-million 24-bit (True Color) 2 24 65, 536 16-bit 2 16 256 8-bit 2 8 Colors Name Expression
  17. 17. Images on the Internet <ul><li>There are actually two main categories of images that you might encounter on the Internet </li></ul><ul><ul><li>Raster Graphics </li></ul></ul><ul><ul><li>Vector Graphics </li></ul></ul>
  18. 18. Raster Graphics <ul><li>Color information is stored based on location and RGB value </li></ul><ul><li>Costs lots of disk space </li></ul>
  19. 19. Vector Graphics <ul><li>Color information is stored in a series of mathematical calculations </li></ul><ul><li>Don’t cost a lot of disk space </li></ul><ul><li>Fairly processor-intensive </li></ul>Image from
  20. 20. Raster Image Compression <ul><li>An image in its raw format would be too large to transfer in a web download </li></ul><ul><li>Because of this, images are generally saved using any one of several compression algorithms </li></ul>
  21. 21. GIF Format <ul><li>Graphic Interchange Format (GIF) </li></ul><ul><li>“Lossless” Compression </li></ul><ul><li>Originally developed by CompuServe </li></ul><ul><li>You can reduce file size by color reduction and changing bit-depth </li></ul>
  22. 22. GIF Format <ul><li>Uses LZW (Lempel-Zev-Welch) compression </li></ul><ul><ul><li>Efficient at condensing color information for pixel rows of identical color </li></ul></ul><ul><ul><li>Takes advantage of large areas of “flat” color </li></ul></ul><ul><ul><li>Good for line drawings, illustrations and cartoon-like images </li></ul></ul><ul><ul><li>Patent for LZW is owned and enforced by Unisys </li></ul></ul>
  23. 23. GIF Types <ul><li>GIF87a </li></ul><ul><ul><li>Can support up to 8-bit color (256 colors) </li></ul></ul><ul><ul><li>Supports interlacing </li></ul></ul><ul><li>GIF89a </li></ul><ul><ul><li>Supports everything supported by GIF87a </li></ul></ul><ul><ul><li>Also supports transparency </li></ul></ul><ul><ul><li>Also supports animation </li></ul></ul>
  24. 24. GIF Types <ul><li>Both types have universal browser-support </li></ul><ul><li>Both types are saved with the .GIF extension </li></ul>
  25. 25. GIF Format - Interlacing <ul><li>Normal GIFs are displayed in their entirety when the image is completed downloaded </li></ul><ul><li>However, interlacing allows the image to “fade in” </li></ul>
  26. 26. GIF Format - Interlacing <ul><li>How does this happen? </li></ul><ul><ul><li>Rows of pixels appear only after 12.5% of it has been downloaded </li></ul></ul><ul><ul><li>3 subsequent “passes” display 25%, 50% and, finally, 100% of the image </li></ul></ul><ul><li>Results in slightly larger file size </li></ul>
  27. 27. GIF Format - Transparency <ul><li>Transparency allows designers to display images that seem as if they weren’t bound by rectangular borders </li></ul>
  28. 28. GIF Format - Transparency <ul><li>How does it happen? </li></ul><ul><ul><li>The background of an image is set to a color that the designer chooses to be “invisible” (this color is later identified as the invisible color) </li></ul></ul><ul><ul><li>The resulting image’s background disappears and is replaced by the web page’s background </li></ul></ul>
  29. 29. GIF Format - Transparency
  30. 30. JPEG Format <ul><li>Joint Photographic Experts Group (JPEG) </li></ul><ul><li>Supports 24-bit “True Color” </li></ul><ul><li>Good for images with large gradations in color </li></ul><ul><li>Must be decompressed before they are displayed in a browser </li></ul>
  31. 31. JPEG Format <ul><li>Based on spatial frequency </li></ul><ul><li>Samples image information in an 8 x 8 pixel area </li></ul><ul><li>“ Lossy” Compression – image information is lost during the compression process; Lesson? Make changes to copies of your original! </li></ul>
  32. 32. JPEG Format <ul><li>Different compression ratios can be selected </li></ul><ul><li>Represent a trade-off: File Size vs. Image Quality </li></ul><ul><li>Determined by “Q” setting (0-100) </li></ul>
  33. 33. JPEG “Q” Setting <ul><li>Lower setting is a more aggressive ratio, resulting in smaller file sizes, but lower image quality </li></ul><ul><li>Higher setting is less aggressive, resulting in better quality images, but larger files </li></ul>
  34. 34. Progressive JPEGs <ul><li>Display in a series of passes (similar to interlaced GIFs) </li></ul><ul><li>Number of passes can determined when the graphic is saved </li></ul>
  35. 35. Progressive JPEGs <ul><li>Slightly smaller file size than regular JPEGs </li></ul><ul><li>Require more processing power than regular JPEGs </li></ul><ul><li>Not supported by all browsers </li></ul>
  36. 36. When to use JPEGs <ul><li>Images with large gradations in color (photos) </li></ul><ul><li>DO NOT USE FOR IMAGES WITH “FLAT” COLOR </li></ul>
  37. 37. PNG Format <ul><li>Portable Network Graphic (PNG) </li></ul><ul><li>Open source solution to GIF patent issue </li></ul><ul><li>Like GIF, good at compressing images with large areas of flat color </li></ul><ul><li>Support of up to 24-bit color </li></ul><ul><li>Lossless compression </li></ul>
  38. 38. PNG Format <ul><li>Two dimensional progressive display (similar, but better than, GIF’s interlacing) </li></ul><ul><li>Supports “shades” of transparency; allows for more than 1 color to be transparent </li></ul><ul><li>Built-in Gamma correction </li></ul>
  39. 39. PNG Format <ul><li>Includes text capabilities for notes such as copyright info </li></ul><ul><li>Browser support is spotty, at best </li></ul><ul><li>Never use for images with large color gradations (use JPEGs instead) </li></ul>
  40. 40. Managing Graphics <ul><li>Try to design new graphics using Web-safe colors </li></ul><ul><li>Keep graphic dimensions small (smaller graphics result in smaller file size) </li></ul>
  41. 41. Managing Graphics <ul><li>Don’t attempt to reduce color color information on your own (results in dithering) -- browsers are capable of approximating nearest colors </li></ul><ul><li>Use correct compression schemes appropriate for your image! </li></ul>
  42. 42. The <img> Element <ul><li>The src attribute specifies the filename of an image file </li></ul><ul><li>To include the src attribute within the <img> element, you type img src =“mygraphic.gif”> </li></ul>
  43. 43. The <img> Element <ul><li>The <img> element also includes other attributes </li></ul>
  44. 44. The alt Attribute <ul><li>For an XHTML document to be well formed, the <img> element must include the src and alt attributes </li></ul>
  45. 45. The alt Attribute <ul><li>The alt attribute is very important for user agents that do not display images and Web browsers that are designed for users of Braille and speech devices </li></ul>
  46. 46. The alt Attribute <ul><li>Alternate text will display if an image has not yet downloaded, if the user has turned off the display of images in their Web browsers, or if for some reason the image is not available </li></ul>
  47. 47. The alt Attribute <ul><li>The alt attribute also serves another purpose: </li></ul><ul><ul><li>For any <img> elements that do not include a title attribute, the value assigned to the alt attribute appears as a ToolTip in Internet Explorer and other browsers when you hold your mouse over the image </li></ul></ul>
  48. 48. Height and Width <ul><li>When you create an <img> element that includes only the src and alt attributes, a Web browser needs to examine the image and determine the number of pixels to reserve for it </li></ul>
  49. 49. Height and Width <ul><li>However, if you use the height and width attributes to specify the size of an image, the Web browser will use their values to reserve enough space on the page for each image </li></ul>
  50. 50. Height and Width <ul><li>It is very important to always assign height and width attribute values that are the exact dimensions of the original image </li></ul>
  51. 51. Height and Width <ul><li>Do not use the height and width attributes to resize an image on your Web page </li></ul>
  52. 52. Height and Width
  53. 53. Height and Width <ul><li>Another reason not to use the height and width attributes to modify the size of an image is that although you may reduce how the image appears in a browser, the browser still needs to download the original image in its original size, which may result in the page rendering more slowly than necessary </li></ul>
  54. 54. Using Images from Other Locations <ul><li>You can place images in subfolders that are relative to the location of the current Web page folder </li></ul><ul><li>You can link to images at other locations on the Web by assigning an absolute URL to the src attribute of the <img> element. </li></ul>
  55. 55. Using Images from Other Locations <ul><li>You can see one example of linking to an image on the Web at the W3C Web page for validating XHTML documents </li></ul>
  56. 56. Resources <ul><li>Some slides were adapted from the following text & companion lectures: </li></ul><ul><ul><li>XHTML, Comprehensive </li></ul></ul><ul><ul><li>First Edition </li></ul></ul><ul><ul><li>Dan Gosselin </li></ul></ul><ul><ul><li>Published by Course Technology (2004) </li></ul></ul>
  57. 57. Questions?