Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Design Concepts: Module B: Adding Images CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Goals • Understand how what dithering and gamma are • Understand how image compression works • Understand 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” • However, 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. • The approximation can result in a speckled look called dithering • Solution? The “Web Palette” N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science The Web Palette • 216 “Web safe” colors • Cross-section of Windows and Macintosh color palettes • Colors look generally the same for all users • 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 monitor • Windows & 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 machine • Lesson? 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 color • This 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 computer • The 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 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). 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 phosphors • 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 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 color Expression 21 24 26 Name 2-bit 4-bit 6-bit Colors 2 16 64 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Bit-Depth • Number of bits to represent pixel color Expression Name 28 8-bit 216 16-bit 224 24-bit (True Color) Colors 256 65, 536 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 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 value • Costs 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 calculations • Don’t cost a lot of disk space • Fairly processorintensive Image from http://www.povray.org/ 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 download • Because 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) “Lossless” Compression Originally developed by CompuServe You 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) 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 • GIF87a – Can support up to 8-bit color (256 colors) – Supports interlacing • GIF89a – 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 browsersupport • Both 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 downloaded • 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? – 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 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 borders N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science GIF Format - Transparency • 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) • Supports 24-bit “True Color” • Good for images with large gradations in color • Must 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 frequency • Samples 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! N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science JPEG Format • Different compression ratios can be selected • Represent a trade-off: File Size vs. Image Quality • 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 quality • Higher 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) • Number 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 JPEGs • Require more processing power than regular JPEGs • Not 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) • DO 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) • Open source solution to GIF patent issue • Like GIF, good at compressing images with large areas of flat color • Support of up to 24-bit color • Lossless 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) • Supports “shades” of transparency; allows for more than 1 color to be transparent • Built-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 info • Browser support is spotty, at best • 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 colors • 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 colors • Use correct compression schemes appropriate for your image! N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science The <img> Element • The src attribute specifies the filename of an image file • To include the src attribute within the <img> element, you type img src =“mygraphic.gif”> N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science The <img> Element • The <img> 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 <img> 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 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 available N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science The alt Attribute • The alt attribute also serves another purpose: – 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 N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Height and Width • 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 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 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 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 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 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 folder • You can link to images at other locations on the Web by assigning an absolute URL to the src attribute of the <img> 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 documents N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science Resources • 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? N241: Fundamentals of Web Development Copyright ©2004 Department of Computer & Information Science