The Best Image Formats for Websites
WebP, AVIF, JPG, PNG, SVG — and why HEIC doesn't belong on the web. A practical guide to choosing image formats for fast, good-looking websites.
Images are often the largest part of a web page. Choosing the right format — and the right size — is one of the simplest ways to make a site faster, which helps visitors and search rankings alike.
The short version
| Content | Recommended format |
|---|---|
| Photos | WebP (or AVIF), with JPG as a fallback if needed |
| Logos, icons, illustrations | SVG |
| Screenshots and graphics with transparency | WebP or PNG |
| Animations | Video (MP4/WebM) rather than GIF |
WebP: the practical default
WebP is supported by every current major browser, handles both photos and transparency, and typically produces smaller files than JPG at similar visual quality. Most CMS platforms accept it. For iPhone photos, HEIC to WebP converts and resizes in one step.
AVIF: smaller still, slower to encode
AVIF (AV1 inside the HEIF container) can compress photos even further than WebP and supports HDR. Browser support is now broad, but encoding is slow and some tools and platforms still don't accept it. Use it if your image pipeline supports it — ideally with WebP or JPG fallbacks via the <picture> element.
JPG: universal and still fine
JPG works everywhere, including email clients. It's larger than WebP for the same quality, but a well-compressed JPG at the right size is perfectly acceptable.
PNG: for graphics, not photos
PNG is lossless, so it's great for screenshots, UI elements and images with sharp edges or transparency — but photos saved as PNG are far larger than necessary.
SVG: for anything drawn
Logos, icons and diagrams should be SVG: they're tiny, sharp at any size and can be styled with CSS.
Why not HEIC?
HEIC is excellent for storing photos on devices, but only Safari displays it in web pages. Chrome, Edge and Firefox don't, so HEIC images on a website would be invisible to most visitors. Always convert iPhone photos before publishing them.
Size matters more than format
Uploading a 5712-pixel-wide photo and letting the browser shrink it wastes bandwidth. Prepare images at the size they're displayed:
- Full-width hero images: around 1920–2560 px wide.
- Content images: around 1200–1600 px.
- Thumbnails: 400–800 px.
Serve several sizes with srcset so phones download smaller files, set width and height attributes to prevent layout shift, and lazy-load images below the fold.
Workflow for iPhone photos
- Open the HEIC compressor or HEIC to WebP.
- Choose WebP, Max 1920 px, Balanced quality.
- Choose Remove all metadata so GPS location isn't published.
- Upload the result to your site.
For a detailed comparison of all common formats, read JPG vs PNG vs WebP vs HEIC.