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 lpi –Newspapers usually run lpi –Standard offset printing is 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