Types of Graphics

GIF (Graphic Interchange Format)

Used:

• line drawings
• solid tones
• simple images (clip art)

Max Colors: 256
Extension: .gif

Transparency
One color can be set to transparency (most likely background)

Animation
A animated gif has several images or frames and can be created in Adobe Fireworks, ...

compression
Lossless compression is used when saving gif. When rendered by browser, it will contain same pixels.

Optimization
Process of creating image with lowest file size, but still has a good quality.

• reduce amount of colors

Interlacing
Normally: Top of image displays in browser if 50% of picture is read.
Interlaced image: progressively displays, seems to fade in as it downloads.

JPEG (Joint Photographic Experts Group)

Used:

• Photographs

Max Colors: 16.7 million
Extension: .jpg or .jpeg

Transparency
No transparency

Animation
No animation

compression
Lossy compression: some pixels in original image are lost. When rendered by browser it will display similar, but not really the same.

Optimization
less compression: higher quality, larger filesize
more compression: lower quality, lower filesize Fire Works and Photoshop are used often.

Progressive JPEG
Similar to interlaced image: progressively displays, seems to fade in as it downloads.

Portable Network Graphic (PNG)

Used:

• combination of GIF and JPEG

Max Colors: millions
Extension: .png

Transparency
Support various transparency levels

Animation
No animation

compression
uses lossless compression

Interlacing
Supports interlacing

WebP Images (Google)

Used:

• Photographic Images
• Only supported by Google Chrome

Max Colors: millions

compression
Uses lossy compression for photographic images