1. Web Graphics

2. 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

3. 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

4. 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

5. 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:
ask
what
your
country
can do
for
you
New sentence:
1 not –
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).

6. Compression (con’t) LZ adaptive dictionary-based algorithm
Looking for patterns might result in new dictionary:
ask_
what_
you
r_country
_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)

7. 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

8. 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...

9. 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

10. 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

11. 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:
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...

12. 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.,
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
Varying amount of compression:
See for illustration
Saving a photo as a GIF:
You will have a reduced number of colors and a huge file; image will appear to be a bit blotchy
Saving 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...)

13. 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

14. 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

15. 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

16. 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?

17. 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

18. 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:
Two types of image maps
Server-side – around longer
Client-side – newer, easier to implement

19. 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

20. 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

21. 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:
Select image to use (should have clearly defined areas with boundaries)
Define the areas of the image map:
Sketch out the clickable regions
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

22. Graphics – 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 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

23. Graphics – 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>

24. Graphics – 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>

25. 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.
<img src = "shapes.gif"
height = "240"
width = "320"
border = "0"
usemap = “mapfile.html#samplemap“ />

26. 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