An Introduction to Graphic File Formats

.jpg .gif .tiff bmp and .eps and .psd ...

Two Types of File Formats

Bitmap Vector

Bitmap Bitmap files store information as a pattern of pixels

(tiny, colored/black and white squares)

– Usually used for photographs and other continuous-tone images

– Resizing results in resolution change and may degrade image quality

Vector Vector files store information as

mathematical data

– Usually used for line art, logos, etc.

– Can be resized/scaled without quality loss

What is Resolution?

Measurement of the output quality of an image

Graphic Images are Measured In:

Pixels (px)

Dots (dpi)

Lines (lpi)

Summary

Print

Higher resolution needed for print qulaity (300 dpi)

Web

Lower resolution needed for quick loading of pages (72)

Line screen and commercial printing

Lines per inch (LPI), also called “line screen,” has to do with commercial printing of photographs/artwork

– DPI of an image should be at least 1.5x the LPI

The higher the line screen, the better the image

– Laser printers can usually print at 50-65 lpi

– Newspapers usually run 80-100 lpi

– Standard offset printing is 133-150 lpi

– High-quality art books may run as high as 250 lpi

Higher line screens require better paper

Halftones in commercial printing

Four colors are printed to make up a full-color image

– C-M-Y-K (cyan, magenta, yellow, black)

Colors are laid-down at angles, in a “rosette” pattern, to create the illusion of continuous tone

Most colors can be recreated using CMYK inks

Primary file types

JPEG

GIF

PNG

EPS

TIFF

BMP

PICT

PDF

MPEG

JPEG Files

Joint Photographic Experts Group (.jpg)

Often used for Web graphics

Allows for varying levels of file compression and file size, but results in quality loss

Scaling-up results in quality loss

Best for on-screen use; not good for printing

Very good compatibility

Text can be blurry

JPEG Files: Colors and optimization

24-bit file, which gives more colors

Ideal for continuous tone images

Images with only a few colors or large blocks of color are larger as a JPEG

Relies on lossy compression technique that deletes data through a series of complex algorithms

Consequently, as size is reduced, so is quality

JPEG file compression options

JPEG compression vs. file sizes

Low compression = Best quality, largest file size

Medium compression = Acceptable quality and size

High compression = Poor quality, small file size

Highest quality setting (#10)Medium quality setting (#5)Lowest quality setting (#1)

GIF files

Graphic Interchange Format (“Giff” or “Jiff”)

Developed by CompuServe in late 1980s

Good for basic Web graphics with text and line drawings

Keeps text fairly sharp

Only supports 8-bit color (256 colors)

Small file size

Use for logos, etc.

Line art definition

Line art is usually associated with print. It includes maps, charts, line drawings such as technical art; also cariacatures, cartoons, etc.

Use GIFs when Working with Line Art and Cartoonish-type Images

Compression and Optimization

GIFs use lossless compression

Lossless compression reduces image size without affecting quality

GIFs and Animation

GIF can be saved as a series of images within one file

Along with embedded control data, this allows for “animated GIFs”

Only option for animation other than Flash

GIFs and Interlacing

GIF format allows for individual scan lines to be stored out of order

Allows browser to display image through progressive passes

GIFs and Interlacing

Image that gradually comes into focus

Lines come in at intervals

Popular back when dial-up service was prevalent

Offers no advantage with high-speed as interlaced and regular GIFs display instantly

PNG Files

Portable Network Graphics

Developed in response to the Unisys copyright episode

Intended to replace GIF and has many improvements (supports more colors)

Lossless compression technique called “deflate”

“Deflate” is superior at compressing an image without reducing its quality

Do not directly support animation, though several extensions to the format do

Why Don’t We See More PNG Files?

Slow browser support, notably IE

Versions 3-6 didn’t support the transparency feature

Added in IE 7

All other browsers fully support it: Mozilla, Safari, Opera, etc.

EPS files

Encapsulated PostScript (.eps)

Can be used for bitmap and vector images

Based on PostScript printer language developed by Adobe in 1980s

Uses coordinates for image information

Different from .PS files (do not use/print these!)

May need to save different previews for Mac/PC (TIFF vs. PICT)

TIFF files

Tag Image File Format (.tif)

Most widely supported file format for print

Best for continuous-tone images

Best for printing

Larger file sizes than JPEG files

Image resolution/size is locked upon saving

Enlarging image results in quality loss

BMP and PICT files

BMP is the standard Windows graphics format

PICT is the standard Macintosh graphics format

Don’t use if possible

PDF file

Portable Document Format

Not really a graphic-file format per se

Designed for document exchange

Re-creates original document, including fonts, as an image file

Able to read PDFs across platforms without problems

Need Adobe Acrobat full version to create

Need Adobe Acrobat Reader (free) to read

– More than 500 million people have Acrobat Reader

Other file types

PSD = Photoshop document

– Can only be read by Adobe Photoshop

MPEG = Motion Picture Experts Group (“M-Peg”)

– A compressed file format for video

“Save-as” Options in MS PhotoEditor

So, What do I Use?

For Web or on-screen display (PowerPoint):

– JPEG for photos or complicated images (colors)

– GIF for line art, logos with text, buttons, etc. PNG for non-animated images and when richer color palette needed

– 72-75 dpi to keep the file size down

For commercial printing

– TIFF is usually safest for photos and continuous tone artwork

– EPS also good, but check with printer first

– At least 266 dpi at actual image size