Date post: | 14-Dec-2015 |
Category: |
Documents |
Upload: | casey-holsworth |
View: | 217 times |
Download: | 2 times |
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 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. ask2. what 3. your4. country5. can6. do7. for8. 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_country5. _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 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...
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.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 <img /> 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 regionsb) 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:
<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
Graphics – client-side image maps (con’t)
3. 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>
Graphics – client-side image maps (con’t)
4. 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>(more content can go here...)
</body>
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:
<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 region href – URL to link to