The difference in image types is the result of the need for compression. By default, most images have a fairly large file size, which is not conducive to web use. The most commonly compressed image file types are .jpg, .gif and .png. This quick tip article will supply you with a basic rundown of the various image types while avoiding the massive amount of details regarding the technical processes of compression.
For most readers, you are here for a quick answer as to what format you should save your image as, here is a quick rundown before we go into a little more depth:
- If the images are for the Web or online, use JPEG, PNG, or GIF.
- If the images are for print, use TIFF.
- If you want to keep a version that remains editable, choose your software's native file format. (PSD for Photoshop, PSP for Paint Shop Pro, CPT for Corel Photo-Paint, etc.)
Anything beyond those types of formats becomes a matter of personal preference, or how much image loss is acceptable in the medium in which the image will be published. Lets go into each type of common file types into a little more detail:
JPEG
JPEG is best for photos when you need to keep the file size to a minimum and do not mind giving up some quality for a pretty substantial reduction in file size. As a general rule, JPEG is NOT suitable for images containing text, large chunks of color, or simple shapes. This is because crisp lines will blur and colors can and most likely shift. Only JPEG offers the various file type options of Baseline, Baseline Optimized, or Progressive.
- Baseline (Standard) - This JPEG format is recognized by all Web browsers.This type of JPEG file opens line by line starting from top left to bottom right like how we write. When you save a file via the —Save As— method by default the image will get saved inBaseline JPEG format. As the image starts loading with the available data in sequence, the user will be able to see the image partially. Once all data is received the image will be displayed in its entirety.
- Baseline Optimized - This JPEG format option delivers optimized color and slightly better compression. It is supported by all modern browsers, but was not supported in the very earliest of Web browsers. It's your best choice for JPEG files today whether it be for web use or general use.
- Progressive - With the majority of internet users on high speed connections today, Progressive JPEG is rarely used.In Progressive JPEG format full image loads with available data at first instance but will look blurred. It scans for the data in certain cycles mentioned while saving. So after each cycle the image will look better. Once the complete data is received the image will appear clear. In my experience, however, this file type is not friendly in most browsers. Web support is currently at about 65% (Chrome + Firefox + IE9) so this method isnt very safe to use on the web yet.
Tiff
TIFF is good for any type of bitmap (pixel-based) images. TIFF produces large files, however there is no loss in quality. TIFF also preserves layers, alpha transparency, and other special features when saved from Photoshop. The type of extra information stored with TIFF files varies in different Photoshop versions, so consult Photoshop's help for more information.
PSD, PDD
PSD and PDD are Photoshop's native format. Use PSD when you need to preserve layers, transparency, adjustment layers, masks, clipping paths, layer styles, blending modes, vector text and shapes, etc. The PDD extension was used in Adobe PhotoDeluxe (now discontinued), but it is identical to PSD format and the two can be used interchangeably.
BMP
Use BMP for any type of bitmap (pixel-based) images. BMPs are huge files, but there is no loss in quality. BMP has ZERO real benefits over TIFF, except you can use it for Windows wallpaper, so still zero benefits.
PICT
PICT is an old, Mac-only bitmap format, similar to BMP for Windows. PICT is not often used today.
PNG
Use PNG when you need smaller file sizes with no loss in quality. PNG files are usually smaller than TIFFs, in my personal experience. PNG also supports alpha transparency (soft edges) and was developed to be a Web graphics replacement for GIF. This file type is becoming increasingly more popular as the —gradient and opacity fascination— amongst web users continued to spread.
GIF
Use GIF for simple Web graphics having limited colors. GIF files are always reduced to 256 unique colors or less and they make very small, fast-loading graphics for the Web. GIF is great for Web buttons, charts or diagrams, cartoon-like drawing, banners, and text headings. GIF is also used for small, compactWeb animations. GIF should rarely be used for photos.
Summary
On average, images make up over 50 percent of the average web page, so it is important to minimize their impact on page speed. Choosing the appropriate web-based format for your images is the first step towards optimized web graphics. GIFs, JPEGs, and PNGs are the formats used to display images on the Web. Each has its own strength and weaknesses.
In general, palette-based or index-color formats like GIF or PNG are best for flat-color art like buttons, logos, or cartoons. For smooth-toned images like photographs JPEGs are usually the best choice. However, there are exceptions.
So there you have it, a very basic rundown of the various image types available to the modern computer era. Sometime in the near future, I, or someone on the GRAYBOX team will go into much greater detail in the compression processes for each file type and it's support for use on the web. For now, hopefully this brief article highlights the importance of considering the medium in which your image will ultimately end up to ensure you are getting the results you are after.