SVG vs PNG vs WebP vs AVIF: Which Image Format Wins for SEO?

Picking an image format is one of the few SEO decisions with a direct, measurable performance payoff. A page's largest image is very often its Largest Contentful Paint (LCP) element, and LCP is a Core Web Vitals metric Google confirms it uses in ranking. Shrink that image without wrecking its quality and you improve a real ranking signal, not by magic, but by loading faster. So the question isn't "which format is best" in the abstract; it's "which format is best for this specific image." The answer differs for a logo, a hero photo, and a UI screenshot.

If you're also writing the alt text for these images, that's covered in the alt text guide. This post is about the file itself.

The formats, ranked by when you'd reach for them

| Format | Kind | Best for | Size vs JPG | Transparency | Animation | |---|---|---|---|---|---| | SVG | Vector (text) | Logos, icons, line art, simple charts | Tiny, resolution-independent | Yes | Yes (CSS/SMIL) | | AVIF | Raster, lossy/lossless | Photos, hero images | ~50% smaller | Yes | Yes | | WebP | Raster, lossy/lossless | Photos, transparency, the safe default | ~25–35% smaller | Yes | Yes | | PNG | Raster, lossless | Sharp UI assets needing transparency | Often larger | Yes | No | | JPG | Raster, lossy | Photos on legacy targets, email | Baseline | No | No |

Two facts from that table do most of the work. First, SVG is in a different category: it's not pixels, it's instructions, so it scales to any size with zero quality loss and usually weighs a few KB. Second, AVIF and WebP exist to make the same photo smaller than JPG at the same visible quality, which is the entire performance argument.

SVG: for anything that isn't a photograph

SVG describes shapes mathematically, so a 4 KB logo looks razor-sharp on a phone and on a 5K monitor from one file. Reach for SVG for logos, icons (replace icon fonts, which are heavier and an accessibility liability), and simple diagrams.

The catch: SVG is code that the browser executes, which makes inline SVG a potential XSS vector if you accept SVGs from users, so sanitise anything uploaded. For your own brand assets that risk doesn't apply. If you want to inspect or sanity-check an SVG's contents before shipping it, paste it into our SVG Viewer; and for the multi-size icon set a site needs, the Favicon Generator produces the right files.

Don't force SVG onto photographs. A photo traced to vector becomes either enormous or wrong; photos are raster, full stop.

AVIF vs WebP: the real photo decision

Both beat JPG; the question is how aggressive to be.

• AVIF typically delivers the smallest file at a given quality, often half a comparable JPG and meaningfully smaller than WebP, with excellent handling of gradients and skies (fewer banding artifacts). Browser support is now broad (~95%+ globally) but encoding is slower and a few pipelines still lack good tooling.
• WebP is the boring, safe default: ~25–35% smaller than JPG, supported essentially everywhere that matters including older Safari, fast to encode.

You don't have to choose one and abandon the other. The correct pattern is to serve AVIF first, WebP second, and a JPG as the final fallback, and let the browser take the best one it understands.

PNG: narrower than people think

PNG is lossless and supports transparency, which earns it a real but small niche: sharp UI assets where you can't tolerate any compression fuzz and AVIF/WebP gains are negligible, like a small transparent logo overlay or a pixel-precise screenshot of a UI. For a photograph, PNG is the wrong tool: it's frequently larger than JPG, sometimes several times over. The classic performance bug is a multi-megabyte PNG screenshot used as a hero image; convert it to WebP/AVIF and watch LCP drop.

Serving the right format per browser

A single <picture> element lets every browser pick the best format it supports, falling through to the safe option:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Sunset over the harbor"
       width="1600" height="900">
</picture>

Two details on that <img> matter for Core Web Vitals:

• Always set width and height. They let the browser reserve space before the image loads, preventing layout shift (CLS). Leaving them off is one of the most common CLS causes.
• Do not lazy-load your LCP image. loading="lazy" is great for below-the-fold images, but adding it to your hero delays the very element LCP measures and makes the score worse. Lazy-load offscreen images only.

Responsive images: don't ship a 1600px file to a phone

A phone showing an image at 380px wide shouldn't download the 1600px desktop version. srcset + sizes let the browser fetch an appropriately sized file:

<img src="/photo-800.webp"
     srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1600.webp 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     alt="Customer scanning a QR code menu at a table"
     width="800" height="450">

Format and responsive sizing compound: AVIF at the right pixel dimensions can be a tenth the bytes of a full-size JPG, which is the difference between a slow LCP and a fast one.

The decision in four questions

1. Is it a logo, icon, or simple illustration? → SVG.
2. Is it a photo or complex raster image? → AVIF, with WebP and JPG fallbacks via <picture>.
3. Does it need transparency and pixel-precise edges, and isn't a photo? → PNG.
4. Is it going into an email? → JPG or PNG (Outlook still doesn't render modern formats reliably).

Confirming your pipeline actually does this

Configuring AVIF means nothing if your CDN still serves JPG to Chrome. Open Chrome DevTools → Network → Img, reload, and check the Type column: a modern browser should be receiving AVIF or WebP, not the JPG fallback. If it's getting JPG, your format negotiation (CDN or build step) is misconfigured. For choosing the right alt for each of these images, see 30 alt text examples, and for how alt, title, and captions differ, see alt vs title vs caption.

Frequently Asked Questions

Is WebP or AVIF better for SEO?

Both help equally in principle; the SEO benefit comes from a smaller file improving LCP, not from the format name. AVIF usually produces a smaller file at the same quality, but WebP has slightly wider support and faster encoding. Serving AVIF with a WebP fallback gets you the best of both.

Does choosing the right image format directly raise my rankings?

Not directly. It reduces file size, which improves Largest Contentful Paint, and LCP is a confirmed Core Web Vitals ranking signal. The path is format → faster load → better LCP → a small ranking benefit, not format → ranking.

When should I use SVG instead of PNG?

For anything that isn't a photo: logos, icons, line art, simple diagrams. SVG scales to any resolution from one tiny file, while a PNG is fixed-resolution and usually larger. Never use SVG for photographs.

Why is my PNG hero image hurting performance?

PNG is lossless and often several times larger than a JPG, WebP, or AVIF version of the same photo. A heavy PNG hero inflates LCP. Convert photographic heroes to AVIF/WebP and reserve PNG for transparent UI assets.

Should I add loading="lazy" to every image?

No. Lazy-load below-the-fold images to save bandwidth, but never lazy-load your LCP (hero) image; deferring it delays the exact element Core Web Vitals measures and makes the score worse.