Every image on your site is saved in a format, and the format decides a lot about how big the file is. The same picture saved in two different formats can produce two very different file sizes. Choosing well doesn't change how the page looks, but it can change how much data every visitor downloads. This guide compares the five formats you're most likely to meet, so you can tell your web person (or your content management system) what you want.
If you're looking for how to find heavy images, resize them and lazy-load them, our article on image weight as the quickest win covers that. This one is only about which format to pick.
Two kinds of image
Raster images (JPEG, PNG, WebP, AVIF) store a grid of coloured pixels. They suit photographs and anything with subtle shading.
Vector images (SVG) store drawing instructions: lines, shapes and colours. As web.dev puts it, when a vector image is scaled the shapes it describes are redrawn to scale, so it stays sharp at any size.
Raster formats also differ in how they compress. Lossy compression discards some detail to make a much smaller file; lossless compression reproduces the original exactly. MDN's advice is that photographs can usually tolerate lossy compression, while screenshots, diagrams, logos and line art should be lossless, because blurring around text and sharp edges is easy to see.
The five formats at a glance
- JPEG is lossy and has no transparency. web.dev notes that for decades it has almost invariably been the right choice for photographs. MDN warns that lossy compression on diagrams or charts can produce unsatisfactory results. Today it is best thought of as the dependable fallback for photos.
- PNG is lossless and supports full transparency. That makes it precise but large: web.dev says its transfer size means PNG is almost never the right choice for photographic content.
- WebP can be lossy or lossless, and supports transparency and animation. MDN calls it an excellent choice for both still and animated images.
- AVIF is also lossy or lossless, with transparency and animation. MDN describes it as a good choice for still and animated images and a royalty-free format. One trade-off MDN mentions: AVIF doesn't support progressive rendering, so a file has to download fully before it is shown.
- SVG is the vector option. MDN calls it ideal for icons, interface elements and diagrams that must be drawn accurately at different sizes, and not generally useful for photographs. web.dev adds a caution: a very detailed SVG means a long set of instructions, and so a larger file.
For raster images, MDN's current guidance is to prefer WebP or AVIF, which generally compress better than PNG, JPEG and GIF.
Browser support in October 2026
According to MDN's image format guide (checked 12 October 2026):
- JPEG, PNG and SVG are supported in all versions of Chrome, Edge, Firefox, Opera and Safari.
- WebP has broad support in the latest versions of major browsers, though MDN notes it lacks deep historical support and suggests a JPEG or PNG fallback.
- AVIF is supported from Chrome 85, Edge 121, Opera 71, Firefox 93 and Safari 16.1. MDN still recommends a fallback in WebP, JPEG or PNG, because support has little historical depth.
MDN also now lists JPEG XL, again with a recommendation to provide an alternative format. It's worth knowing the name, but for most small business sites the five formats above are the practical choice.
The standard way to offer a modern format with a fallback is the <picture> element: the browser skips any version in a format it doesn't support and, if none is usable, shows the plain JPEG or PNG in the <img> tag. Ask your web person whether your content management system or image service can generate the versions and markup for you.
A simple way to choose
- Is it a logo, icon or simple diagram? Ask for SVG. If you only have it as a large PNG, ask your designer whether a vector original exists.
- Is it a photograph? Use AVIF or WebP, with JPEG as the fallback. Compare quality settings by eye at the size the image is shown.
- Is it a screenshot or graphic with text that needs transparency? Lossless WebP, with PNG as the fallback.
- Is it an animation? WebP and AVIF both support animation; MDN describes AVIF's as similar to animated GIFs but with much better compression.
Changing format is only one lever: an oversized photo in a modern format can still be heavy. Format, size and loading behaviour work together, so pair this with the steps in our image weight guide.
Whatever you change, measure it. Check your page before and after: under the Sustainable Web Design Model v4, which GreenTracer uses, each megabyte removed from a page lowers the estimate by about 0.148 g CO₂e per page view (about 0.121 g on a host listed as green). The rating page shows how that maps to grades.
