JPEG was standardised in the early 1990s and PNG a few years later. Both still work everywhere, but they were designed long before phones, high-density screens and Core Web Vitals. WebP and AVIF are the newer formats that browsers now support widely, and they can deliver the same visual quality in noticeably fewer bytes.
For SEO, the appeal is simple: lighter images mean faster pages, and faster image delivery often improves Largest Contentful Paint. The question most site owners have in 2026 is not whether to use next-gen formats, but which one, for which images, and how to roll them out without breaking anything.
This guide compares WebP and AVIF with JPEG and PNG, explains browser and Google Search support, shows how to serve them safely with fallbacks, and walks through a rollout plan for WordPress, Shopify and custom sites.
Key Takeaways
- WebP is supported in all current major browsers and is a safe default for photos and graphics.
- AVIF usually compresses further than WebP but encodes more slowly and has slightly narrower support, so serve it with a fallback.
- Google Search indexes WebP and AVIF images, along with JPEG, PNG, GIF, BMP and SVG.
- Use the
<picture>element or server-side content negotiation to serve AVIF, then WebP, then JPEG or PNG. - Format conversion is not a substitute for resizing and sensible compression settings.
What are WebP and AVIF?
WebP is an image format developed by Google that supports lossy and lossless compression, transparency and animation in one format. Google’s WebP documentation reports that lossless WebP images are 26% smaller than PNGs, and lossy WebP images are 25–34% smaller than comparable JPEGs at equivalent SSIM quality.
“WebP lossless images are 26% smaller in size compared to PNGs.”
— Google for Developers, An image format for the Web (WebP)
AVIF is based on the AV1 video codec from the Alliance for Open Media. It supports lossy and lossless compression, transparency, animation, high dynamic range (HDR) and wide colour gamut. web.dev’s image performance course notes AVIF offers higher compression than WebP and points to tests showing savings of more than 50% compared with JPEG in some cases. Results vary heavily by image, so treat those figures as a ceiling to test against, not a promise.
WebP vs AVIF vs JPEG vs PNG
| Format | Compression | Transparency | Animation | Browser support | Best use |
|---|---|---|---|---|---|
| JPEG | Lossy | No | No | Universal | Fallback for photos |
| PNG | Lossless | Yes | APNG only | Universal | Fallback for graphics, screenshots |
| WebP | Lossy and lossless | Yes | Yes | All current major browsers | Default for most web images |
| AVIF | Lossy and lossless | Yes | Yes | Current Chrome, Edge, Firefox, Safari and Opera (older versions lack it) | Large photos and hero images where every byte counts |
| SVG | Vector (text) | Yes | Yes (CSS/SMIL) | Universal | Logos, icons, diagrams |
MDN lists AVIF support from Chrome 85, Firefox 93, Safari 16.1 and Edge 121, and recommends including fallbacks via <picture>. It also notes AVIF does not support progressive rendering, so a large AVIF appears all at once rather than gradually. JPEG XL is another modern format that some browsers now support, but as MDN puts it, browser support is not yet universal, so it is not a safe primary format for most sites yet.
Does Google Search support WebP and AVIF?
Yes. Google’s image SEO documentation lists BMP, GIF, JPEG, PNG, WebP, SVG and AVIF as supported formats for images referenced in the src of an img element. Google also recommends that the file extension matches the actual file type, so do not rename a WebP file to .jpg. Next-gen formats do not earn a ranking bonus in themselves; the benefit comes from faster pages. For other image ranking factors like alt text and file names, see our image SEO guide and alt text guide.
Choosing a format for each image type
- Hero and banner photos: AVIF with WebP and JPEG fallbacks. These are often the LCP element, so savings matter most here.
- Product photos: WebP or AVIF, tested at a quality that keeps texture and colour accurate.
- Screenshots and UI images: lossless WebP, or PNG if the file is already small.
- Logos and icons: SVG wherever possible.
- Animated GIFs: replace with animated WebP, or better, a short muted looping video.
How to serve WebP and AVIF with fallbacks
There are two reliable methods. The first is the HTML <picture> element, where the browser picks the first <source> it supports and falls back to the <img>:
<picture>
<source type="image/avif"
srcset="hero-800.avif 800w, hero-1600.avif 1600w"
sizes="100vw">
<source type="image/webp"
srcset="hero-800.webp 800w, hero-1600.webp 1600w"
sizes="100vw">
<img src="hero-1600.jpg"
srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="100vw"
width="1600" height="900"
fetchpriority="high"
alt="Freshly installed oak kitchen worktop">
</picture>Note that width, height, alt and fetchpriority go on the <img>, which remains the element Google and the browser treat as the image. Order matters: list the most efficient format first.
The second method is content negotiation. Browsers send an Accept header listing the formats they support. A server or image CDN reads it and returns AVIF, WebP or JPEG from the same URL. If you do this, the response must include Vary: Accept so caches do not serve an AVIF to a browser that cannot display it. Most image CDNs handle this automatically, which is one reason they are popular; see CDNs and SEO.
Rollout plan: step by step
- Inventory your images. Run PageSpeed Insights or a Lighthouse audit on key templates and note the image delivery savings it reports.
- Keep master files. Store high-quality originals and generate every format from them, never from already-compressed JPEGs.
- Pick a delivery method: a CMS feature or plugin, build-time generation with
<picture>, or an image CDN with content negotiation. - Set quality defaults per format by comparing side by side in a tool like Squoosh. Our image compression guide explains how.
- Start with the LCP image on your highest-traffic templates, then roll out site-wide.
- Test fallbacks in an older browser or by disabling formats in DevTools, and check that Open Graph images still use a widely supported format such as JPEG or PNG, since social platforms vary in what they accept.
- Monitor field data in Search Console’s Core Web Vitals report for the following four weeks.
Platform notes
| Platform | How next-gen formats are typically handled |
|---|---|
| WordPress | Core accepts WebP uploads, and AVIF uploads from version 6.5, when the server’s image library supports them; optimisation plugins add automatic conversion, <picture> output or CDN delivery. |
| Shopify | Images are served from Shopify’s CDN, which can deliver modern formats to supporting browsers; theme code controls sizes via image URL parameters. |
| Custom / headless | Generate formats at build time (for example with Sharp) or use an image CDN; frameworks such as Next.js include image components that do this. |
Check your own platform’s current documentation, as these features change regularly. Our WordPress SEO guide and Shopify SEO guide cover platform-specific settings.
Common mistakes
- No fallback. Serving only AVIF breaks images for visitors on older browsers.
- Converting oversized images. A 5000px AVIF is still too big for a 600px slot. Resize first.
- Using AVIF for everything. For small icons and thumbnails the savings over WebP are tiny, and encoding is slower.
- Missing
Vary: Acceptwith content negotiation, leading to wrong formats being cached. - Mismatched file extensions, which Google’s documentation warns against.
- Putting attributes on
<source>instead of<img>, so alt text or dimensions are lost. - Forgetting CSS background images, which need
image-set()or a CDN to get modern formats.
Format changes are one part of a bigger speed picture. For the metric they influence most, read our Largest Contentful Paint guide, and for the full context see our overview of Core Web Vitals.
Related Guides
- CDNs and SEO: How Content Delivery Networks Help
- How to Eliminate Render-Blocking Resources
- Time to First Byte (TTFB): How to Improve It
Frequently Asked Questions
Is AVIF better than WebP?
AVIF usually produces smaller files at similar quality, especially for large photos, but encodes more slowly and has slightly narrower support. Many sites serve AVIF first with WebP and JPEG fallbacks.
Does Google index WebP and AVIF images?
Yes. Google Search supports WebP and AVIF, alongside JPEG, PNG, GIF, BMP and SVG, for images referenced in an img element's src attribute.
Do I still need JPEG and PNG?
Yes, as fallbacks for older browsers and for places such as some social platforms and email clients that may not accept newer formats.
Will converting to WebP improve my rankings?
Not directly. It can make pages faster, which helps user experience and Core Web Vitals, but content and relevance matter far more for rankings.
Should I use JPEG XL?
Not as a primary format yet. MDN notes browser support is not universal, so it needs a fallback, and AVIF or WebP are better supported choices in 2026.
Conclusion
WebP is the safe everyday default, AVIF is worth adding for large photographs, and JPEG or PNG remain your fallbacks. Serve them through <picture> or a CDN with content negotiation, start with your LCP images, and measure the effect in field data. If you would rather have specialists handle the conversion, delivery and testing, our page speed optimization service can help, or get a free quote.
