Images.ppt

CSCI N241:CSCI N241: Fundamentals of Web DesignFundamentals of Web Design

Copyright ©2004 Department of Computer & Information Science

Design Concepts:Design Concepts:Module B: Creating ImagesModule B: Creating Images

N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science

GoalsGoals

• Understand how what dithering Understand how what dithering and gamma areand gamma are

• Understand how image Understand how image compression workscompression works

• Understand how to add images Understand how to add images to your web pagesto your web pages


DitheringDithering

• Typically, modern monitors can Typically, modern monitors can display 24-bit, “True Color”display 24-bit, “True Color”

• However, there are other monitors However, there are other monitors which don’t have “True Color” which don’t have “True Color” capabilitiescapabilities


DitheringDithering

• As a result, 24-bit colors which are As a result, 24-bit colors which are not recognized by less powerful not recognized by less powerful displays are approximated. displays are approximated.

• The approximation can result in a The approximation can result in a speckled look called ditheringspeckled look called dithering

• Solution? The “Web Palette”Solution? The “Web Palette”


The Web PaletteThe Web Palette

• 216 “Web safe” colors216 “Web safe” colors

• Cross-section of Windows and Cross-section of Windows and Macintosh color palettesMacintosh color palettes

• Colors look generally the same for all Colors look generally the same for all usersusers

• AKA – “Netscape Colors” or “Web AKA – “Netscape Colors” or “Web Safe Palette”Safe Palette”


GammaGamma

• Gamma can be thought of as the Gamma can be thought of as the “brightness” of a monitor“brightness” of a monitor

• Windows & Unix displays tend to Windows & Unix displays tend to darker than Macintosh displaysdarker than Macintosh displays


GammaGamma

• Result? Images created on a Windows Result? Images created on a Windows machine may look “washed-out” on a machine may look “washed-out” on a Mac; Images created on a Mac may Mac; Images created on a Mac may look too dark on a Windows machinelook too dark on a Windows machine

• Lesson? Test your images across Lesson? Test your images across platforms or, at the very least, check platforms or, at the very least, check for gamma using a gamma correction for gamma using a gamma correction tooltool


Displaying Color as ImagesDisplaying Color as Images

• Analog images are continuous Analog images are continuous representations of colorrepresentations of color

• This is somewhat of a problem for This is somewhat of a problem for computers, which like discrete computers, which like discrete measurementsmeasurements


Displaying Color as ImagesDisplaying Color as Images

• The analog signal representing a The analog signal representing a continuous image is continuous image is sampledsampled to to produce discrete values which can produce discrete values which can be stored by a computerbe stored by a computer

• The The frequency frequency of digital samples of digital samples greatly affects the quality of the greatly affects the quality of the digital imagedigital image


How Sampling WorksHow Sampling Works

The original analog

representation

Measurements are made at

equal intervals

Discrete samples are taken from

the measurements


The PixelThe Pixel

• Sample location and sample values Sample location and sample values combine to make the picture element combine to make the picture element or or pixelpixel

• 3 color samples per pixel:3 color samples per pixel:– 1 1 RED RED samplesample– 1 1 GREENGREEN sample sample– 1 1 BLUEBLUE sample sample


The PixelThe Pixel

• Information about pixels is stored in a Information about pixels is stored in a rectangular pattern and displayed to rectangular pattern and displayed to the screen in rows called the screen in rows called rastersrasters (from (from SpalterSpalter).).


The Pixel (continued)The Pixel (continued)

• Monitor pixels are actually circular Monitor pixels are actually circular light representations of red, green light representations of red, green and blue phosphorsand blue phosphors

• Pixel density is measured using Pixel density is measured using Dots Dots Per Inch (DPI)Per Inch (DPI)


The Pixel (continued)The Pixel (continued)

• Pixel size is measured using Pixel size is measured using Dot Dot PitchPitch

• DPI and Dot Pitch have an inverse DPI and Dot Pitch have an inverse relationship ( DPI = Dot Pitch)relationship ( DPI = Dot Pitch)


Bit-DepthBit-Depth

• Number of bits to represent pixel colorNumber of bits to represent pixel color

ExpressionExpression NameName ColorsColors

2211 2-bit2-bit 22

2244 4-bit4-bit 1616

2266 6-bit6-bit 6464


Bit-DepthBit-Depth

• Number of bits to represent pixel colorNumber of bits to represent pixel color

ExpressionExpression NameName ColorsColors

2288 8-bit8-bit 256256

221616 16-bit16-bit 65, 53665, 536

222424 24-bit (True 24-bit (True Color)Color)

About About 16-million16-million


Images on the InternetImages on the Internet

• There are actually two main There are actually two main categories of images that you might categories of images that you might encounter on the Internetencounter on the Internet– Raster Graphics Raster Graphics

– Vector GraphicsVector Graphics


Raster GraphicsRaster Graphics

• Color Color information is information is stored based on stored based on location and location and RGB valueRGB value

• Costs lots of Costs lots of disk spacedisk space


Vector GraphicsVector Graphics

• Color information Color information is stored in a is stored in a series of series of mathematical mathematical calculationscalculations

• Don’t cost a lot of Don’t cost a lot of disk spacedisk space

• Fairly processor-Fairly processor-intensiveintensive

Image from http://www.povray.org/


Raster Image CompressionRaster Image Compression

• An image in its raw format would be An image in its raw format would be too large to transfer in a web too large to transfer in a web downloaddownload

• Because of this, images are generally Because of this, images are generally saved using any one of several saved using any one of several compression algorithmscompression algorithms


GIF FormatGIF Format

• Graphic Interchange Format (GIF)Graphic Interchange Format (GIF)• ““Lossless” CompressionLossless” Compression• Originally developed by CompuServeOriginally developed by CompuServe• You can reduce file size by color You can reduce file size by color

reduction and changing bit-depthreduction and changing bit-depth


GIF FormatGIF Format

• Uses LZW (Lempel-Zev-Welch) Uses LZW (Lempel-Zev-Welch) compressioncompression– Efficient at condensing color information for Efficient at condensing color information for

pixel rows of identical colorpixel rows of identical color– Takes advantage of large areas of “flat” colorTakes advantage of large areas of “flat” color– Good for line drawings, illustrations and Good for line drawings, illustrations and

cartoon-like imagescartoon-like images– Patent for LZW is owned and enforced by Patent for LZW is owned and enforced by

UnisysUnisys


GIF TypesGIF Types

• GIF87aGIF87a– Can support up to 8-bit color (256 colors)Can support up to 8-bit color (256 colors)

– Supports interlacingSupports interlacing

• GIF89aGIF89a– Supports everything supported by GIF87aSupports everything supported by GIF87a

– Also supports transparencyAlso supports transparency

– Also supports animationAlso supports animation


GIF TypesGIF Types

• Both types have universal browser-Both types have universal browser-supportsupport

• Both types are saved with the .GIF Both types are saved with the .GIF extensionextension


GIF Format - InterlacingGIF Format - Interlacing

• Normal GIFs are displayed in their Normal GIFs are displayed in their entirety when the image is completed entirety when the image is completed downloadeddownloaded

• However, interlacing allows the image However, interlacing allows the image to “fade in”to “fade in”


GIF Format - InterlacingGIF Format - Interlacing

• How does this happen?How does this happen?– Rows of pixels appear only after 12.5% Rows of pixels appear only after 12.5%

of it has been downloadedof it has been downloaded

– 3 subsequent “passes” display 25%, 3 subsequent “passes” display 25%, 50% and, finally, 100% of the image50% and, finally, 100% of the image

• Results in slightly larger file sizeResults in slightly larger file size


GIF Format - TransparencyGIF Format - Transparency

• Transparency allows designers to Transparency allows designers to display images that seem as if they display images that seem as if they weren’t bound by rectangular bordersweren’t bound by rectangular borders



• How does it happen?How does it happen?– The background of an image is set to a color The background of an image is set to a color

that the designer chooses to be “invisible” (this that the designer chooses to be “invisible” (this color is later identified as the invisible color)color is later identified as the invisible color)

– The resulting image’s background disappears The resulting image’s background disappears and is replaced by the web page’s backgroundand is replaced by the web page’s background


JPEG FormatJPEG Format

• Joint Photographic Experts Group Joint Photographic Experts Group (JPEG)(JPEG)

• Supports 24-bit “True Color”Supports 24-bit “True Color”• Good for images with large Good for images with large

gradations in colorgradations in color• Must be decompressed before they Must be decompressed before they

are displayed in a browserare displayed in a browser



• Based on spatial frequencyBased on spatial frequency• Samples image information in an 8 x Samples image information in an 8 x

8 pixel area8 pixel area• ““Lossy” Compression – image Lossy” Compression – image

information is lost during the information is lost during the compression process; Lesson? Make compression process; Lesson? Make changes to changes to copiescopies of your original! of your original!



• Different compression ratios can be Different compression ratios can be selectedselected

• Represent a trade-off: File Size vs. Represent a trade-off: File Size vs. Image QualityImage Quality

• Determined by “Q” setting (0-100)Determined by “Q” setting (0-100)


JPEG “Q” SettingJPEG “Q” Setting

• Lower setting is a more aggressive Lower setting is a more aggressive ratio, resulting in smaller file sizes, ratio, resulting in smaller file sizes, but lower image qualitybut lower image quality

• Higher setting is less aggressive, Higher setting is less aggressive, resulting in better quality images, but resulting in better quality images, but larger fileslarger files


Progressive JPEGsProgressive JPEGs

• Display in a series of passes (similar Display in a series of passes (similar to interlaced GIFs)to interlaced GIFs)

• Number of passes can determined Number of passes can determined when the graphic is savedwhen the graphic is saved


Progressive JPEGsProgressive JPEGs

• Slightly smaller file size than regular Slightly smaller file size than regular JPEGsJPEGs

• Require more processing power than Require more processing power than regular JPEGsregular JPEGs

• Not supported by all browsersNot supported by all browsers


When to use JPEGsWhen to use JPEGs

• Images with Images with large gradations large gradations in color (photos)in color (photos)

• DO NOT USE DO NOT USE FOR IMAGES FOR IMAGES WITH “FLAT” WITH “FLAT” COLORCOLOR


PNG FormatPNG Format

• Portable Network Graphic (PNG)Portable Network Graphic (PNG)• Open source solution to GIF patent Open source solution to GIF patent

issueissue• Like GIF, good at compressing images Like GIF, good at compressing images

with large areas of flat colorwith large areas of flat color• Support of up to 24-bit colorSupport of up to 24-bit color• Lossless compressionLossless compression



• Two dimensional progressive display Two dimensional progressive display (similar, but better than, GIF’s (similar, but better than, GIF’s interlacing)interlacing)

• Supports “shades” of transparency; Supports “shades” of transparency; allows for more than 1 color to be allows for more than 1 color to be transparenttransparent

• Built-in Gamma correctionBuilt-in Gamma correction



• Includes text capabilities for notes Includes text capabilities for notes such as copyright infosuch as copyright info

• Browser support is spotty, at bestBrowser support is spotty, at best• Never use for images with large color Never use for images with large color

gradations (use JPEGs instead)gradations (use JPEGs instead)


Managing GraphicsManaging Graphics

• Try to design new graphics using Try to design new graphics using Web-safe colorsWeb-safe colors

• Keep graphic dimensions small Keep graphic dimensions small (smaller graphics result in smaller file (smaller graphics result in smaller file size)size)


Managing GraphicsManaging Graphics

• Don’t attempt to reduce color color Don’t attempt to reduce color color information on your own (results in information on your own (results in dithering) -- browsers are capable of dithering) -- browsers are capable of approximating nearest colorsapproximating nearest colors

• Use correct compression schemes Use correct compression schemes appropriate for your image!appropriate for your image!


The The <img><img> Element Element

• The The srcsrc attribute specifies the attribute specifies the filename of an image filefilename of an image file

• To include the src attribute within To include the src attribute within the the <img><img> element, you type element, you type img img src =“mygraphic.gif”>src =“mygraphic.gif”>


The The <img><img> Element Element

• The The <img><img> element also includes element also includes other attributesother attributes


The The altalt Attribute Attribute

• For an XHTML document to be well For an XHTML document to be well formed, the formed, the <img><img> element must element must include the include the srcsrc and and altalt attributes attributes



• The The altalt attribute is very important attribute is very important for user agents that do not display for user agents that do not display images and Web browsers that are images and Web browsers that are designed for users of Braille and designed for users of Braille and speech devicesspeech devices



• Alternate text will display if an image Alternate text will display if an image has not yet downloaded, if the user has not yet downloaded, if the user has turned off the display of images in has turned off the display of images in their Web browsers, or if for some their Web browsers, or if for some reason the image is not availablereason the image is not available



• The The altalt attribute also serves attribute also serves another purpose: another purpose: – For any For any <img><img> elements that do not elements that do not

include ainclude a titletitle attribute, the value attribute, the value assigned to the assigned to the altalt attribute appears as attribute appears as a ToolTip in Internet Explorer and other a ToolTip in Internet Explorer and other browsers when you hold your mouse browsers when you hold your mouse over the imageover the image


Height and WidthHeight and Width

• When you create an When you create an <img><img> element that includes only the element that includes only the srcsrc and and altalt attributes, a Web attributes, a Web browser needs to examine the browser needs to examine the image and determine the number image and determine the number of pixels to reserve for itof pixels to reserve for it



• However, if you use the However, if you use the heightheight and and widthwidth attributes to specify attributes to specify the size of an image, the Web the size of an image, the Web browser will use their values to browser will use their values to reserve enough space on the reserve enough space on the page for each imagepage for each image



• It is very important to always It is very important to always assign assign heightheight and and widthwidth attribute values that are the exact attribute values that are the exact dimensions of the original imagedimensions of the original image



• Do not use the Do not use the heightheight and and widthwidth attributes to resize an attributes to resize an image on your Web pageimage on your Web page



• Another reason not to use the height and Another reason not to use the height and width attributes to modify the size of an width attributes to modify the size of an image is that although you may reduce image is that although you may reduce how the image appears in a browser, the how the image appears in a browser, the browser still needs to download the browser still needs to download the original image in its original size, which original image in its original size, which may result in the page rendering more may result in the page rendering more slowly than necessaryslowly than necessary


Using Images from Other Using Images from Other LocationsLocations

• You can place images in subfolders You can place images in subfolders that are that are relativerelative to the location of the to the location of the current Web page foldercurrent Web page folder

• You can link to images at other You can link to images at other locations on the Web by assigning an locations on the Web by assigning an absolute URL to the src attribute of absolute URL to the src attribute of the the <img><img> element. element.


Using Images from Other Using Images from Other LocationsLocations

• You can see one example of linking You can see one example of linking to an image on the Web at the W3C to an image on the Web at the W3C Web page for validating XHTML Web page for validating XHTML documentsdocuments


ResourcesResources

• Some slides were adapted from the Some slides were adapted from the following text & companion lectures:following text & companion lectures:XHTML, ComprehensiveXHTML, Comprehensive

First EditionFirst Edition

Dan GosselinDan Gosselin

Published by Course Technology (2004)Published by Course Technology (2004)


Questions?Questions?

Images.ppt

Technology

Transcript of Images.ppt