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