The image file formats that are most commonly used on the web are listed below.

Classic Image Formats

These are the classic image formats universally supported in all web browsers

  • GIF – Animating the web since 1987. Bad for photos, great for icons. Universally supported.
  • JPEG – A compressed image format used throughout the web, particular adept at displaying photos. Universally supported.
  • PNG – Adoption picked up after IE6, now universal. Lossless compression with alpha transparency.

Intermediate

More recent additions to the list of browser-supported image formats:

  • SVG – A vector format, ideal for UI elements that must be drawn accurately at different sizes. Supported in Chrome, Edge, Firefox, IE, Opera, Safari.
  • APNG – Where GIF and PNG meet is the Animated PNG. They are supported in Chrome, Edge, Firefox, Opera, Safari.

Older/Deprecated formats

Best avoided, these formats don’t have wide support and have been replaced with better alternatives.

  • BMP – Bitmap File supported by Chrome, Edge, Firefox, IE, Opera, Safari. Best left for use with Microsoft Paint and not used online.
  • ICO – Microsoft Icon format supported by Chrome, Edge, Firefox, IE, Opera, Safari. Usage now should be limited to favicon.ico, and not used in web content.
  • TIFF – Tagged Image File Format supported by Safari, typically on the larger size, usually uncompressed.

Modern Image Formats

Newer image formats enjoy much better performance than classic formats. Support is better than it was, and support is now almost universal amongst the most popular browsers.

  • AVIF – Good alternative for images and animated images. Better compression than PNG or JPEG but you should include fallback formats for better browser support. Supported: Chrome, Opera, Firefox (still images only: animated images not implemented).
  • WebP – Excellent choice for both images and animated images. Better compression than classic formats and broad support in Chrome, Edge, Firefox, Opera, Safari

AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.


Updated 22/9/22

Converting to Modern image formats

As Google and other search engines increasingly attribute page speed with quality, it is important that your website loads as quickly as possible. Depending on how heavily you use images on your website or ecommerce store it might be useful to consider options to switch your website to use modern image formats:


Hello, I'm Keith, a website developer in Belfast, Northern Ireland working with PHP, Magento, Shopify and WordPress.

I've been building websites for over 10 years, from custom website development to bespoke web applications, Shopify and Magento ecommerce and Online Leaning Environments. I've worked on a range of projects and am always looking out for the next interesting project.

Related Notes Posts

Spam Investigation Toolkit

Tools to help identify and engage spammers. I'm often asked what tools are best to use to identify spammers, there are plenty of free tools... October 2022 · Notes · Spam

Lighthouse and Google Fonts

I recently had performance issues on Google Lighthouse due to the fonts used on the website. The Google Fonts I used were classified as a... July 2022 · Notes

Set-up a Rackspace CDN service

Quick guide for setting-up a CDN on Rackspace. ## CDN Set-up Log into your [Rackspace MyCloud](https://mycloud.rackspace.com/) account. Click into Storage > CDN then "Create Service".... May 2022 · Notes

More Notes Posts...