Images are usually the biggest part of a webpage. Pick the wrong format and your page is slower than it needs to be, your search rankings suffer, and your mobile visitors leave. Pick the right one and the same page can be half the size with no visible change.
Why format choice matters
Google's Core Web Vitals score is heavily influenced by Largest Contentful Paint, which is often the first big image on the page. A 400 KB hero in AVIF versus a 1.6 MB JPG can be the difference between a passing and failing LCP on mobile. Multiply by every image on the page and the impact on bandwidth, hosting bills, and conversions is significant.
Choosing by image type
Photographs
Best modern choice: AVIF, with WEBP as fallback and JPG as a final fallback. If you can only pick one and need broad compatibility, lossy WEBP at quality 80 is the safe default.
Logos and icons
Use SVG whenever the asset is vector. SVGs scale to any size, are tiny, and look perfect on any screen density. For raster icons, use PNG or lossless WEBP.
Screenshots
Use PNG or lossless WEBP. Lossy formats blur text and create halos around UI elements. The file is larger but legible — which is the whole point of a screenshot.
Transparent graphics
Use PNG, lossless WEBP, or AVIF. All three support transparency. Pick by file size: WEBP and AVIF are usually smaller.
Animations
Avoid GIF for anything new. Use animated WEBP or AVIF. They are smaller, sharper, and support full transparency. If you control the player, an actual video element with MP4 or WebM is even better.
Side-by-side comparison
| Format | Lossy | Lossless | Transparency | Animation | Use for |
|---|---|---|---|---|---|
| JPG | Yes | No | No | No | Photos, fallback |
| PNG | No | Yes | Yes | No (use APNG) | Graphics, screenshots |
| WEBP | Yes | Yes | Yes | Yes | Almost everything on the web |
| AVIF | Yes | Yes | Yes | Yes | Photos, hero images |
| SVG | n/a | n/a (vector) | Yes | Yes (CSS/SMIL) | Logos, icons, illustrations |
| GIF | n/a | Yes (palette) | 1-bit | Yes | Legacy support only |
Browser support today
All five formats above are supported in every shipped version of Chrome, Edge, Firefox, and Safari. AVIF has the most recent rollout but is still above 95% globally. You can serve modern formats first and fall back through the <picture> element for the long tail.
Recommendations
- Default to WEBP for new images. It is the best balance of compression and compatibility.
- Add AVIF on top for any large hero or banner where bytes matter.
- Use SVG for anything vector — logos, icons, illustrations.
- Keep PNG for screenshots and graphics with sharp edges.
- Use JPG only when a recipient or system requires it.
Frequently asked questions
Is WEBP better than JPG in every situation?+
For the modern web, yes. For email, social uploads, or systems that explicitly want JPG, stick with JPG.
Will using AVIF break Internet Explorer users?+
Internet Explorer is no longer supported by Microsoft and has well under 0.5% global share. If your audience genuinely needs IE, use JPG and PNG only.
Does Google rank pages with AVIF higher?+
Not directly. But AVIF produces faster pages, and Core Web Vitals are a ranking signal — so the effect is indirect but real.