Rasp

Comparison

The best image format for your website

AVIF first, WebP as a fallback, JPG underneath. Here is the measured reasoning, and the cases where it changes.

What image format should I use for my website?

Serve AVIF with a WebP fallback and a JPG underneath, using a picture element. On our test image AVIF was 71% smaller than JPG and WebP 34% smaller, so current browsers get the smallest file and older ones still get something they can render. Keep PNG only for screenshots and diagrams containing text.

The measured case

Every figure below is produced by this site’s own converters from a single source image, over a fixed corpus.

Format Size vs JPG
PNG 3.97 MB 10× larger
JPG 375 KB baseline
WebP 247 KB 34% smaller
AVIF 109 KB 71% smaller

On a page with ten photographs, that is the difference between roughly 3.7 MB and roughly 1.1 MB of image weight. On a phone connection, that is seconds.

The answer

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="A real description" width="1200" height="800" />
</picture>

The browser takes the first format it understands. Current browsers get AVIF. Slightly older ones get WebP. Anything else gets JPG. No visitor is ever stuck, and nobody downloads more than they need.

Two details in that snippet matter beyond the format choice:

  • width and height reserve the space before the image loads, which prevents the layout shifting underneath the reader. Cumulative Layout Shift is a Core Web Vital.
  • alt is a real description, not a filename. It is what screen readers announce and what search engines read.

If three versions is too much work

Two is a reasonable compromise: WebP with a JPG fallback. That covers essentially every visitor, is much simpler to generate, and still takes 34% off your image weight.

The full three-format setup is worth it when images are the bulk of the page — a portfolio, a photography site, a product catalogue — and less so when you have four images on a text-heavy blog.

Where the rule changes

Screenshots, diagrams and code samples → PNG, optimised losslessly. Lossy compression softens text, and no quality setting fully avoids it. This is the one case where the largest file is the right answer.

Logos, icons and line art → SVG. It is a vector description rather than pixels, so it is sharp at any size and usually smaller than any raster equivalent. This site does not convert SVG, but if your artwork is geometric, that is where it belongs.

Images your visitors will download → offer a JPG. You control what their browser renders; you do not control what opens the file after they save it.

Size matters more than format

Worth saying, because it is easy to spend an afternoon on formats and miss the bigger win.

An image displayed in a 600-pixel column should be about 1200 pixels wide — twice the display size, to look sharp on high-density screens. Serving a 4000-pixel camera original into that column wastes far more bytes than any format choice can recover.

Resize first, then convert. In that order.

The practical sequence

  1. Resize to twice the largest displayed width
  2. Convert to AVIF and WebP, keeping a JPG fallback
  3. Serve them from a <picture> element with width, height and real alt text
  4. Lazy-load everything below the fold — but never your largest above-the-fold image, which is the one Largest Contentful Paint is measuring

Converters for step two: to AVIF, to WebP, and from PNG or HEIC if that is where you are starting.

Questions

Is AVIF safe to use on a production website in 2026?
Yes, provided you serve a fallback. Chrome, Edge, Firefox, Opera and Safari all support it, Safari since 2022. A picture element with WebP and JPG behind it means no visitor is ever stuck.
Do I really need three versions of every image?
It is the strongest option and storage is cheap, but two is a reasonable compromise: WebP with a JPG fallback covers essentially everyone and is much simpler to generate. You give up the AVIF saving.
Should I still use PNG anywhere on a website?
For screenshots, diagrams, code samples and anything where text must stay perfectly crisp. Lossy compression softens letters, and no quality setting fully avoids it. For everything else, WebP does PNG's job at a fraction of the size.
What size should my images be?
Match the largest size the image is actually displayed at, then double it for high-density screens. An image shown in a 600-pixel column wants to be 1200 pixels wide. Anything beyond that is bytes no visitor perceives.
Does image format affect SEO?
Indirectly but genuinely. Image weight is a large part of Largest Contentful Paint, which is a Core Web Vital and a ranking signal. Smaller images make pages faster, and faster pages rank better — the format itself is not a ranking factor.
What about SVG?
For logos, icons and line art, SVG beats every raster format — it is a vector description, so it stays sharp at any size and is usually tiny. Use it wherever the artwork is geometric rather than photographic.
Should I lazy-load images?
Yes for images below the fold, using loading="lazy". Never for your largest above-the-fold image — lazy-loading that one delays the exact element Largest Contentful Paint measures.

Sources

Related reading