9 Popular Image File Types and When to Use Them
If you are new to graphic design or just plain bewildered by the number of popular image file types that get thrown at you, then you are probably at the right place.
The image file types which pervade the design fraternity are not just about their display characteristics and size. They also carry their own political baggage as vendors over the past 35 years have wrestled over market share, licensing rights and browser compatibility. The standards that exist today for many of the image files types each have their own historical evolution which forms part of our ICT folklore.
That’s probably a story for another time. The purpose of this article is to present a simple overview of the dominate image formats in use today and to explain when these files types are best used.
Raster vs. Vector
Raster Image Files: Raster images are constructed by a series of pixels, or individual blocks, to form an image. JPEG, GIF, TIFF and PNG are all raster image extensions. Every photo you find online or in print is a raster image. Pixels have a defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry or unclear images.
In order to retain pixel quality, you cannot resize raster images without compromising their resolution. As a result, it is important to remember to save raster files at the exact dimensions needed for the application.
Vector Image Files: Vector images are far more flexible. They are constructed using proportional formulas rather than pixels. EPS, AI and PDF are perfect for creating graphics that require frequent resizing. Your logo and brand graphics are more than likely vector. The real beauty of vectors lies in their ability to be sized as small as a postage stamp, or large enough to fit on a semi-trailer.
Popular Image Files Types
- JPEG (or JPG) – Joint Photographic Experts Group
- PNG – Portable Network Graphics
- GIF – Graphics Interchange Format
- TIFF – Tagged Image File
- PSD – Photoshop Document
- PDF – Portable Document Format
- EPS – Encapsulated Postscript
- AI – Adobe Illustrator Document
- WEBP – Web Picture Format
1. JPEG (or JPG) – Joint Photographic Experts Group
JPEG is the king of the image file types for the web and was developed to support digital photography workflows.
You can use JPEGs for projects on the web, in Microsoft Office documents, or for projects that require printing at a high resolution. Paying attention to the resolution and file size with JPEGs is essential to produce a good looking document.
With a usual 24 bit depth, it provides far more colour resolution (not to be confused with range or gamut) than the human eye can discern. It supports lossy compression by exploiting known mechanisms of human vision.
For photos, JPEG easily delivers a reduction of file weight by a factor of 10 with barely noticeable artifacts, compared to lossless compression.
2. PNG – Portable Network Graphics
PNGs are suitable for interactive documents such as web pages but less suitable for print. While PNGs are “lossless,” meaning you can edit them and not lose quality, they are still low resolution.
The reason PNGs are suitable image file types for most web projects is that you can save your image with more colours on a transparent background. This makes for a much sharper, web-quality image.
PNG graphics were designed specifically for use on web pages, and they offer a range of attractive features, including a full range of colour depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. PNG images can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions.
PNG supports full-colour images and can be used for photographic images. However, because it uses lossless compression, the resulting file is much larger than with lossy jpeg compression. Like GIF, PNG works best with line art, text, and logos—images that contain large areas of flat colour with sharp transitions between each colour. Images of this type saved in the PNG format look good and have a similar or even smaller file size than when saved as GIFs.
3. GIF – Graphics Interchange Format
This is common among image file types for web projects where an image needs to load quickly, as opposed to one that needs to retain a higher level of quality.
GIF supports LZW lossless compression and multiple frames that allow us to produce simple animations.
The major limitation of this format is that it is constrained to 256 colours. This was reasonable back when it was created in the late ’80s since the same limitation applied to display monitors. However, with the improvement in display technology, it became apparent that it was not suitable to reproduce any smooth colour gradients, like those found in photographic images. We can easily spot the colour banding that it produces.
However, GIF allows lightweight animation with universal support. This feature has kept the format alive where image quality is not the first concern. This use is typical of small animated images with few or no colours.
4. TIFF – Tagged Image File Format
A TIFF is a large raster file that doesn’t lose quality. This file type is known for using “lossless compression,” meaning the original image data is maintained regardless of how often you copy, re-save, or compress the original file.
Despite TIFF images’ ability to recover their quality after manipulation, you should avoid using this file type on the web. The file size of a TIFF image makes loading very slow. TIFF files are also commonly used when saving photographs for print.
TIFF supports the CMYK colour model and allows a colour depth of up to 16 bits for each colour channel (the total colour depth is 48 bits). Since 1992, the format has been able to be compressed loss-free using LZW compressions, which is also used in GIF format.
Thanks to these features, TIFF has become the standard for images where quality plays a more important role than file size. The recommended us if for transferring high-quality images with high resolution for printing.
5. PSD – Photoshop Document
PSDs are files that are created and saved in Adobe Photoshop. This just happens to be the most popular graphics editing software on the planet! This type of file contains “layers” that make modifying the image much easier to handle. This is also a widely used program that generates the raster file types mentioned above.
The disadvantage of PSDs is that Photoshop works with raster images as opposed to vector images. This aside, Photoshop has some remarkable features for scaling and manipulating raster images that hide many of the messy artifacts found in other programs.
6. PDF – Portable Document Format
PDFs are the native file format of the Adobe® Acrobat® family of products. The goal of this format and these products is to enable users to exchange and view electronic documents easily and reliably, independently of the environment in which they were created.
A PDF file can contain vector content but may just be a bit-map. It can also include lots of other content such as text, links and video. The content and viewing rights of a PDF can also be set and the content encrypted.
If a designer saves your vector logo in PDF format, you can view it without any design editing software (as long as you have downloaded one of the many free Adobe Acrobat viewers). Most of these viewers have the ability to to make further corrections and annotations to the file. This is by far the best universal tool for sharing graphics.
7. EPS – Encapsulated Postscript
EPS (short for Encapsulated PostScript) is a file in vector format that has been designed to produce high-resolution graphics for print. Almost any kind of design software can create an EPS.
The EPS extension is more of a universal file type (much like the PDF) that can be used to open vector-based artwork in any design editor, not just the more common Adobe products.
EPS is considered the best choice of graphics format for high-resolution printing of illustrations.
This safeguards file transfers to designers who need to import a file into applications such as PageMaker, Corel Draw, Quark, Microsoft Word or Photoshop. They will only be able to place an EPS file, not open it.
8. AI – Adobe Illustrator Document
AI is, by far, the image format most preferred by designers and the most reliable type of file format for using images in all types of projects from web to print, etcetera.
Adobe Illustrator is the industry standard for creating artwork from scratch and therefore more than likely the program in which your logo was originally rendered. Illustrator produces vector artwork, the easiest type of file to manipulate. It can also create all of the aforementioned file types. Pretty cool stuff! It is by far the best tool in any designer’s arsenal.
9. WEBP – Web Picture format
Google developed this format with the aim to provide a single web-capable image format capable of overcoming the deficiency in other image file types.
Importantly, it seeks to achieve lighter images than JPEG, without penalties on visual quality. It uses more complex operations — like block prediction — and is a derivative of the VP8 video codec. It supports lossless compression and unlike JPEG, it allows transparency and animations that may combine images coded with both lossless and lossy compression.
In principle, it should serve as a replacement for JPEG, PNG, and GIF. An important drawback has been the lack of universal support. WebP displays images in Chrome, Opera and Firefox Browsers and in Android-native applications.
The downside is that WebP images do not display in Safari Browser on the iPhone and iPad. This includes Firefox for iOS as it uses Safari’s WebKit engine.
The image file types outlined in this article are considered among the most popular in Graphic Design circles. Other disciplines such as video, CADD, animation and music also have their own proprietary file formats. If you are writing a design brief, it is important to specify how you wish to receive the original files for archival purposes and to hear from the designer the formats that he/she will be using when they deliver their finished artwork.
Fortunately, the PDF format has become a near-universal standard and today’s modern web browsers have extended their rendering capabilities across most file formats.
And as always, if you encounter a problem or are still confused, the support team at Gigsourcer is willing to assist. Don’t hesitate to contact us in either chat mode on this website or using our contact form.