Chapter 5 Images Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell
Image Introduction Images are good for illustrating ideas showing strictly visual information providing navigation And yes, decoration You need to think about the value of the image because it does come with a price. Does the look matter? Yes Does functionality matter? Yes Over time decorative graphics will not be seen. This is the same with overly animated pages. The idea at play here is sensory adaptation.
Image Intro. Contd. Images are made up of pixels (picture elements) small dot which can be set to a color Resolution is number of pixels across and down Consider typical screen resolutions: 640x480, 800x600, 1024x768, 1200x1600 Bit depth = number of bits to represent each color 4 bit per pixel = 16 colors 8 bits = 256 colors 16 bits = thousands of colors 24 or 32 bit = millions of colors Two general image storage formats Vector format -- describe image as set of curves Illustrations, geometric style displays Bitmap a bunch of dots with colors Photos and complex imagery Image display formats are always bitmap! Vectors are rendered into bitmaps Bitmaps are decompressed (typically) into other bitmap
Web Graphic Formats The Web supports numerous image file types No actual limit to types of images delivered Problem is browser support Limited to GIF, JPEG, and somewhat PNG BMP also commonly supported but not efficient for delivery File Type GIF (Graphics Interchange Format) File Extension.gif JPEG (Joint Photographic Experts Group) XBM (X Bitmaps) XPM (X Pixelmaps) PNG (Portable Network Graphics).jpg or.jpeg.xbm.xpm.png
GIF GIF (graphics interchange format).gif 256 colors only lossless compression low degree of compression run length encoding compresses continuous horizontal regions well good for illustrations and line art can make interlaced and transparent Pronunciation seems a big deal Unisys patent rumor and PNG
Some Examples of GIF Characteristics GIF compression Dithering Transparency Interlacing
JPEG JPEG (Joint Photographic Experts Group).jpeg or.jpg 24bit color possible Lossy compression Can adjust the compression level Not good with continuous color regions or text (introduces residue) Good for photographs Can make progressive Can t make transparent New version called JPEG 2000 promises wavelet based compression
Format Comparison
Format Comparison Contd. Format Compression Scheme Color Depth Supported Progressive or Interlaced Rendering Transparency Animation GIF Lossless (preserves file size for minimal compression of continuous horizontal regions of color) 8-bit (256 colors) Interlaced Yes (1 degree) Yes JPEG Lossy (trade image quality for file size) 24-bit (millions of colors Progressive No No
Images and Download Image download issues 1MB @ 56Kbps = 2.5 mins 1MB@T1 (1.544Mbps) = 5 seconds Image size is determined by physical size in pixels number of bits to represent the colors in a pixel One approach to reduction of image size is reduction of color another is higher degrees of compression (quality vs. file size) When it comes to high speed Web pages, compression of images is not the only thing to consider. Remember, small images doesn t necessairly translate into a fast Web page. Server load, number of connections, HTTP compression, HTML optimization, etc.
Obtaining Images Where people get images Make them Photoshop, Illustrator Capture them Scanner, digital camera, etc. Buy them CD-ROM clip-art libraries (www.eyewire.com) Steal them This is VERY illegal! Note: Fair use law is unclear and many people are abusing it
Image Basics <img> element is used to insert an image into a page <img src= http://www.xyz.com/images/logo.gif /> Absolute link <img src= logo.gif /> Relative links are probably better The alt attribute used to set alternative text rendering for the image <img src= logo.gif alt= Big Company, Inc. /> Be careful with meaningful alt values red ball? Picture of building, etc. alt attributes not just for text browsers but may be for people who turn images off or show as tooltips
Alignment of Images Image alignment is with align attribute, table, or style sheet <img align= TOP src= logo.gif /> Initial values are top, middle, and bottom
Alignment of Images Netscape initially added text flow capability with align= left and align= right There are few other possibilities align values like baseline, texttop, absmiddle, absbottom, etc. These attributes are very proprietary and CSS should be used instead.
HSPACE and VSAPCE With text flowing around images you need to set some buffer horizontally and vertically using hspace and vspace respectively. <img src= logo.gif align= left hspace= 10 vspace= 20 />
Controlling Text Flow With text flow you also need to consider the returns so <br /> has the attribute clear. The clear attribute allows you to clear columns flowing around images <br clear= left /> Clear until left column can be reached <br clear= right /> Clear until right column can be reached <br clear= all /> Clear until both left and right columns can be reached Some developers use tables needlessly when this minor extension could be employed Under CSS you do not need these extensions
Image Height and Width To allow the browser to layout a page right away it is important to indicate the size of images using the height and width attributes set in pixels or percentage. <img src= logo.gif height= 100 width= 300 /> You can resize things with height and width but it will distort when getting bigger and getting smaller may provide little obvious benefit. <img src= logo.gif height= 1 width= 1 /> height and width can be used with percentage values to create interesting effects, try <img src= logo.gif height= 100% width= 100% / >
Lowsrc Another useful performance improvement comes in the form of the lowsrc attribute. Set this attribute to an image to load before the current image (usually it is smaller or black and white) <img src= colorlogo.gif lowsrc= bwlogo.gif /> Simple animation is possible with the lowsrc attribute but be careful since speed of loading is unpredictable, use animated GIFs instead
Image Tricks Be aware that there are tricks that can be employed with images particularly with invisible images with which you can push things around in a variety of ways <img src= clearpixel.gif height= 100 width= 100 > <img src= clearpixel.gif hspace= 100 > Note: Netscape 4 later introduces a non-standard tag <spacer> to provide the same function as the image trick. Do not use this tag
Images and Links Images can be used with links <a href= http://www.yahoo.com ><img src= button.gif ></a> Remove the border put around the image because of linking <img src= button.gif alt= button border= 0 /> When removing the color around an image you should strive to make the image look like it is pressable with a bevel or similar feature. Don t make the user hunt for what is active in the document. Careful with spaces between the close <img> and the close tag </a> this may introduce a tick though some browsers fix this for you In general an entire image is clickable but with the idea of imagemaps it is possible to make certain areas of an image go to one location or another. This hotspot style image is useful to make complex user interfaces. Two basic types of image maps: client-side and server-side
Image Maps Server-side images are older and have drawbacks in that they require the server to decode the selection Set using the ismap attribute <a href= http://www.bozo.com/cgi-bin/imagemap/main.map ><img src= bozo.gif ismap></a> Client side image maps include the information locally to decode the click so they are faster Set using the usemap attribute in the <img> element to reference a client side map <img src= logo.gif usemap= #bozomap /> <map name= bozomap id= bozomap > <area shape= rect coords= 1,0, 10,10 href= index.htm /> <area shape= rect coords= 10,10, 20,20 href= index2.htm /> </map>