Best Image Format for Web Pages in 2026

The best image format for web pages in 2026 is AVIF for photos and screenshots, served inside a <picture> element with WebP and JPEG behind it for older browsers. Logos and icons stay SVG. PNG is for the few images that need every pixel exact.

Filestack, our file upload and delivery API, converts an uploaded image to any of these formats at the CDN, so you store one original and choose the best image format for web delivery in the URL. Two features cover it: the output task converts to AVIF, WebP, JPEG or PNG at a quality you pick, and auto_image serves WebP to any browser that accepts it. Both are part of our image transformation API.

Key takeaways

• On our test photo, AVIF matches JPEG’s visual quality in a file about a third smaller, and every current major browser decodes it.
• A quality number means something different in each encoder, so compare formats by measured similarity, never by the same quality setting.
• WebP is the fallback for browsers without AVIF, and JPEG is the last fallback.
• SVG is the format for logos, icons and line art, and PNG is for images that must stay lossless.
• JPEG XL now decodes in Safari and Chrome, but not yet everywhere AVIF does.

Which image format is best for each kind of image?

The answer changes with what’s in the image:

A browser either can’t show or shouldn’t be sent formats such as TIFF, BMP and HEIC, so convert those on upload. Our rundown of older and specialist image formats says where each one still fits.

How do AVIF, WebP and JPEG compare on the same photo?

To compare them fairly, we exported one 1600 by 1067 pixel photo, a crow in dry leaves, at quality 40 through 90 in each format and scored every file with SSIM against a lossless PNG of the same image. SSIM is 1.0 for an identical image, and higher means closer to the original.

 

On this photo, AVIF at quality 70 scores 0.954 at 191 KB, and JPEG at quality 80 scores 0.949 at 294 KB. So the AVIF file is about a third smaller and slightly closer to the original. WebP sits between the two lines: at quality 80 it’s 223 KB and scores 0.944, a little below the JPEG.

The same quality number gives different results in each format. At quality 70, the WebP file is the smallest of the three and also the least faithful. Pick each format’s setting by what it looks like, or by a score such as SSIM, then compare the sizes.

What about screenshots, logos and transparency?

Screenshots are where PNG costs the most. One 1600 by 1474 pixel screenshot of a file list is 139 KB as a lossless PNG and 22 KB as AVIF at quality 60, with an SSIM of 0.9987:

 

At that score the text edges look the same as the PNG’s. JPEG needs quality 90 to get close, and it’s still four times the size of the AVIF.

Logos and icons are a different case. An SVG is a set of shapes rather than pixels, so it’s sharp on every screen and often smaller than any raster version. Keep SVG for anything drawn, and use AVIF or WebP when a logo arrives as a raster file with transparency.

Is AVIF supported in every browser in 2026?

AVIF works in every current major browser. It became Baseline in January 2024, when Edge 121 added it, after Chrome, Firefox and Safari 16.4. WebP has been in every major browser since Safari 14 in 2020. A browser that hasn’t been updated in years can’t decode it, so serve AVIF with a WebP and JPEG fallback rather than alone.

JPEG XL is the newer contender. Safari has decoded it since version 17, and JPEG XL in Chrome shipped in Chrome 155 in October 2026. Other browsers are still adding it, so it needs the same fallback AVIF needed a few years ago. Our CDN converts to AVIF, WebP, JPEG and PNG, and not to JPEG XL.

Ways to serve the best image format for web pages

Choosing the format is half the job. Something has to make every version of every image:

How does Filestack serve the best image format for web pages?

Each format is a URL. Point output at the stored image’s handle and the CDN converts it on the first request and caches the result. This script prints what each format costs for the photo above at quality 70, using only curl:

HANDLE=uBUJ3LlCTu2c6B6eRWZR
for format in jpg webp avif; do
  curl -s -o /dev/null -w "$format %{http_code} %{content_type} %{size_download} bytes\n" \
    "https://cdn.filestackcontent.com/resize=width:1600/output=format:$format,quality:70/$HANDLE"
done

It prints:

jpg 200 image/jpeg 228244 bytes
webp 200 image/webp 153556 bytes
avif 200 image/avif 191458 bytes

Those are the quality 70 points on the chart, where WebP is the smallest and also scores lowest. Swap in your own handle to see your images. A format the CDN doesn’t produce returns 400 with invalid value format jxl for parameter format required by output task.

To serve the best image format for web browsers with fallbacks, put one URL per format in a <picture> element. The browser takes the first <source> whose type it supports, and falls back to the <img>:

<picture>
  <source type="image/avif"
    srcset="https://cdn.filestackcontent.com/resize=width:1600/output=format:avif,quality:70/uBUJ3LlCTu2c6B6eRWZR">
  <source type="image/webp"
    srcset="https://cdn.filestackcontent.com/resize=width:1600/output=format:webp,quality:80/uBUJ3LlCTu2c6B6eRWZR">
  <img
    src="https://cdn.filestackcontent.com/resize=width:1600/output=format:jpg,quality:80/uBUJ3LlCTu2c6B6eRWZR"
    width="1600" height="1067" loading="lazy" decoding="async"
    alt="A crow in dry leaves">
</picture>

The qualities are the matched points from the chart, around SSIM 0.95 in each format: AVIF at quality 70 is 191 KB, WebP at quality 80 is 223 KB and JPEG at quality 80 is 294 KB. A browser with AVIF downloads the smallest file, and the others still get an image. The converted files are served with Cache-Control: public, so each one is converted once and then served from cache.

When one URL has to cover every browser, auto_image reads the browser’s Accept header and returns WebP if it’s accepted and the original format otherwise:

https://cdn.filestackcontent.com/resize=width:1600/auto_image/uBUJ3LlCTu2c6B6eRWZR

auto_image serves WebP rather than AVIF, so use the <picture> element where the AVIF savings matter. The output and auto_image tasks and their parameters are described in our processing API documentation. Width matters as much as format, and the rest of the page-weight work, from sizes to lazy loading, is in our guide on how to optimize images for page speed.

Questions about web image formats

WebP vs PNG, which is better for the web?

WebP, for almost every image. Lossy WebP keeps a screenshot’s text sharp at a fraction of the PNG size: 29 KB against 139 KB for the screenshot above. WebP also keeps transparency. PNG is better only when the file must stay lossless, for example an image a user will download and edit.

Is JPEG still a good web image format?

JPEG is the fallback every browser and email client opens, so keep it as the last <img> in a <picture> element. As the only format, it costs more bytes than AVIF or WebP for the same picture.

Should I convert GIFs to WebP?

Convert a GIF animation to MP4 or WebM video for the smallest file, or to animated WebP to keep it as an image. A still GIF is better as PNG, WebP or AVIF.

Is AVIF better than WebP?

AVIF gives a smaller file at the same quality on photos and screenshots. WebP is the fallback for browsers without AVIF, and it’s what auto_image serves.

What is the best image format for logos?

SVG. It’s vector, so it stays sharp at any size and is usually a few kilobytes. Use PNG, WebP or AVIF only when the logo arrives as a raster file.

Try it on your own images

Create a free account, upload an image, and put its handle into the script above to see your own sizes. Once you know each format’s size and quality, the <picture> element serves the best image format for web visitors in every browser from the one upload.

Read More →