Everything You Always Wanted to Know About Image Formats – But Were Afraid to Ask

Creating a snappy email signature, assembling a slide deck for a big sales presentation, or throwing together a flyer at the last minute for a conference or trade show? With the proliferation of desktop publishing apps and cheap image editing software, we're all graphic designers now. Now that we have all of these great tools at our disposal, it's on us to learn the basics. Here's a primer on image file formats, what category they fall in, and where they work best.

KNOW YOUR BITMAP FILE FORMATS

JPEG, JPG - Joint Photographic Experts Group

• Is it web supported? Yes - jpgs work with all major browsers
• Ideal for: Websites, office printing, and use with Microsoft Office applications (.ppt, .doc, .xls)
• Color profile: RGB
• Color range: Excellent
• Drawbacks: Generation loss - the more you manipulate a JPEG, the worse it looks

TIFF - Tagged Image File Format

• Web supported? No - it does not work in web pages
• Ideal for: Professional prints (with CMYK-equipped printer)
• Color profile: CMYK (cyan, magenta, yellow and black, aka K)
• Color range: Excellent
• Drawbacks: Not web supported

PNG - Portable Network Graphics

• Web supported? Yes; works with most major browsers
• Ideal for: Websites, resizing with minimal quality loss
• Color profile: RGB, RGBA
• Color range: Good
• Drawbacks: Does not resize well; limited color range for photographs

UNDERSTANDING SIZING AND RESOLUTION

Resolution

• In the digital realm, an image's resolution (pixels per inch) depends on the screen resolution on which it is displayed. Digital screens have their own specific pixel density that cannot change. (Modern computer screens typically display between 72 and 130 pixels per inch.) An image's unique pixel density becomes apparent only in its printed (physical) form.
• Image files for high quality prints (business cards, letterhead, etc.) should be 300 PPI or higher.

Sizing (dimensions)

• Image dimensions on a screen are measured in pixels (px) -- as in, "This is photo of my cat is 100 pixels wide." The image's apparent size to the viewer depends on the context. A 100px image displayed on an iPhone will be quite small, perhaps under an inch wide. On a large-screen monitor, however, the image might measure, say, 2-3 inches wide.
• Resizing without resampling - To increase/decrease an image's dimensions by changing the size of pixels but not their number (print only). Note: On a screen, where pixels have a fixed size, resizing an image without resampling it will not change its appearance, but the change will be reflected when you print it.
• Resizing with resampling - To increase/decrease an image's dimensions while changing the number of pixels but not their size. (This is how you resize an image on a screen.)

Sizing (bytes)

• Smaller file sizes will load faster on the web
• Larger files sizes will show a higher resolution for print projects
• Resizing photos for the web
• Change the resolution to 72 PPI (this reduces the file's size in terms of bytes, which means it will load faster on a web page)
• Modify the dimensions by changing the pixel values for the height and width

Why does resizing reduce image quality?

In most image file formats, when you shrink an image, the image editor must strip away pixels, resulting in a loss of information. Conversely, when you enlarge an image, the image editor must add pixels, using the image's color attributes as guide (not always perfect). In contrast, vector images, which are not composed of pixels, do not lose quality when resized. To manipulate vector image files, you typically need a specialized application like Adobe Illustrator.