web graphics by chris harding. contents software vector graphics and pixel based transparent...

20
Web Graphics By Chris Harding

Upload: dana-caldwell

Post on 04-Jan-2016

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Web Graphics

By Chris Harding

Page 2: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Contents

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

Page 3: 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

Page 4: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

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

Page 5: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Types of Web Graphics

BMP PNG JPEG GIF

Page 6: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Vector Graphics/Pixel

Vector: Mathematical formula Smooth edges

Bitmap/Rasterised: Pixelated

Page 7: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

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

Page 8: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Compression

Compacting information Lossless Lossy

Lossless All information retained

Lossy Information is lost

Page 9: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Compression: Lossless (1/3)

Selected information is retained

Example: aabbbccdddddee 2a3b2c5d2e

Page 10: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Compression: Lossless (2/3)

PSD: 6.9 MB BMP: 1.37 MB

Page 11: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Compression: Lossless (3/3)

GIF: 86KB

Page 12: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Compression: Lossy (1/2)

Image information Entropy – data kept Redundancy – data removed

Page 13: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Compression: Lossy (2/2)

Original: 453KB ● JPEG: 4KB

Page 14: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

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.

Page 15: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

File>Save as... what?! (1/2)

Original2.9 MBs

JPEG275 KBs

GIF161KBs

Page 16: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

File>Save as... what?! (2/2)

Original372 KBs

JPEG13 KBs

GIF7KBs

Page 17: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Animated GIF

Number of different frames Saved in one file (can be very large) Play once or looped

http://www.webreference.com/dev/gifanim/

Page 18: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Animated GIF

Made up of 7 frames 4 frames below Looped file

Page 19: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

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

Page 20: Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Summary

Software Vector Graphics and Pixel Based Compression

Lossless Lossy

GIF vs. JPEG for different uses Introduce Animated GIF