CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Design Concepts: Module B: Adding Images

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Goals Understand how what dithering and gamma areUnderstand how what dithering and gamma are Understand how image compression worksUnderstand how image compression works Understand how to add images to your web pagesUnderstand how to add images to your web pages

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Dithering Typically, modern monitors can display 24-bit, “True Color”Typically, modern monitors can display 24-bit, “True Color” However, there are other monitors which don’t have “True Color” capabilitiesHowever, there are other monitors which don’t have “True Color” capabilities

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Dithering As a result, 24-bit colors which are not recognized by less powerful displays are approximated.As a result, 24-bit colors which are not recognized by less powerful displays are approximated. The approximation can result in a speckled look called ditheringThe approximation can result in a speckled look called dithering Solution? The “Web Palette”Solution? The “Web Palette”

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Web Palette 216 “Web safe” colors216 “Web safe” colors Cross-section of Windows and Macintosh color palettesCross-section of Windows and Macintosh color palettes Colors look generally the same for all usersColors look generally the same for all users AKA – “Netscape Colors” or “Web Safe Palette”AKA – “Netscape Colors” or “Web Safe Palette”

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Gamma Gamma can be thought of as the “brightness” of a monitorGamma can be thought of as the “brightness” of a monitor Windows & Unix displays tend to darker than Macintosh displaysWindows & Unix displays tend to darker than Macintosh displays

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Gamma 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 machineResult? 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 Lesson? Test your images across platforms or, at the very least, check for gamma using a gamma correction toolLesson? Test your images across platforms or, at the very least, check for gamma using a gamma correction tool

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Displaying Color as Images Analog images are continuous representations of colorAnalog images are continuous representations of color This is somewhat of a problem for computers, which like discrete measurementsThis is somewhat of a problem for computers, which like discrete measurements

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Displaying Color as Images The analog signal representing a continuous image is sampled to produce discrete values which can be stored by a computerThe analog signal representing a continuous image is sampled to produce discrete values which can be stored by a computer The frequency of digital samples greatly affects the quality of the digital imageThe frequency of digital samples greatly affects the quality of the digital image

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science How Sampling Works The original analog representation Measurements are made at equal intervals Discrete samples are taken from the measurements

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Pixel Sample location and sample values combine to make the picture element or pixelSample location and sample values combine to make the picture element or pixel 3 color samples per pixel:3 color samples per pixel: –1 RED sample –1 GREEN sample –1 BLUE sample

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Pixel Information about pixels is stored in a rectangular pattern and displayed to the screen in rows called rasters (from Spalter).Information about pixels is stored in a rectangular pattern and displayed to the screen in rows called rasters (from Spalter).

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Pixel (continued) Monitor pixels are actually circular light representations of red, green and blue phosphorsMonitor pixels are actually circular light representations of red, green and blue phosphors Pixel density is measured using Dots Per Inch (DPI)Pixel density is measured using Dots Per Inch (DPI)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Pixel (continued) Pixel size is measured using Dot PitchPixel size is measured using Dot Pitch DPI and Dot Pitch have an inverse relationship ( DPI = Dot Pitch)DPI and Dot Pitch have an inverse relationship ( DPI = Dot Pitch)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Bit-Depth Number of bits to represent pixel colorNumber of bits to represent pixel color ExpressionNameColors bit bit bit64

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Bit-Depth Number of bits to represent pixel colorNumber of bits to represent pixel color ExpressionNameColors bit bit 65, bit (True Color) About 16-million

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Images on the Internet There are actually two main categories of images that you might encounter on the InternetThere are actually two main categories of images that you might encounter on the Internet –Raster Graphics –Vector Graphics

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Raster Graphics Color information is stored based on location and RGB valueColor information is stored based on location and RGB value Costs lots of disk spaceCosts lots of disk space

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Vector Graphics Color information is stored in a series of mathematical calculationsColor information is stored in a series of mathematical calculations Don’t cost a lot of disk spaceDon’t cost a lot of disk space Fairly processor- intensiveFairly processor- intensive Image from

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Raster Image Compression An image in its raw format would be too large to transfer in a web downloadAn image in its raw format would be too large to transfer in a web download Because of this, images are generally saved using any one of several compression algorithmsBecause of this, images are generally saved using any one of several compression algorithms

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format Graphic Interchange Format (GIF)Graphic Interchange Format (GIF) “Lossless” Compression“Lossless” Compression Originally developed by CompuServeOriginally developed by CompuServe You can reduce file size by color reduction and changing bit-depthYou can reduce file size by color reduction and changing bit-depth

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format Uses LZW (Lempel-Zev-Welch) compressionUses LZW (Lempel-Zev-Welch) compression –Efficient at condensing color information for pixel rows of identical color –Takes advantage of large areas of “flat” color –Good for line drawings, illustrations and cartoon-like images –Patent for LZW is owned and enforced by Unisys

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Types GIF87aGIF87a –Can support up to 8-bit color (256 colors) –Supports interlacing GIF89aGIF89a –Supports everything supported by GIF87a –Also supports transparency –Also supports animation

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Types Both types have universal browser- supportBoth types have universal browser- support Both types are saved with the.GIF extensionBoth types are saved with the.GIF extension

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format - Interlacing Normal GIFs are displayed in their entirety when the image is completed downloadedNormal GIFs are displayed in their entirety when the image is completed downloaded However, interlacing allows the image to “fade in”However, interlacing allows the image to “fade in”

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format - Interlacing How does this happen?How does this happen? –Rows of pixels appear only after 12.5% of it has been downloaded –3 subsequent “passes” display 25%, 50% and, finally, 100% of the image Results in slightly larger file sizeResults in slightly larger file size

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format - Transparency Transparency allows designers to display images that seem as if they weren’t bound by rectangular bordersTransparency allows designers to display images that seem as if they weren’t bound by rectangular borders

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format - Transparency How does it happen?How does it happen? –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) –The resulting image’s background disappears and is replaced by the web page’s background

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science GIF Format - Transparency

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science JPEG Format Joint Photographic Experts Group (JPEG)Joint Photographic Experts Group (JPEG) Supports 24-bit “True Color”Supports 24-bit “True Color” Good for images with large gradations in colorGood for images with large gradations in color Must be decompressed before they are displayed in a browserMust be decompressed before they are displayed in a browser

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science JPEG Format Based on spatial frequencyBased on spatial frequency Samples image information in an 8 x 8 pixel areaSamples image information in an 8 x 8 pixel area “Lossy” Compression – image information is lost during the compression process; Lesson? Make changes to copies of your original!“Lossy” Compression – image information is lost during the compression process; Lesson? Make changes to copies of your original!

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science JPEG Format Different compression ratios can be selectedDifferent compression ratios can be selected Represent a trade-off: File Size vs. Image QualityRepresent a trade-off: File Size vs. Image Quality Determined by “Q” setting (0-100)Determined by “Q” setting (0-100)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science JPEG “Q” Setting Lower setting is a more aggressive ratio, resulting in smaller file sizes, but lower image qualityLower setting is a more aggressive ratio, resulting in smaller file sizes, but lower image quality Higher setting is less aggressive, resulting in better quality images, but larger filesHigher setting is less aggressive, resulting in better quality images, but larger files

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Progressive JPEGs Display in a series of passes (similar to interlaced GIFs)Display in a series of passes (similar to interlaced GIFs) Number of passes can determined when the graphic is savedNumber of passes can determined when the graphic is saved

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Progressive JPEGs Slightly smaller file size than regular JPEGsSlightly smaller file size than regular JPEGs Require more processing power than regular JPEGsRequire more processing power than regular JPEGs Not supported by all browsersNot supported by all browsers

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science When to use JPEGs Images with large gradations in color (photos)Images with large gradations in color (photos) DO NOT USE FOR IMAGES WITH “FLAT” COLORDO NOT USE FOR IMAGES WITH “FLAT” COLOR

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science PNG Format Portable Network Graphic (PNG)Portable Network Graphic (PNG) Open source solution to GIF patent issueOpen source solution to GIF patent issue Like GIF, good at compressing images with large areas of flat colorLike GIF, good at compressing images with large areas of flat color Support of up to 24-bit colorSupport of up to 24-bit color Lossless compressionLossless compression

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science PNG Format Two dimensional progressive display (similar, but better than, GIF’s interlacing)Two dimensional progressive display (similar, but better than, GIF’s interlacing) Supports “shades” of transparency; allows for more than 1 color to be transparentSupports “shades” of transparency; allows for more than 1 color to be transparent Built-in Gamma correctionBuilt-in Gamma correction

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science PNG Format Includes text capabilities for notes such as copyright infoIncludes text capabilities for notes such as copyright info Browser support is spotty, at bestBrowser support is spotty, at best Never use for images with large color gradations (use JPEGs instead)Never use for images with large color gradations (use JPEGs instead)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Managing Graphics Try to design new graphics using Web-safe colorsTry to design new graphics using Web-safe colors Keep graphic dimensions small (smaller graphics result in smaller file size)Keep graphic dimensions small (smaller graphics result in smaller file size)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Managing Graphics Don’t attempt to reduce color color information on your own (results in dithering) -- browsers are capable of approximating nearest colorsDon’t attempt to reduce color color information on your own (results in dithering) -- browsers are capable of approximating nearest colors Use correct compression schemes appropriate for your image!Use correct compression schemes appropriate for your image!

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The src attribute specifies the filename of an image fileThe src attribute specifies the filename of an image file To include the src attribute within the element, you type img src =“mygraphic.gif”>To include the src attribute within the element, you type img src =“mygraphic.gif”>

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element also includes other attributesThe element also includes other attributes

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The alt Attribute For an XHTML document to be well formed, the element must include the src and alt attributesFor an XHTML document to be well formed, the element must include the src and alt attributes

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The alt Attribute 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 devicesThe 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

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The alt Attribute 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 availableAlternate 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

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The alt Attribute The alt attribute also serves another purpose:The alt attribute also serves another purpose: –For any 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

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Height and Width When you create an 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 itWhen you create an 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

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Height and Width 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 imageHowever, 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

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Height and Width It is very important to always assign height and width attribute values that are the exact dimensions of the original imageIt is very important to always assign height and width attribute values that are the exact dimensions of the original image

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Height and Width Do not use the height and width attributes to resize an image on your Web pageDo not use the height and width attributes to resize an image on your Web page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Height and Width

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Height and Width 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 necessaryAnother 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

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using Images from Other Locations You can place images in subfolders that are relative to the location of the current Web page folderYou can place images in subfolders that are relative to the location of the current Web page folder You can link to images at other locations on the Web by assigning an absolute URL to the src attribute of the element.You can link to images at other locations on the Web by assigning an absolute URL to the src attribute of the element.

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Using Images from Other Locations You can see one example of linking to an image on the Web at the W3C Web page for validating XHTML documentsYou can see one example of linking to an image on the Web at the W3C Web page for validating XHTML documents

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Resources Some slides were adapted from the following text & companion lectures:Some slides were adapted from the following text & companion lectures: XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Questions?