A guide to graphic file formats
Given the number of formats available for graphic files, it’s often difficult to determine which is the most appropriate - particularly for the majority of the population that does not use graphic files on a regular basis! While some formats may be more recognizable and widely used, this does not necessarily mean that they are the most effective option. In fact, they may compromise the end product.
In general, formats should be selected based on the product being created. Whether it is for a web or mobile-based image, if the image will be used in print material, or if the image is may be required to be edited further. This article provides all you need to know about the various formats available categorizes them accordingly. At the heart of these different options, are the tradeoffs made between quality and file size, which ultimately lead you to your graphic file decision.
Web or mobile-based graphics
1. JPEG or JPG (Joint Photographic Experts Group)
JPEG (or JPG) format is the most efficient modern option available because the size of the file is significantly reduced. This is achieved through the combination (or compression) of similar colors, the degree of which is determined by the quality value selected when creating the image.
So what quality value should you use? Between 8 and 12 is recommended to maintain a quality image – although the trade off is that it will result in a larger file size than if the image has a quality value below 8. An image with a value less than 5 will generally result in a highly pixelated image given that a smaller number of colors will be recognized.
Similarly, images containing text, simple shapes or large blocks of color will often appear blurry or muddled, and so may require a different format to be used - see PNG below.
There are three different format options available, including:
- Baseline (standard) is the most basic format option available and is recognized by all web browsers.
- Baseline Optimized provides both a higher quality image through optimized color and a slightly increased reduction in size. While this is likely the best option available for JPEG files, some early web browsers will not support this image type.
- Progressive images first appear as a more pixelated image, that become clearer as the file downloads, rather than appearing only on completion of the download. This may be useful for slow connections to show progress in the download of the image. However, it is not generally required given the speed of connections for most Internet users.
2. PNG (Portable Network Graphics)
PNG is a common format used as an alternative to JPEG where a higher quality image is required, or as a substitute for TIFF where a smaller file size is appropriate.
Saving a file as PNG-24 ensures that full transparency is retained, however given that there is limited compression (aggregation of similar colors) the file size for photos and other complex images may be large.
Given that a large number of colors may be retained in an image (as compression does not aggregate similar colors) the file size may be large. For this reason, where full transparency is not required, the file should be saved as PNG-8 to reduce the size as much as possible.
3. GIF (Graphics Interchange Format)
GIF files have become more popular in recent times across social media in the form of still images and animations. The quality of these files is significantly less than the JPEG and PNG formats, owing to the number of colors being limited in each image to 256 unique colors. The main advantage of GIF format is that it is particularly useful for simple graphics, including banners and text headings, charts and diagrams, web buttons and basic animations.
Listed below are two older formats. While not often used today, we have included for completeness.
4. BMP (bitmap image file)
BMP, sometimes referred to as a “legacy format”, was originally used in early computer graphics, however today is likely to only be used to create Windows wallpaper. BMPs are large files and therefore provide a high quality image. They have become less popular in their utilization because of an inefficient use of memory.
Similar to BMP, PICT is not commonly used today. This format was originally used for Quickdraw rendering for Mac computers (now discontinued) and has now been largely replaced by PDF.
Printed format graphics
1. TIFF (Tagged Image File Format)
TIFF is generally suitable for any bitmap (pixel-based) image to be produced in print material given the following:
- Production of large files without quality loss due to common resolution of 300ppi.
- Use of CMYK color, typically required by most modern printers.
- Preservation of layers, alpha transparency and other features when saved from Photoshop. It is important to note that the nature of information stored in TIFF files depends on the version of Photoshop in which the image is created.
TIFF can be used for web or mobile-based graphics as well. However, due to their file size they are used only where a high quality image is required. This means they are popular with many paint, image and desktop publishing applications.
Editable/native file format
1. PSD (Photoshop Document)
Photoshop’s native format is used where further editing may be required, either in Photoshop or another image editor where possible. This format preserves the key factors of the graphic, including transparency, adjustment layers, layer styles, masks, clipping paths, blending modes and vector text and shapes.
What graphic file format do you use frequently? Add to the discussion and share below what you believe are the main advantages/disadvantages of the file formats discussed in the article.