web graphics by chris harding. contents software vector graphics and pixel based transparent...
TRANSCRIPT
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
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
Types of Web Graphics
BMP PNG JPEG GIF
Vector Graphics/Pixel
Vector: Mathematical formula Smooth edges
Bitmap/Rasterised: Pixelated
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
Compression
Compacting information Lossless Lossy
Lossless All information retained
Lossy Information is lost
Compression: Lossless (1/3)
Selected information is retained
Example: aabbbccdddddee 2a3b2c5d2e
Compression: Lossless (2/3)
PSD: 6.9 MB BMP: 1.37 MB
Compression: Lossless (3/3)
GIF: 86KB
Compression: Lossy (1/2)
Image information Entropy – data kept Redundancy – data removed
Compression: Lossy (2/2)
Original: 453KB ● JPEG: 4KB
Compression Methods
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)
Original2.9 MBs
JPEG275 KBs
GIF161KBs
File>Save as... what?! (2/2)
Original372 KBs
JPEG13 KBs
GIF7KBs
Animated GIF
Number of different frames Saved in one file (can be very large) Play once or looped
http://www.webreference.com/dev/gifanim/
Animated GIF
Made up of 7 frames 4 frames below Looped file
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