Image formats for the web
What each format offers, which browsers support it and which one to choose for each type of image.
| Format | Compression | Transparency | Animation | HDR / wide gamut | Browser support | Best for |
|---|---|---|---|---|---|---|
| AVIF | Yes | Yes | Yes | Yes≈95% · Chrome, Edge, Firefox, Safari 16.4+ | Photos and hero images at the smallest size | |
| WebP | Yes | Yes | No | Yes≈97% · all modern browsers | Universal default and AVIF fallback | |
| JPEG XL | Yes | Yes | Yes | PartialSafari 17+; Chrome and Firefox in progress | Archiving and lossless JPEG recompression | |
| JPEG | No | No | No | Yes100% · any software | Universal fallback, email and social media | |
| PNG | Yes | Partial | No | Yes100% · any software | Screenshots, graphics with text and editing |
AVIF
AVIF (AV1 Image File Format) uses the AV1 video codec to compress still images. It has the best quality-to-size ratio you can serve to virtually every browser today: Chrome since version 85, Firefox since 93 and Safari since 16.4.
Strengths: excellent compression on photos, transparency, HDR and 10- and 12-bit color depth. It shines at low and medium qualities, where JPEG shows blocks and WebP smears detail.
Weaknesses: encoding is slow (hence the effort control) and at very high qualities its advantage over WebP shrinks. Some older editing tools still can't open it.
Use it for: hero images, product photos, blog articles and any large image.
WebP
WebP has been around for more than a decade and is now universal. It offers lossy and lossless compression, transparency and animation.
Strengths: fast encoding and decoding, near-universal support and a very efficient lossless mode for graphics, icons and screenshots.
Weaknesses: lossy mode always uses 4:2:0 chroma subsampling, and its efficiency on photos is behind AVIF.
Use it for: the default format when you want a single file, AVIF fallback inside <picture> and graphics with transparency.
JPEG XL
JPEG XL is the successor designed by the JPEG committee. It stands out for losslessly recompressing an existing JPEG with around 20% savings while being able to restore the original file bit for bit, plus HDR, progressive decoding and huge dimensions.
Strengths: excellent quality at high bitrates, efficient lossless mode, ideal for archiving and photography workflows.
Weaknesses: browser support is limited. Safari displays it since version 17; support in Chrome and Firefox is in progress. On the web, it must always be served with a fallback format.
Use it for: photo archives, internal workflows and as an optional first source in <picture> for Safari users.
JPEG
The most compatible format in the world. With a good encoder such as MozJPEG —the one ImageZap uses— files are 5–15% smaller than with standard encoders, while staying fully compatible.
Use it for: universal fallback, email, social media and platforms that don't accept modern formats.
PNG
PNG is a lossless format. It's perfect for preserving exact pixels but inefficient for photos.
Use it for: screenshots with small text, diagrams, files you'll keep editing and cases where the target tool doesn't accept WebP. ImageZap optimizes it with OxiPNG, which reduces size without changing a single pixel.
Choosing quickly
| Image type | Recommendation | Fallback |
|---|---|---|
| Large photo (hero, product) | AVIF quality 55–65 | WebP 80 or JPEG 82 |
| Small photo or thumbnail | WebP 75–80 | JPEG |
| Screenshot or UI | Lossless WebP or AVIF 4:4:4 | PNG |
| Logo or icon with transparency | SVG if possible; otherwise lossless WebP | PNG |
| Photo archive | Lossless JPEG XL | Keep the original |
To understand the reasoning behind each recommendation, read WebP vs AVIF vs JPEG XL and lossy vs lossless compression.