2Compression Good idea to used compressed form of image for use on WWW Consider uncompressed bitmap image – file defines exact color of every pixel in image, eg.,400 X 400 image uses 160,000 pixelsNeed 3 bytes to describe every pixel (8 bits = 1 byte): 1 byte for red, 1 byte for green, 1 byte for blue (recall the RGB color model) – this is full color representation or 24 bit colorSo 3 bytes/pixel X 160,000 pixels = 480,000 bytes or about 480K! This is a LARGE file!Lossless compression:No information is lostYou get back exactly what you started with after decompressingEg., (letters represent runs of color)RRRRRRBBBBBBGGGGGGGYYY can be represented as6R6B7G3Y without losing any information
3Compression (con’t)This type of compression gets rid of redundancy – instead of listing a piece of info over and over, the program lists the info one time and then refers back to it whenever it appears in the file.Many compression programs use a variation of the LZ adaptive dictionary-based algorithm to shrink filesL = Lempel, Z = Ziv (algorithm’s creators)Dictionary = method of cataloging pieces of data
4Compression (con’t) LZ adaptive dictionary-based algorithm Example of LZ adaptive dictionary-based algorithm using text and words:Ask not what your country can do for you – ask what you can do for your country.17 words total in sentence:61 letters16 spaces1 dash1 periodTotal of 79 “memory units” (we assume that each letter, space, or punctuation mark takes up one unit of memory)To shrink the file (that is, reduce the number of memory untis), look for redundancies
5Compression (con’t) LZ adaptive dictionary-based algorithm Create a dictionary by picking out words that are repeated and put them in a numbered index:askwhatyourcountrycandoforyouNew sentence:1 not –What have we saved?Sentence = 37 memory unitsDictionary = 37 memory unitsTotal = 74 memory units vs. 79 memory units originally.This would make more of a difference if the speech were longer...In reality, program looks for patterns, not necessarily words.As program works through a phrase it modifies the dictionary (adaptive).
6Compression (con’t) LZ adaptive dictionary-based algorithm Looking for patterns might result in new dictionary:ask_what_your_country_can_do_for_youNew (smaller) sentence:1not_2345_-_12354What have we saved?Sentence = 18 memory units (vs. 37 last time)Dictionary = 41 memory units (vs. 37 last time)Total = 59 memory units (vs. 74 last time and 79 originally)
7Compression (con’t) – Lossy Lossy compression is another type of file compression used for images on the WWW.Program eliminates “unnecessary” bits of information.Consider a photograph:Large parts of the image might look the same (whole sky is blue). But the individual pixels making up the sky part of the image are a little bit different.Compression program changes color of certain pixels to color of those around them – this increases redundancy.This method works because the human eye has difficulty telling the difference between 16+ million different colors.Can not get original file back after it has been compressed, so this type of compression can not be used for:Software applicationsDatabasesText files
8Popular formats for graphics images Most popular formats for graphics images used on the WWW:GIF – Graphics Interchange FormatJPG (or JPEG) – Joint Photographic Experts GroupAnd more recently:PNG – Portable Network GraphicsAll of these formats use a compressed version of the imageType of image being saved determines which format will work better...
9GIF file formatUsed for simple images, line drawings such as logos, icons, buttonsFiles have .gif extensionSupports up to 256 colors:Stores 8 bits of information about color per pixelSmall color palette = smaller file sizeDithering is used to reduce the number of colorsSome monitors only support 256 colors; if image contains a non-supported color, it may dither to approximate color.Combine colors in a limited color palette: green = yellow + blueUses lossless compression“Runs” of the same-color pixel are encoded in a color + numberOfPixels formatNo information is lost – when decompressed it looks the sameUses patented form of lossless compression called LZW lossless compression (LZW = Lempel, Ziv, Welch) developed by Compuserve
10GIF file format (con’t) Additional GIF features:Animated gifsWeb graphics that appear to moveSeries of images that appear to move in rapid succession like a flip bookFeature of GIF89a – new version of GIF87aMost browsers support 89a – those that do not will display first or last image in seriesHow it works:Need 2 or more images to serve as framesNeed gif animation program to assemble frames into single gif file
11GIF file format (con’t) Additional GIF features (con’t)Interlaced GIFs:Normally images display from top down; interlaced images appear to start out blurry and then come into focusSee example at:Transparent Images:Background shows throughUse an image editing program to designate a particular color to be transparent (like the background) and save in GIF89a formatNote: if image background is more than one color, only the selected color will be transparent; you will need to change the background to be one color with an editor to make this work...
12JPG file format Used for photographs, realistic artwork Files have .jpg or .jpeg extensionSupports over 16 million colorsStores 24 bits of information about color per pixelUses lossy compressionThrows away info you do not need – it figures that subtle differences in color are not noticeable to the human eyeSaves a lot of space without too much deterioration in image qualityImage editing programs also allow you to vary the amount of compressionMore compression = smaller file = less qualityEg.,Every time a jpg image is edited you will lose some information so:Save original image in another format like: TIFF (Tagged Image File Format) or PNG (Portable Network Graphic)JPG images may take a little longer to decompress because of more complicated compression scheme while GIF images are more quickly decompressedVarying amount of compression:See for illustrationSaving a photo as a GIF:You will have a reduced number of colors and a huge file; image will appear to be a bit blotchySaving a simple line drawing as a JPG:You will have a big file, image will be grainy and blurred (tries to blend colors at borders...)
13PNG file format Newer image format for the WWW Files have .png extensionDeveloped in response to controversy about Unisys patent on LZW lossless compression algorithm – Unisys and Compuserve started charging software developers royalties for use of GIF (eg., Photo Shop, Paint Shop Pro, etc.)Uses lossless compression (like GIF) but slightly larger files in general. For simple images, has these advantages over GIF:Compresses slightly more than GIFFull color representation (16+ million colors)Patent freeIt provides a way to save images without losing any info as you do with JPG
14Graphics – acquiring images Locate clip art librariesUse a search engine – “Web clip art” “free clip art”Buy clip art packagesScan photos, drawings, etc.Use photos taken with digital cameraUse image editing programs like Photo Shop, Paint Shop Pro, and PaintCopyright –protects other’s work – can be words, music, images, softwareCan not copy images off WWW without permission, can not scan images out of books, etc.Can: Get permission, cite sources, create your ownDo not link to someone else’s image:Image might be removed (hole on your page) or replaced (oops!)Might put a strain on their serverYour page may load slowerBad netiquette
15Graphics – acquiring images (con’t) ScannersConvert images to digital formatCan be used:For text recognition –Uses OCR (Optical Character Recognition) software that tries to “guess” what the characters are by comparing them to a database of character shapesDocument can then be editedAs a copier –Makes a digital copy – image can not be modified using a text editorUses a CCD (charge coupled device – an array of electronic sensors that detect light variation) to convert it to digital formatColor scanning – measures the amount of red, green, and blue; single pass color scanner collects all color info in one pass
16Graphics – thumbnail sketches Thumbnail sketches are small images that provide a preview of what a larger image will look like:Allows your page to load fasterLets the user select only those images he wants to seeTo create thumbnail sketches:Use image editing program to scale down (re-size image)Use image editing program to crop small portion of larger image (eg., one bird out of a flock)NOT created by reducing height and width attribute values in the image tag – Why not?
17Graphics – using images and load time Factors affecting time to load Web page:Size of image files that are used on pageSize of an image file is NOT the same as the size (dimensions) of the imageTwo images that are the same dimensions may not have the same file sizeNumber of images used on a page (unless same images are being re-used)Image formatTips for faster loading and rendering:Use appropriate file typeUse height and width attribute of <img /> tagUse thumbnail sketches where appropriateIncrease the amount of compression for JPG imagesUse images only when they add something to the presentation
18Graphics – image mapsTaking the idea of using an image as a hyperlink one step further:Clicking different parts of the image will activate different linksImage maps are particularly effective for navigation purposes:Two types of image mapsServer-side – around longerClient-side – newer, easier to implement
19Graphics – server-side image maps Server-side image maps run on the Web serverNeed:Image (displayed by the browser)Map file (maps URLs to defined areas of image)Image map program (handles the request)How it works:User clicks on a part of the imageBrowser calls the image map program on server and sends along the x and y coordinates of the position on the image where the mouse was clickedImage map program looks up the map file, does some calculations to determine which page to load, and loads that page
20Graphics – server-side image maps (con’t) Can recognize server-side image maps because image tag contains ismap attributeSome problems with server-side image maps:Mousing over hyperlink does not reveal the URL of the selected link because it is not known yet (has to be calculated by image map program on server)Slow to respond to mouse clicks because a special program has to be run by the server each timeNo way to test server-side image maps with local files – need to use Web server to run the image map program and process the x and y coordinates
21Graphics – client-side image maps Web browser does all the “processing” – no special image map program on server is necessaryAll mapping information is stored as part of the HTML documentFour steps to create client-side image map:Select image to use (should have clearly defined areas with boundaries)Define the areas of the image map:Sketch out the clickable regionsDetermine shapes - shapes are one of three types:circle – need x,y,z where x,y is center of circle, z is radiusrect – need x1,y1,x2,y2 where x1,y1 is upper left-hand corner, x2,y2 is lower right-hand corner of rectanglepoly – x1,y1,x2,y2,...xn,yn where xi,yi are the coordinates of the ith corner of the polygon
22Graphics – client-side image maps (con’t) Determine the coordinates of the shapes:Use image editing software that displays the x-y coordinates of the current mouse position ORUse ISMAP trick:Create HTML file that includes the image inside a link pointing to a fake file, include the ismap attribute in the image tag – x-y coordinates will display in status line:<a href = “junk.html”><img src = “myimage.jpg” ismap></a>Note: 0,0 is the upper left corner of the image, positive y is down, positive x is to the right
23Graphics – client-side image maps (con’t) Include map information in the HTML document:<map name = “samplemap”><area shape = "poly" coords = "139,140,204,214,101,195"alt = "Triangle" href = "triangle.html"><area shape = "circle" coords = "110,103,27" alt = “Circle” href = "circle.html"><area shape = "rect" coords = "176,84,239,148" alt = “Square” href = "square.html"><area shape = "rect" coords = "0,0,320,240" alt = "Select a shape!"onClick = "alert('You need to click on a shape!')" href ="imagemap.html"></map>
24Graphics – client-side image maps (con’t) Tie image to map information:<body><img src = "shapes.gif"height = "240"width = "320"border = "0"usemap = "#samplemap“ />(more content can go here...)<map name = “samplemap”><area shape = "poly" coords = "139,140,204,214,101,195"alt = "Triangle" href = "triangle.html">(rest of map areas are listed here...)</map></body>
25Graphics – client-side image maps (con’t) Client-side image map observations:To specify a default URL when user clicks anywhere else, define an area enclosing the whole image. Since order determines precedence, put default area tag after all the others.Areas in your map can overlap but only one action will take place – the one that appears first in the order of the area tags.Map information can be kept in a separate file if you plan to use it in more than one document (eg., a navigation menu image map) – just include the filename before the # sign in the value of the usemap attribute.<img src = "shapes.gif"height = "240"width = "320"border = "0"usemap = “mapfile.html#samplemap“ />
26Graphics – client-side image maps (con’t) Summary:<map> defines map for client-side image map.<area> tags define the individual regions within the map.Attributes of the <area> tag:shape – type of region (either circle, rect, or poly)coords – points bounding the regionhref – URL to link to