The world is visual. And different image file formats are spread all over the internet, on our screen devices, and on the products we buy.
Each image file format will serve you in a particular way, so you should choose them according to your strategy. If you choose the wrong format for your purpose, it can slow down your website, cause unwanted errors, or provide a bad user experience.
So how can we build digital products while making the most of this element to fit our goals? This article explains the different image file formats and when to use them. Enjoy your reading!
Types of Image
Before we go into the details of each image file format let's go through the two main categories of images:
- Raster images
- Vectorial images
Raster Images
This group is the most common type of image we find on the web, such as:
- JPEG;
- GIFS;
- PNG.
Raster or Bitmap images are composed of pixels in a grid, where every pixel holds a defined color.
The downside of a raster image? They offer a fixed, static resolution, so there's a loss in image quality if you try to resize it. The original design and pixels will only stretch to fill the extra space, resulting in a blurry, pixelated, or distorted image.
A metric called DPI (Dots Per Inch) measures the number of pixels per inch to calculate the quality and resolution of a Raster image. The higher the DPI, the sharper the image, and vice versa.
Vectorial images
Vector images also carry color information, but they are not static images where each design shape is tied to a pixel. Instead, they contain additional information, such as lines and curves.
Since mathematical formulas determine this additional information, when we resize a vector image, all its elements increase or decrease proportionately without affecting the image quality.
By having this flexibility resizing, vector images are widely used in design projects, like creating a visual identity, for example.
Reading tip: How To Create A Style Guide
File compression
Image files can be compressed to reduce their size, and their file can be restored to their larger original form, either entirely or with some data loss.
- Lossy: quality of the image will also reduce.
- Lossless: no loss in image quality.
For example, JPEGs are lossy because if you reduce their file size, the quality of the images will also suffer.
On the other hand, PNG files are raster graphics that support lossless compression, maintaining detail and contrast between colors.
Image file formats
There are several image file formats, each with its particularity and indication of use.
Our list covers the main formats, and that's not to say that these are the only ones, but the most common.
JPEG/JPG
JPEG, or JPG, is one of the most people's most popular image formats.
Anyone who has saved or posted an image on the internet must have come across this acronym, which stands for Joint Photographic Experts Group.
JPEG has become so popular because of its flexibility; you can easily reduce its file size, making it suitable for sharing images. That's why most social media platforms automatically turn your uploaded image files into JPEGs.
Apart from providing you with the smallest image file, Jpg is a full 24-bit color image with universal browser support.
Of course, this high compression versatility pays the price in quality. If, on the one hand, JPEG allows a very light digital image, on the other hand, they suffer in quality and sharpness.
That's because JPEGs fall into the lossy compression category, meaning that the quality of the image decreases as the file size decreases. For example, if converted to JPEG, an image in Full HD can have only 100kb of final size.
Because their low quality becomes more apparent in graphic images, such as logos or illustrations, the use of JPEG is more suitable for photos and images on the internet.
Remember: lossy image compression usually leads to poor text readability.
JPEGs are great image file formats for:
- The photos are for personal use, for social media, albums, and small prints, and are not intended for large prints;
- You don't intend to enhance or edit the photos much in post-production;
- For sharing images via email.
Reading tip: Visual Hierarchy: How To Prioritize and Highlight Information
GIF
GIF stands for Graphics Interchange Format and, just like JPEG, is also a raster format. It does use lossless compression but constrains the image to 8 bits per pixel and a limited palette of 256 colors, so the quality is not its perk.
Needless to say, they are not the best choice for photos or images with too many details and colors.
The GIF format is famous for animated images on the web, as the bit limitation keeps file sizes small and is supported by all major browsers.
GIFs are great image file formats for:
- Images with a transparent background;
- Small file sizes and quick uploads;
- Demonstrate how-to actions in tutorials or guides;
- Small animations of up to 15 frames per second;
- Images with a limited color palette and quality loss are not relevant.
PNG
Many people might consider PNGs as a 2.0 version of GIF. This happens because the patent for the responsible algorithm for gifs compression was created in 1995 and then Adobe invested in a new improved format to substitute and improve the old GIF.
That's how Portable Network Graphics was born. And the improvements made sure they became popular, as they:
- Have a greater color variation;
- It's also possible to have a transparent background;
- Their algorithm for compression is more efficient ensuring better quality.
The downside is that PNGs don't support animations. But, on the brighter side, they allow you to add text to your images (the better quality enables legibility).
Concerning their compression capacity, PNGs are very similar to jpegs. The difference is that its quality is not so affected, and therefore, the files won't be so light as jpeg files.
Because of this versatility between quality and compression, PNG files are widely used in digital marketing strategies and graphic files, like logos and illustrations.
A good example used in many performance strategies is mixing jpeg and PNGs to websites to ensure light and quick navigation.
Be Aware: no matter their size, they are not good for printing.
PNGs Are great image file formats for:
- Showcase high-quality pictures in portfolios;
- Screenshots, banners, infographics, pictures.
Reading tip: Accessibility For Digital Products
Another image file format created by Adobe, PDF (Portable Document Format) is highly versatile, as you can use it to store illustrations, texts, and vector images.
For example, if a vector logo is saved in PDF format, you can open it without any image editing software, and you can use this file to make further changes.
It's also the best universal tool for infographics as it is indexable and has searchable text.
You can enlarge a PDF image as much as you want as it is a vector with lossless compression. And because it offers the option to adjust who can edit or not a file, PDF is highly recommended for contracts, brand guidelines, and final versions of illustrations.
PDFs Are great image file formats for:
- Printing;
- In-depth infographics or reports;
- Including links, CTA buttons, and other interactive elements;
- Lossless scalability.
SVG
SVG (Scalable Vector Graphics) is a scalable vector file format that can be recognized by most browsers and is widely used in websites and blogs. In addition, it's possible to animate SVG images through HTML 5.0 programming.
Be Aware: Not suitable for displaying detailed images with high color depth, such as photographs.
SVGs Are great image file formats for:
- Icons, logos, graphs, and simple illustrations;
- Importing 2D images to 3D modeling software;
- SVG images can be inserted directly into the page as CSS code.
BMP
Bitmap appeared at the same time as the Windows operating system and has the capacity of over 16 million color variations (24 bits).
The main problem is its low compression capacity; the image files are too heavy, so they are not a good match for the web.
The advantage is that BMPs maintain the details of the original file and are free of patents.
BMPs are great image file formats for:
- It's supported by all major browsers and image viewers, including their oldest versions. Now it's a generally outdated format.
PSD
PSD is a native file type that stands for Photoshop Document. It supports several advanced editing tools while maintaining its original structure. For example, you can add, remove or edit layers without affecting the source document.
Keep in mind that if you merge all the layers into a PSD file, you can't undo that later. So save your file as a PSD before flattening if you might have to work on the layers again.
Designers are more familiar with this kind of file, as it corresponds only to documents created by Adobe Photoshop. Usually, PSDs are later converted to more accessible and compatible formats, such as JPEG and PNG.
PSDs Are great image file formats for:
- Editable graphic design projects.
TIFF
TIFF is short for Tagged Image File Format and is considered the best format for high-quality images. It is a raster image highly utilized in software editing, photography, and offline printing.
They are usually uncompressed as most graphics applications that support TIFF (such as Photoshop or Illustrator) do not use compression. Because of that, TIFF images take up a lot of space as they are much bigger files.
TIFFs Are great image file formats for:
- Printing and scanning documents.
RAW
Digital cameras use RAW, and as the name suggests, it keeps all image data intact, so it has no compression. For this reason, RAW images can be edited by professionals in specific software.
Raw file formats are the highest quality but have file sizes of up to hundreds of megabytes. Because of this, RAW files are not used as final versions for digital strategies.
RAWs are great image file formats for:
- High-quality photographs.
WEBP
WEBP is a file format created by Google to optimize file compression without losing too much quality or resolution.
The idea was to gather the advantages of other formats; the JPEG versatility of compression, the quality and transparent background possibility of PNG, and the animation ease of GIFs. In this sense, WEBP allows compressing images 30% more than JPEG without quality loss.
WEBP was created in 2010, and some people believe this is the future of digital images. However, it still hasn't surpassed the popularity of JPEG.
AVIF
The AVIF image file format is fairly recent and promises to be as versatile as JPEGs concerning compression while retaining more quality and resolution.
The idea is that an AVIF can go 50% smaller than a JPEG without losing image quality.
As it is a recent file format, AVIF is still not very common in search engines or on the web.
Reading tip: UX Design: Science or Art?
How to choose between image file formats?
Choosing the best image file format is directly related to your objective. So, if you're in doubt, ask yourself:
- Where will this image be used? Which platforms?
- What's more important: performance and size, or quality?
- Does it need to open in multiple programs?
- Does the image need to be edited?
- Will it be printed, or is it only for digital purposes?
These questions are essential and will direct you to the best file format for your project.
Generally speaking, the best formats for printing are TIFF and PDF. On the other hand, you can use JPEG, GIF, or even PNG for social media.
Always keep in mind the balance between performance, size, and quality. Each platform and usage requires a different format type that meets these specifications.
