1. Web Graphics
By Chris Harding

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

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

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

5. Types of Web Graphics
BMP
PNG
JPEG
GIF

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

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

8. Compression Compacting information Lossless Lossy
All information retained
Information is lost

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

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

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

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

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

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

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

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

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

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

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

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