Updated: June 27, 2026
Use AVIF for most photos, SVG for logos and icons, WebP as a broad fallback, and JPEG as the safest final fallback in <img src>. The SEO benefit does not come from Google preferring one file extension — it comes from faster pages, better Largest Contentful Paint (LCP), crawlable image markup, and fewer wasted bytes on mobile. According to recent Web Almanac data, images frequently dominate LCP on mobile pages, making format choice one of the highest-leverage technical SEO decisions available to most site owners.
Key Takeaways
- AVIF is the best primary format for photos — in many benchmarks, materially smaller than JPEG with no visible quality loss.
- SVG wins for logos, icons, and any vector illustration — scales without adding bytes.
- WebP is the recommended broad fallback and outperforms AVIF on simple graphics.
- JPEG is the mandatory
<img src>fallback for crawlers, email clients, and legacy browsers. - CSS
background-imageis not indexed by Google — use real<img>tags for any content that should appear in Google Images. - JPEG XL should be treated as experimental; add it as an extra
<source>only if your analytics confirm your audience supports it.
Why Image Format Matters for SEO
Google does not reward a specific format directly. It rewards what a better format produces: faster pages and better Core Web Vitals. The cause-and-effect chain is straightforward:
- Format choice → file size.
- File size → LCP and bandwidth on slow networks.
- Stronger Core Web Vitals can support better page experience, which may matter where content quality is otherwise comparable.
Google's own image SEO documentation is clear: "Images are often the largest contributor to overall page size, which can make pages slow and expensive to load." Choosing a more efficient format is the most direct way to reduce that cost.
A second SEO dimension sits beside Core Web Vitals: discoverability in Google Images. Google indexes images that appear in the src attribute of an <img> element. CSS background-image URLs are not indexed, and JavaScript-injected images carry more risk unless the rendered HTML includes a crawlable <img src>.
Image SEO: Myth vs. Reality
| Common belief | Reality |
|---|---|
| Google gives ranking boosts for AVIF or WebP | False — format is not a direct ranking signal; page speed is |
| Perfect PageSpeed Insights score guarantees rankings | False — CWV is one of many ranking factors |
CSS background-image works fine for hero content | False — Googlebot does not index background images |
| JPEG is obsolete and should be replaced everywhere | False — JPEG remains the required fallback in <img src> |
Best Image Format by Use Case
| Content type | First choice | Fallback chain | Why |
|---|---|---|---|
| Hero photo / product photo | AVIF | WebP → JPEG | Best lossy compression on photographic content |
| Blog body photo | AVIF | WebP → JPEG | Every byte counts on long-scroll pages |
| Logo, icon, line illustration | SVG | WebP → PNG | Vector scales with zero byte penalty |
| UI screenshot with text | WebP lossless | PNG | Pixel-perfect text without PNG's size |
| Transparent overlay / sticker | WebP or AVIF | PNG | Both modern formats support alpha channel |
| Animation (was GIF) | WebP animated or MP4/WebM | GIF | Video formats are often much smaller than GIF equivalents |
| Photo archive master files | JPEG XL (lossless) | JPEG | Lossless recompression, fully reversible |
File Size: What the Benchmarks Show
Independent testing by SpeedVitals using DSSIM (a perceptual quality metric, lower = better) shows AVIF outperforming WebP on photographic content but losing on simple graphics:
| Test image | WebP size / DSSIM | AVIF size / DSSIM | Winner |
|---|---|---|---|
| Photographic park scene | 340 KB / 0.0079 | 300 KB / 0.0060 | AVIF (smaller and sharper) |
| Complex banner | 55 KB / 0.00053 | 55 KB / 0.00016 | AVIF (same size, noticeably cleaner) |
| Simple two-color logo | 13 KB | 20 KB | WebP (35% smaller) |
Results vary by image type. In many benchmarks on photographic content, AVIF produces around 50% smaller files than JPEG and WebP around 25–34% smaller, based on Google's WebP benchmark data. Treat these figures as representative, not guaranteed — always measure your own images.
Browser Support
Based on current Can I Use data:
- JPEG / PNG / GIF / SVG: effectively 100%
- WebP: ~97%
- AVIF: ~95%
- JPEG XL: partial — Safari supports it; broad Chrome support is not yet reliable by default
AVIF + WebP + JPEG fallback inside <picture> covers virtually every visitor today. JPEG XL is a useful addition only if your analytics confirm your audience can use it.
How to Serve Modern Formats Safely
Google Search Central recommends the <picture> element with a real <img src> fallback. Order sources newest-to-oldest so the browser picks the best format it supports:
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img
src="hero.jpg"
alt="A barista pouring milk into a flat white"
width="1200"
height="800"
loading="lazy"
decoding="async"
>
</picture>
Why each attribute matters for SEO:
typeon each<source>lets the browser skip unsupported formats without a network round-trip.<img src="hero.jpg">is what Googlebot and most third-party crawlers read — never omit it.widthandheightreserve layout space and prevent Cumulative Layout Shift (CLS).altis required for accessibility and is used by Google Images for context.loading="lazy"applies only to below-the-fold images. Never lazy-load your LCP image — that delays the metric you are trying to improve.decoding="async"may reduce main-thread decode blocking; test its impact before treating it as an INP fix.
For responsive delivery, add srcset with width descriptors:
<source
type="image/avif"
srcset="hero-480.avif 480w, hero-960.avif 960w, hero-1600.avif 1600w"
sizes="(max-width: 768px) 100vw, 1200px"
>
Image Format Decision Tree
- Is it a photograph? → AVIF primary, WebP fallback, JPEG
<img src>. - Is it a logo, icon, or chart that can be drawn with paths? → SVG. Done.
- Is it a screenshot with text or UI elements? → WebP lossless, PNG fallback.
- Does it need transparency? → WebP or AVIF. Use PNG only if you cannot generate either.
- Is it animated? → WebP animated or an
<video autoplay muted loop playsinline>with MP4/WebM source.
Answer these five questions for every image on a page and you have handled most of the technical image SEO work.
When Not to Use AVIF
AVIF is not always the right choice:
- Simple logos and two-color icons: WebP lossless or SVG will produce smaller files.
- Email newsletters: AVIF has limited email client support; use JPEG or PNG.
- Workflows without modern encoding tools: If your CMS or image pipeline cannot produce AVIF, WebP is a reliable upgrade that most tools support today.
- Very small images (under 5 KB): Format savings diminish at small sizes; the overhead may not be worth the complexity.
Common Mistakes That Hurt SEO
- Sending desktop-sized images to mobile. Fix with
srcsetandsizes— oversized images inflate LCP on constrained connections. - Using PNG for photographs. Switch to AVIF or WebP; PNG files for photos are often much larger than their modern equivalents.
- CSS
background-imagefor hero content. Google does not index it; you lose Google Images visibility and your hero is effectively invisible to image search. - Missing
width/heightattributes. Causes CLS and visibly janky scrolling as the layout shifts during load. - AVIF with no fallback. Roughly 5% of users will see a broken image if there is no JPEG
<img src>. Always include the fallback. - Text baked into images. As web.dev guidance notes: "If you ever find yourself encoding text in an image asset, stop and reconsider" — baked-in text is not selectable, not translatable, and invisible to search.
- Lazy-loading the LCP image. This is one of the most common Lighthouse warnings and one of the easiest to fix.
Tooling and Workflow
Two practical paths to producing AVIF/WebP/JPEG variants:
- Build-time conversion: Sharp (Node.js), libvips, or framework helpers like Next.js
<Image>, Astro<Image>, and Nuxt Image. Generate all three formats once and ship them as static assets. - CDN with
Accept-header negotiation: Cloudinary, Imgix, and Cloudflare Images auto-deliver AVIF/WebP/JPEG based on the browser'sAcceptheader. Upload one source file; the CDN handles format and size variants.
For one-off compression before a CMS upload, LessMB can compress supported image files locally in your browser — files never leave your device, which is useful when you are preparing client photos, product shots, or screenshots before pushing them through a pipeline.
Pre-Publish Verification Checklist
Run this on any new article or landing page before shipping:
- Hero image is AVIF (with WebP + JPEG fallback in
<picture>). - Every
<img>hasalt,width, andheight. - LCP image is not
loading="lazy". - No important content relies on a CSS
background-image. - SVG used for any logo, icon, or chart.
- PageSpeed Insights LCP score is "Good" (under 2.5 s) on mobile.
- No image is served larger than its rendered size × 2 (retina threshold).
- Image sitemap (
<image:image>entries) submitted for image-heavy pages. - Confirmed in DevTools → Network → filter "Img" that AVIF is actually being delivered.
That last step matters. A common deployment issue is "switching to AVIF" only to find via DevTools that the CDN is still serving JPEG because of a missing Accept header, a stale cache, or a CMS that did not rebuild the asset.
Next Steps
- Audit your top 10 traffic pages: are their LCP images JPEG or PNG? Convert those first — that is where every saved byte compounds across thousands of sessions.
- Add a
<picture>template to your CMS or component library so new images get the right wrapper by default. - Compress and convert images locally before uploading to your CMS, then verify the delivered format in DevTools to confirm the pipeline is working end to end.
- Re-run PageSpeed Insights two weeks after deploying changes to confirm LCP improvements appear in field data, not just lab data.
Sources
- Google Search Central — Image SEO Best Practices
- web.dev — Choose the right image format
- HTTP Archive Web Almanac 2024 — Media chapter
- SpeedVitals — WebP vs AVIF benchmark
- Can I Use — AVIF support
- Can I Use — WebP support
- MDN — Responsive images
FAQ
What is the best image format for SEO in 2026?
Use AVIF for most photos, SVG for logos and icons, WebP as a broad fallback, and JPEG as the safest final fallback in <img src>. The SEO benefit comes from faster pages, better LCP, crawlable image markup, and fewer wasted bytes on mobile — not from Google preferring a particular file extension.
Does Google rank pages higher if I use WebP or AVIF?
Google does not reward a specific format directly. It rewards better page experience — faster pages and stronger Core Web Vitals. Because images are the LCP element on a large proportion of mobile pages, switching from JPEG to AVIF or WebP can meaningfully improve LCP where content quality is otherwise comparable.
Should I use JPEG XL on my website yet?
Treat JPEG XL as experimental for web delivery unless your own analytics confirm high browser support among your audience. You can add it as an extra <source> inside a <picture> element, but always keep AVIF, WebP, and JPEG fallbacks in place.
Is PNG bad for SEO?
PNG is not bad, but it is the wrong format for photographs. PNG was designed for lossless graphics, screenshots, and transparency. Using it for hero photos produces files that are often much larger than AVIF equivalents, which hurts LCP and mobile speed.
Does Google index images loaded via CSS background-image?
No. Google Search Central states that Googlebot indexes images referenced through the src attribute of an <img> element. CSS background-image URLs are not indexed, which means important content placed in background images will not appear in Google Images.
How do I serve different image formats to different browsers?
Use the <picture> element with <source> children ordered from newest to oldest: AVIF first, then WebP, with an <img> tag carrying a JPEG src as the final fallback. Always declare width, height, and alt on the <img> to prevent layout shift and remain accessible.
Should I convert all images to AVIF?
Not necessarily. AVIF excels at photographic content but can produce larger files than WebP for simple two-color logos or icons. Prioritize converting hero photos and LCP images first, then evaluate other image types based on measured file size.
Is WebP still worth using in 2026?
Yes. WebP has near-universal browser support and outperforms AVIF on simple graphics. It is the recommended fallback inside a <picture> element for any browser that does not yet support AVIF.
What image format should I use for logos?
SVG is the best choice for logos, icons, and any graphic that can be drawn with paths. It scales to any resolution without adding bytes. If SVG is not available, WebP lossless is the next best option.
Do image formats affect Google Images rankings?
Format choice affects whether images are indexed at all — CSS background images are not indexed — and how quickly pages load. Faster pages driven by efficient formats can support better page experience signals, though Google Images ranking involves many additional factors.