Web Graphics By Chris Harding

Contents Software Vector Graphics and Pixel Based Transparent Images Compression GIF vs. JPEG Animated GIF

Software Fireworks (Part of Macromedia Suite) Photoshop Paint Shop Pro Microsoft Paint Examples of software available to create graphics suitable for the Internet.

Web Graphics Should be kept small. Around 100K mark Large graphics take time to download Lots of small graphics can make a sight look good But cause long page loading times Ideally graphics for the web should be kept to around 100k in size. This means that any connections over a modem will not have to wait to long for files to download. Plus because of the way web browsers download papers to many large files can take a long time to download the entire page. 10s of small images can have the same effect of taking a long time to download. Smaller graphics can enhance the overall appearance of a web site. For example by making a table border have rounded corner, which can be done using a style sheet (covered next week)

Types of Web Graphics BMP PNG JPEG GIF

Vector Graphics/Pixel Mathematical formula Smooth edges Bitmap/Rasterised: Pixelated Vector graphics are drawn using mathematical formula to draw basic shapes such as rectangle, square, circle, line etc. A vector based shape can allow alterations to the shape itself by using “handles”. For example on a line a handle is on each end, it is possible to add extra handles to the middle of the line. This handle can be moved to draw a line with three points, the handle can move on its point to draw lines with curves in them. Vector based shapes are smoothly drawn. Problem is that a special add-in is often required to display vector graphics on a web page. Bitmap images are created using individual pixels. When a shape is drawn it is made up of individual pixels that when zoomed out it looks smooth (middle image), when the image is zoomed in it looks pixelated (right image). As a pixel is square, to make the round shape extra pixels are added with a lighter colour.

Transparent Image Can be JPEG or GIF Best done with GIF Can select one colour to be transparent or background Best results make Background one colour (like pink!) Select background for transparent layer This can be done with either JPEG or GIF file formats. Best results often in GIF. Best way to do this is to select an obscure colour for the background such as PINK or PURPLE. This is because the way shapes are created using pixels. As the main shape colour can have lighter colour pixels with it. Using a white background can result in some “bleeding” of the image into the background.

Compression Compacting information Lossless Lossy All information retained Information is lost

Compression: Lossless (1/3) Selected information is retained Example: aabbbccdddddee 2a3b2c5d2e All information is kept during lossless compression. For example a string is compressed into 2a3b2c5d2e, when the file is read it uncompressed into a string again. Same principle is used for images. The average image has a number of pixels neighbours that are the same, as such it is possible to compress the file in this way,

Compression: Lossless (2/3) PSD: 6.9 MB BMP: 1.37 MB Same image compressed using Photoshop (PSD), saved as Bitmap (BMP)

Compression: Lossless (3/3) GIF: 86KB And finally GIF

Compression: Lossy (1/2) Image information Entropy – data kept Redundancy – data removed Lossy compression is where redundant information is deleted. For images this can be every 3rd or 5th pixel, as images can contain hundreds or even thousands of pixels it is possible to remove a number of pixels without loosing the general image shape or information.

Compression: Lossy (2/2) Original: 453KB JPEG: 4KB Right image when lossy compression is used

Compression Methods Lossless: common Windows file formats. RLE (Run Length Encoding) Lossless: common Windows file formats. LZW (Lemple-Zif-Welch) Lossless: TIFF, PDF, GIF, and PostScript. Most useful for large areas of single color. JPEG (Joint Photographic Experts Group) Lossy: JPEG, TIFF, PDF and PostScript. Continuous-tone images ie photographs ZIP Lossless: PDF and TIFF. Most effective for large areas of single color.

File>Save as... what?! (1/2) Pictures require a high level of detail and is often better to save using lossless compression when lossy can degrade the image to much. Original 2.9 MBs JPEG 275 KBs GIF 161KBs

File>Save as... what?! (2/2) Images for the web can often have very little difference when different compression is used. Original 372 KBs JPEG 13 KBs GIF 7KBs

Animated GIF Number of different frames Saved in one file (can be very large) Play once or looped Animated GIFs are made up of many different frames. Each frame is a different image which is saved in one file. This can mean that the animated file can be very large. It is possible that this image runs once, or in a loop. http://www.webreference.com/dev/gifanim/

Animated GIF Made up of 7 frames 4 frames below Looped file This example is made up of 7 frames to show the penguin going past the window. Only 4 frames are shown.

Web Graphics with CSS Use CSS with images to create visual effects Add round border to tables Roll over images Menu items Practical tutorial on this topic next week

Summary Software Vector Graphics and Pixel Based Compression Lossless Lossy GIF vs. JPEG for different uses Introduce Animated GIF