The Best Image Formats to Use in 2021

Image formats should be clear cut -you’ve created an image, logo, animation, poster… so you save it, and now you can just use it for anything, right? If, if only that was the case, a one size fits all image format system, would make life much easier. Instead, we are overwhelmed by a series of semi-understood (at best) acronyms. Let’s be honest: you often just choose the one you’ve heard of, or used before and presumed it worked. Then you get the messages -this device doesn’t support this format, please send in PNG, that’s just the start…

What a pain! but, the fact is there is a reason for different image formats. Some image formats work better with certain types of images, there are pros and cons, advantages and disadvantages, limitations, and usage issues. You need to know what these are and get an idea of the basics. Why because this will help you future-proof your image. You need to think of how your image will be used now and in the future, scales, and resolutions are all going to matter.

So, let’s go through some of the basics ideas and terms and look at the most popular image formats in use today and address some of their pros and cons. You might not be an expert after this, but it should at least help you avoid a headache after your discussions with your designers or clients.

In this article:

1. The basics of image files

Every single graphic you see online is an image file in a certain format. Pretty much everything you see printed on paper, plastic, or clothing came originally from an image file. Each format has a specific use or sometimes multiple uses. Choosing the correct format is vital in order to get the perfect image exactly how you wanted it, choosing the wrong format can lead to a serious quality reduction,  or even completely missing images.

Fundamentally we have two kinds of image file formats, these are Vector image format files and Raster image format files.

1.1. Vector and raster image formats

In very general terms Raster files are made up of individual pixels and every single pixel contains color data. The whole image is an incredibly complex combination of single colored dots. For this reason, the files are larger in size. Photographs are in raster image format. The quality depends on the number of pixels per inch (PPI) and image dimensions. Raster images can not be scaled up without losing definition and quality.

Vector files are much smaller because they don’t contain single-pixel data instead they rely on a series of paths or connections (all done with complicated math that you don’t have to worry about). Because of this system Vector image format files can be scaled with no loss of quality, allowing for quick response zoom on websites for example. However, they don’t have the same color definition regarding graduation and blending.

The key to your choice is what you wish to create and how you wish to use the image. a one-off photo image would be perfect in the highly detailed raster image format, whilst a multiuse logo would be ideal in Vector image format. To learn more about the differences between vector and raster, check out Vector vs Raster: What’s the difference?

1.2. File Size of image Formats

The file size is another important discussion point. The file size is the amount of space your file takes up on your storage, such as a computer hard drive. Image files, especially Raster files contain a vast amount of information so it is important to lesson this by using a compression tool such as TinyPNG. Compression tools can reduce the file size by up to 80%, saving you space, saving you time on data transmission, and allowing you to send the file online. It is also important for browser speed.

It’s worth noting at this stage that there are two types of compression “lossy” and “lossless”. Both have advantages and disadvantages:

Lossless Compression: no information is actually removed. This is often very important when needing to maintain quality.
Lossy Compression: deleting unnecessary information, and reducing the complexity of existing information.

Lossy compression can therefore reduce the file size much more than lossless, but will reduce the quality.

1.3. Browser support for Image Formats

Whilst some image formats are extremely useful they may not be supported by every browser. If you want to upload some image format to your website, make sure that it is supported by at least the most popular web browsers.

2. New image formats to use in 2021

The internet is a dynamic industry and new image formats are coming out all the time.  Here are a few of the most important ones that you’ll be hearing about and seeing soon, if not already.

2.1. WebP

Google’s WebP is a modern image format that is all about providing better lossless and lossy compression for images on the web. Smaller images make the web faster, and WebP is working on creating these smaller images but keeping the richness. WebP also supports the growing trend of animated images and won’t stop there. It’s still in development but it’s going to be big.

Check out the Google Developers website to learn more about WebP.

2.2. HEIF

HEIF stands for High-Efficiency Image File Format and the main focus is on streamlining storage of images. Again it is trying to keep the high quality but in smaller compressed files. HEIF has 10 levels of compression to choose from and has super-fast encoding and decoding, and being lightweight it doesn’t overload the processing system.

You can learn more details about HEIF on Wikipedia.

2.3. AVIF

Considered to be the up-and-coming image file format of the future is AVIF, which stands for “AV1 Image File Format”. This is essentially the specification for storing still and animated images compressed with AV1 in the HEIF file format. AV1 is the royalty-free video coding format that has most tech experts believing it is the next step in media compression.

You can take a look at some great examples of AVIF plus a comparison with WebP, JPG, PNG at Jakearchibald.

3. Raster image file formats

As we mentioned above Raster images are constructed by a series of pixels, or individual points, to form an image. JPEG, GIF, and PNG are all raster image extensions. Typically Raster image formats are used for photographs and digital artwork but also for web graphics and social media content. Raster files need to be saved at the exact dimensions of their usage as an attempt to scale will affect the quality. Here are the main Raster Image file formats:

3.1. PNG

Portable Network Graphics are fantastic for interactive web documents and projects but are not suitable for print projects. The reason why PNG is popular for web sites is that your image can be on a transparent background (built-in), meaning your image doesn’t have to sit on a block of color, you can see everything behind it. It also supports more colors (up to 16 million) and produces a sharp image. It is a “lossless” format (see above) so you can keep the quality even with compression. The idea of PNG is to improve on GIF and it is rapidly becoming a standard web image format.

Perfect for: Web images

3.2. JPEG

You’ve heard of JPEG, it’s probably the most frequent type of image format file you find on the web these days. JPEG is Joint Photographic Experts Group after the team that developed it. Commonly used for web projects, especially large images such as banners, Microsoft Office documents, email graphics and high-resolution printing projects it is also a popular format for digital camera images. JPEG has “lossy” compression so the quality will decrease alongside the file size, but you may not even notice it. There is a choice of compression so you do have some control over the size/quality ratio. As JPEG can be easily compressed they are ideal for emailing, especially if you want to send clients previews of work in progress.

Perfect for: Web Images, Non-Professional Printing, E-Mail, Powerpoint

3.3. GIF

Raster Image format GIF is frequently seen in the form of animations on things like Facebook messenger and Tumblr, other social media memes but also on websites in banner ads and email images. GIF stands for Graphic Interchange Format, and they are in”lossless” format, although you can significantly reduce the size with the customizable settings of image information and the number of colors. Gifs are usually pretty small anyway, with quick upload taking precedent over high image quality. GIFs do have a limited color capacity of 256 but this keeps the file size lower than other Raster image formats. However whilst 256 may photos often have thousands of colors, so they can look disappointing dint he GIF format.  seem like quite a lot  In addition, they have the ability to be transparent. For animation GIF images keep all the frames and timing in one file, which helps.

Perfect for: Animations, small icons

3.4. RAW

Out of the image formats discussed so far, the chances are that RAW is the one you’ve never heard of. Raw is the first or the rawest image from your digital camera or even your scanner.  Once you’ve uploaded your photo and edited it, then it is saved using the image extensions such as JPEG. Because they capture every visual element of the original photo they are valuable as you can always return to them but they will need changing before you can transfer and resize the image. Basically, they are the negative of the photographic image. There are many RAW formats, some especially for certain brands of camera, such as NEF for Nikon or CRW for Canon, in fact, each manufacturer has their own format.

Perfect for: Photography

3.5. TIFF

The Tagged Image File Format or TIFF is a large raster file that has “lossless compression”, so there is no loss of the original. You can save, copy, resave, or even compress the original form. and has the advantage of being able to recover the original even after playing with it. However with this high quality comes a large file size, not ideal for the web as the loading times will put people off.

Despite TIFF images’ ability to recover their quality after manipulation, you should avoid using this file type on the web — it can take forever to load. TIFF files are generally used when saving photographs for print, in desktop publishing, or archive copies.

Perfect for: Saving Photos, desktop publishing, and archiving

3.6. BMP

BMP (Bitmap Image File) is the standard proprietary format for Microsoft Windows. It is a Raster image format of very high quality (no compressions0) but subsequently large file sizes. It’s good for photographic images and other very detailed images.

Perfect for: High-quality detailed images such as archives, photos, etc

3.7. PSD

Another proprietary format is PSD files that are created and saved in Adobe Photoshop. PSD actually stands for Photoshop Document. PSDs use layered image formats that allow editing and adjustments but can also include vector layers. After Photoshopping PSDs can then be exported to other file image formats before sending, transferring, or printing. PSDs are great for animations and video editing too.

Perfect for: Editing before converting

4. Vector image file formats

So we’ve covered a range of Raster image formats, which are generally used for the finer detailed requirements. Vector image formats whilst not as detailed are much more flexible. A master file that can be used for multiple purposes and scaled to fit whatever your requirements are. Used for digital illustrations, fonts, branding, logos, icons, etc Vector image formats work well because they lose none of the detail and remain identical whatever the size.

4.1. SVG

Scalable Vector Graphics are right at the top of the popularity stakes for web browsers. Developers often use SVG  creation of logos, icons, and illustrations as it is ideal for two-dimensional graphics and can be edited in graphic and text editing programs.  It also has significantly smaller file sizes than some of the other options making it a fast uploading choice.

Perfect for: All web graphics

You may be interested in The Best Places Where You Can Find Web Design Inspiration

4.2. PDF

Adobe’s PDFs are pretty common, you’ll have seen them when downloading images, no doubt. PDFs (Portable Document Format) allow you to view the format, with no specific software from any device, although you must have the free Adobe PDF reader. It’s, therefore, a great tool for graphic sharing as it works on all devices, browsers, applications, and operating systems. Adobe Illustrator and Photoshop can export directly to PDF ready for printing. there are editing options but these are additions.

Perfect for: Viewing and/or printing multipage documents with various elements

4.3. EPS

EPS or Encapsulated PostScript is primarily a vector image format, although it can include raster image data. EPS files can be opened and created on almost all design software including CoralDraw and Adobe Illustrator and are perfect for creating very high-resolution graphics for print purposes.

Perfect for: Illustration and artwork

4.4. AI

Ai is the file format used by Adobe Illustrator and is very popular with designers as it is a reliable image format for all kinds of projects, be they web or print. Mainly vector-based but can include embedded and linked raster images and exported to other formats for reviewing, printing, editing, and web use. AI isn’t supported on all browsers so it’s with considering converting them.

Perfect for: Adobe Illustrator projects

4.5. CDR

A CDR file is a CorelDRAW extension for use with all Corel applications like Corel Paintshop Pro and CorelDRAW Graphics Suite It is a vector graphics file that stores an encoded digital image, that is compressed and can be opened and worked on in a vector editing software program. It is widely used in the design industry for artistic work and various graphics data such as brochures, tabloids, and postcards.

Perfect for: CorelDRAW projects

Final Words

The main choice of file image format is down to your use of the image. From this basis, you can select Raster or Vector, and from there narrow down your options. There is no need to get overly confused by the Acronyms, make a choice, and stick to it for similarly used images. Key considerations are size and storage which are important for detail, quality, and speed. This brief article covers the main points and is hopefully a good base from which you can jump into the world of file formats or at least understand some of the issues and need for different image formats.

You may also be interested in some of these related articles:

• The Best UI/UX Design Software: Complete Comparison Guide
• Top 80+ Sources To Find Design Resources and Assets
• Top 20 Free Fonts for 2020: Trendy & Evergreen