Presentation on theme: "Web Graphics. Compression Good idea to used compressed form of image for use on WWW Consider uncompressed bitmap image – file defines exact color of every."— Presentation transcript:
Compression 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 pixels Need 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 color So 3 bytes/pixel X 160,000 pixels = 480,000 bytes or about 480K! This is a LARGE file! Lossless compression: No information is lost You get back exactly what you started with after decompressing Eg., (letters represent runs of color) RRRRRRBBBBBBGGGGGGGYYY can be represented as 6R6B7G3Y without losing any information
Compression (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 files L = Lempel, Z = Ziv (algorithm’s creators) Dictionary = method of cataloging pieces of data
Compression (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 letters 16 spaces 1 dash 1 period Total 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
Compression (con’t) LZ adaptive dictionary-based algorithm Create a dictionary by picking out words that are repeated and put them in a numbered index: 1. ask 2. what 3. your 4. country 5. can 6. do 7. for 8. you New sentence: 1 not 2 3 4 5 6 7 8 – 1 2 8 5 6 7 3 4 What have we saved? Sentence = 37 memory units Dictionary = 37 memory units Total = 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).
Compression (con’t) LZ adaptive dictionary-based algorithm Looking for patterns might result in new dictionary: 1. ask_ 2. what_ 3. you 4. r_country 5. _can_do_for_you New (smaller) sentence: 1not_2345_-_12354 What 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)
Compression (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 applications Databases Text files
Popular formats for graphics images Most popular formats for graphics images used on the WWW: GIF – Graphics Interchange Format JPG (or JPEG) – Joint Photographic Experts Group And more recently: PNG – Portable Network Graphics All of these formats use a compressed version of the image Type of image being saved determines which format will work better...
GIF file format Used for simple images, line drawings such as logos, icons, buttons Files have.gif extension Supports up to 256 colors: Stores 8 bits of information about color per pixel Small color palette = smaller file size Dithering is used to reduce the number of colors Some 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 + blue Uses lossless compression “Runs” of the same-color pixel are encoded in a color + numberOfPixels format No information is lost – when decompressed it looks the same Uses patented form of lossless compression called LZW lossless compression (LZW = Lempel, Ziv, Welch) developed by Compuserve
GIF file format (con’t) Additional GIF features: Animated gifs Web graphics that appear to move Series of images that appear to move in rapid succession like a flip book Feature of GIF89a – new version of GIF87a Most browsers support 89a – those that do not will display first or last image in series How it works: Need 2 or more images to serve as frames Need gif animation program to assemble frames into single gif file
GIF 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 focus See example at: http://www.webstyleguide.com/graphics/gifs.html Transparent Images: Background shows through Use an image editing program to designate a particular color to be transparent (like the background) and save in GIF89a format Note: 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...
JPG file format Used for photographs, realistic artwork Files have.jpg or.jpeg extension Supports over 16 million colors Stores 24 bits of information about color per pixel Uses lossy compression Throws away info you do not need – it figures that subtle differences in color are not noticeable to the human eye Saves a lot of space without too much deterioration in image quality Image editing programs also allow you to vary the amount of compression More compression = smaller file = less quality Eg., http://www.howstuffworks.com/question289.htmhttp://www.howstuffworks.com/question289.htm 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 decompressed
PNG file format Newer image format for the WWW Files have.png extension Developed 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 GIF Full color representation (16+ million colors) Patent free It provides a way to save images without losing any info as you do with JPG
Graphics – acquiring images Locate clip art libraries Use a search engine – “Web clip art” “free clip art” Buy clip art packages Scan photos, drawings, etc. Use photos taken with digital camera Use image editing programs like Photo Shop, Paint Shop Pro, and Paint Copyright – protects other’s work – can be words, music, images, software Can not copy images off WWW without permission, can not scan images out of books, etc. Can: Get permission, cite sources, create your own Do not link to someone else’s image: Image might be removed (hole on your page) or replaced (oops!) Might put a strain on their server Your page may load slower Bad netiquette
Graphics – acquiring images (con’t) Scanners Convert images to digital format Can 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 shapes Document can then be edited As a copier – Makes a digital copy – image can not be modified using a text editor Uses a CCD (charge coupled device – an array of electronic sensors that detect light variation) to convert it to digital format Color scanning – measures the amount of red, green, and blue; single pass color scanner collects all color info in one pass
Graphics – thumbnail sketches Thumbnail sketches are small images that provide a preview of what a larger image will look like: Allows your page to load faster Lets the user select only those images he wants to see To 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?
Graphics – using images and load time Factors affecting time to load Web page: Size of image files that are used on page Size of an image file is NOT the same as the size (dimensions) of the image Two images that are the same dimensions may not have the same file size Number of images used on a page (unless same images are being re-used) Image format Tips for faster loading and rendering: Use appropriate file type Use height and width attribute of tag Use thumbnail sketches where appropriate Increase the amount of compression for JPG images Use images only when they add something to the presentation
Graphics – image maps Taking the idea of using an image as a hyperlink one step further: Clicking different parts of the image will activate different links Image maps are particularly effective for navigation purposes: http://www.amazon.com Two types of image maps Server-side – around longer Client-side – newer, easier to implement
Graphics – server-side image maps Server-side image maps run on the Web server Need: 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 image Browser 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 clicked Image map program looks up the map file, does some calculations to determine which page to load, and loads that page
Graphics – server-side image maps (con’t) Can recognize server-side image maps because image tag contains ismap attribute Some 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 time No 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
Graphics – client-side image maps Web browser does all the “processing” – no special image map program on server is necessary All mapping information is stored as part of the HTML document Four steps to create client-side image map: 1. Select image to use (should have clearly defined areas with boundaries) 2. Define the areas of the image map: a) Sketch out the clickable regions b) Determine shapes - shapes are one of three types: circle – need x,y,z where x,y is center of circle, z is radius rect – need x1,y1,x2,y2 where x1,y1 is upper left-hand corner, x2,y2 is lower right-hand corner of rectangle poly – x1,y1,x2,y2,...xn,yn where xi,yi are the coordinates of the ith corner of the polygon
Graphics – client-side image maps (con’t) c) Determine the coordinates of the shapes: Use image editing software that displays the x-y coordinates of the current mouse position OR Use 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: Note: 0,0 is the upper left corner of the image, positive y is down, positive x is to the right
Graphics – client-side image maps (con’t) 3. Include map information in the HTML document:
Graphics – client-side image maps (con’t) 4. Tie image to map information: (rest of map areas are listed here...) (more content can go here...)
Graphics – 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.
Graphics – client-side image maps (con’t) Summary: defines map for client-side image map. tags define the individual regions within the map. Attributes of the tag: shape – type of region (either circle, rect, or poly) coords – points bounding the region href – URL to link to