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:
Latest posts
—
Core Web Vitals: Optimisation techniques
Google's Core Web Vitals have become the de facto standard for measuring user experience on the web. For years, developers have focused on the foundational trio: Largest Contentful Paint (LCP),…
Continue reading "Core Web Vitals: Optimisation techniques "
—
Web Safe Fonts: A Quick Explainer for Developers
If you've ever built a website and wondered why your carefully chosen typography looks completely different on someone else's screen, you've encountered the world of web safe fonts. Let's break…
Continue reading "Web Safe Fonts: A Quick Explainer for Developers "
—
Choosing the right content management system
Choosing the right content management system (CMS) is one of the most consequential early decisions when building a website The content management system shapes everything from how editors publish to…
Continue reading "Choosing the right content management system"
—
WYSIWYG or plain-text CMS editing?
Finding the Right Balance for Your CMS UsersWhen configuring a content‑management system (CMS), the choice between a WYSIWYG (What‑You‑See‑Is‑What‑You‑Get) editor and a plain‑text interface has far‑reaching implications for both usability…