The best image format for websites: WebP, AVIF, JPG, PNG or SVG?
Short answer: For most websites, WebP is the best default: roughly 25–35% smaller than JPG, with transparency like PNG, and supported by every current browser. AVIF can be smaller still but is slower to create. Use SVG for logos and icons, and keep JPG or PNG only where something outside the browser needs them.
Updated
Why the format matters
Images are usually the heaviest thing on a web page, and on most pages the largest image is also the element Google measures for Largest Contentful Paint — one of the Core Web Vitals that feed into search ranking. A smaller image arrives sooner, so the page is visibly ready sooner, on every connection and especially on phones.
Choosing the right format is the cheapest improvement available: the picture looks the same and the file shrinks, with no redesign and no new hosting.
The five formats worth knowing
| Format | Best for | Transparency | Size vs JPG | Browser support |
|---|---|---|---|---|
| WebP | Almost everything | Yes | About 25–35% smaller | All current browsers |
| AVIF | Large photographs | Yes | Often around half | All current browsers |
| JPG | Photos where WebP is not accepted | No | Baseline | Universal |
| PNG | Lossless graphics where WebP is not accepted | Yes | Larger for photos | Universal |
| SVG | Logos, icons, simple illustrations | Yes | Usually tiny | Universal |
WebP: the sensible default
WebP was designed by Google specifically to make web images smaller. It has a lossy mode for photographs, which typically produces files 25–35% lighter than JPG at the same visual quality, and a lossless mode for graphics, which keeps transparency and crisp edges and is usually around a quarter smaller than PNG. It also supports animation, which makes it a far better replacement for GIF.
Support has been effectively universal since Safari 14 in 2020, so for most sites there is no longer any need for a JPG fallback. JPG to WebP and PNG to WebP convert existing images; a quality of around 80–85 is the usual sweet spot for photographs.
AVIF: smaller again, with trade-offs
AVIF is a newer format based on the AV1 video codec. On photographs it often reaches about half the size of an equivalent JPG and is commonly smaller than WebP too, particularly at lower quality settings where WebP starts to blur. Chrome, Edge, Firefox and Safari (from version 16) all support it.
The costs are practical ones. AVIF is much slower to encode, which matters if images are created on the fly, and fewer desktop tools can open or edit it. A reasonable approach is WebP everywhere, and AVIF for large hero photographs where every kilobyte counts — served with a picture element so a WebP or JPG fallback remains.
SVG: for anything drawn rather than photographed
SVG describes shapes rather than pixels, so a logo or icon saved as SVG stays perfectly sharp on every screen at every size, and is usually only a few kilobytes. Use it for logos, icons, simple illustrations and diagrams. It is the wrong choice for photographs, which cannot be described as shapes.
Where something needs a pixel version of an SVG — an email, a social card, a document — SVG to PNG renders it at whatever size you need.
Size and compression matter as much as format
A 4,000-pixel photo displayed in an 800-pixel column is five times wider than it needs to be, and no format can make up for that. Before converting, resize images to roughly the largest size they will be shown at — twice that for sharp display on high-density screens is plenty.
If you cannot change format, compress the images in place: photographs straight from a camera or phone typically come down by 40–80% at a balanced setting, with the format, dimensions and transparency unchanged.
- Resize to the display size (×2 for high-density screens).
- Convert photographs and graphics to WebP.
- Use SVG for logos and icons.
- Remove metadata — camera details and location add bytes and can reveal more than intended.
- Lazy-load images below the fold, but never the main image at the top of the page.