1

GFI Files

Graphics Interchange Format

2

GIF History CompuServe developed

1987 Versions 87a, V89a Because there was no standard

3

GIF Characteristics Compressed

Less Space, Less loading time 8-bit color (or less) Can contain more than one image Interlacing possible – image can develop

from fuzzy to clear, rather than top to bottom Free – so became widely used

4

Problem LZW Compression Algorithm

Lempel-Ziv-Welch Believed to be open for use Developers claimed patented

PNG resulted GIF is still most widely used

5

GIF Format Header – version, screen layout, palette Control Blocks – governs display of image

Fading, timing, animation Image Block – information for 1 image

Size, palette Extension Block – comments

6

GIF Compression via LZW Lossless Eliminates repeated strings of data &

replace with token to previous data

1 1 1 2 3 2 1 2 3 19 19 1 1 1 19 19

1 1 1 2 3 2 [3,3] 19 19 [1,3] 19 19

No need to zip.

7

GIF Animation A multi-image GIF File Timed display gives appearance of motion GIF87a – Multi-image but no motion GIF89a – Multi-image with animation Some browsers are not compatible with the

animation – 1st image is shown

8

JPEG Files

Joint Photographic Experts Group

9

JPEG Files JPEG: Actually a compression algorithm

File format – JFIF .jpeg, .jpg, .jif, .jfif

Better for Photos 24-bit color Powerful Compression Engine

But lossy compression

10

JPEG Compression Basis: humans are much more aware of

small changes in brightness (luminance) than small changes in color or large changes in color or brightness

11

JPEG Compression – 3 steps1. Convert RGB to system identifying

brightness (e.g. HSL, YCbCr)2. Data Reduction through Subsampling –

brightness unchanged, eliminates ½ of other 2 scales- replace pairs of neighboring pixels with a single value – the average- reduces to 2/3 of size without noticeable loss of quality

12

JPEG Compression – 3 steps3. Direct cosine transform (DCT) & Quantization

Works on 8 x 8 blocks Color & Brightness in each block are identified

and rounded, more weight is given to small changes

E.G. 3 5, 75 100 Result: many duplicate values, compresses well

by a standard lossless method But image is NOT as accurate as original

13

Compression vs. Quality Always a tradeoff – 3 main factors

More compression less quality Aggressiveness of rounding Accuracy of jpeg viewer – speed vs. quality

Compression level – 1 to 100 (not %) E.G. 75 is sometimes default – good quality,

medium compression – not consistent E.G. Lo-Med-Hi-Max

14

Progressive JPEG Image comes into focus slowly, like with

interlaced GIF Not interlaced Starts with low quality image, then is

replaced with higher quality images – appearance of coming into focus

Same storage requirements

15

Transparent Color

JPEG does not support transparent color Technically difficult due to the other

aspects of storing the image

16

Compression Ratios - Comparison

For Photos GIF: 5:1 (1/5 the storage) JPEG: 10:1 at lowest level

200:1 at highest level Typical: 30:1 slightly noticeable reduction

in quality

17

Conclusion JPEG is superior to other methods for

photorealistic images – smooth edges & shading

GIF is best for drawings – hard edges & sharp color changes

18

JPEG: Multiple Compressions Resaving without changes in image or

compression level – quality is exactly same Each 8x8 block affected is recompressed &

lose more quality – can affect image unevenly

Cropping is most damaging Work in TIFF or PNG then save as JPEG

19

Final Comments Consider your monitor

256 colors vs. 16 M You can change by changing settings

GIF JPEG conversion Degrades Can get decent results, see other sources

20

BMP Files

Bit Map

21

BMP Files - Basics Native format for Windows & OS/2

Backgrounds, graphics, wallpaper Not good for sending via Internet Only format for Windows wallpaper Only slightly compressed, or not at all, so

large – can be zipped – load & display quickly, since no decompression

22

BMP File Format File Header

BM, number of bytes, file layout Information Header – describes image

Dimension in pixels, color depth (1, 4, 8, 24-bit), compression, number colors used, number colors considered important

If all colors can’t be displayed, replaced or dithered; palette stored in order of importance e.g. Brown bear vs. American Flag

23

Dithering

Creating the illusion of new colors and shades by varying the pattern of dots.

24

BMP Compression Only 4 & 8-bit images Run-length encoding (RLE) – lossless Replaces string of identical bytes with token

telling how many

10 11 11 11 11 15 15 15 6 7 8 8 8 8 8

10 [11,4] [15,3] 6 7 [8,5] Saves minimal space but decompresses fast

25

DIB? BMP files are referred to as

Device independent bit maps Can display on any monitor Sometimes .dib extension

Same as .bmp

26

Convert Image to Wallpaper Software can help

Microsoft Plus! Paint Shop Pro Web Browsers Paint Graphics Workshop

See handout

RLE compressed bit map can be used a wallpaper – 4-bit only

Change extension to .bmp

27

Other Graphic File Formats

28

PNG – Portable Network Graphics Developed due to legal problems with GIF

compression algorithm Lossless Compression

More than GIF, less than JPEG More changes than just compression

29

PNG: Other Changes over GIF More Color Depth

Up to 48 bits per pixel Improved gray scale

Better interlacing & transparency No Multiple images (thus no animation) Becoming common, won’t always display

Netscape, Internet Explorer AOL Browser, but not email

30

TIFF – Tagged Image File Format Early Graphics format Originally only grayscale High quality graphics

Developed for scanning images Common in scanning programs

Scanner, fax, desktop publishers Flexible format

31

TIFF Characteristics Causing its popularity Lossless compression (LZW, JPEG, others) Handles huge images Stores image in strips (tiles in latest version)

Can access one portion 2 – 96 bits per pixel

32

TIFF Disadvantages Tried to be everything to everybody Versions are not compatible due to too

many options You may not be able to display others TIFF

files New versions are improved, but not fixed

yet

33

ICO – Windows Icon (.ico) In toolbars, etc. Can store in .exe or .dll files 4-bit, 32 x 32 pixel image

Limited size & color Transparent color = screen color Image in inverse color, always shows

Can create only icons with icon editor

34

ART – from AOL Designed to download quickly

Display time same, transmission faster Trades quality for size by compression Your downloads may be converted to ART AOL includes a converter

Necessary unless display only (email, use on web site, etc.)

35

PCD – Photo CD from Kodak For storing photo images on a CD-ROM About 100 images per CD Each photo is digitized at 5 - 6 resolutions

Chose one to work with Can convert to other formats Many editors will read

Paint Shop Pro, Graphics Workshop

36

Macintosh PICT Native format for Macintosh Like BMP is to Windows Can store 1-bit to 32-bit color information 8-bit grayscale