For photos on a website, the short answer is AVIF first, WebP as the backup and JPEG as the fallback underneath both. The <picture> element lets you serve all three, and each browser takes the best one it understands.
The formats differ in more than file size, though, and the best choice depends on what the image is.
The quick comparison
JPEG has been around since 1992 and opens everywhere: every browser, every email client, every image viewer. It handles photos well and has no transparency. At the quality settings most sites use, it's the biggest of the three.
WebP came from Google in 2010. Files are typically 25 to 35 percent smaller than a JPEG of similar quality. It supports transparency and animation, and it has a lossless mode that often beats PNG. Every current browser displays it.
AVIF is the newest of the three, based on the AV1 video codec. It's often another 20 to 50 percent smaller than WebP, and it supports transparency, animation and HDR. All the major browsers display it: Chrome since version 85, Firefox since 93, Safari since 16.4 and Edge since 121. The catch is encoding. AVIF takes much longer to create than WebP or JPEG, which matters if your server converts images on upload.
How much smaller, really?
It depends on the photo. Smooth gradients and soft backgrounds compress very well in AVIF. Fine detail, like foliage, gravel or fabric, narrows the gap. AVIF's lead is usually biggest at the lower quality settings that are normal on the web, and it shrinks as you push quality up.
In one published test, a 990 KB photo came out at 700 KB as WebP and 507 KB as AVIF. That's a typical spread. The easiest way to know for your own images is to convert a few and compare. The responsive image converter shows the file size for every format and width side by side, so you can see the difference before you decide.
What about PNG and GIF?
PNG is lossless, which makes it right for screenshots, diagrams and anything with text or sharp edges, and wrong for photos. A photo saved as PNG can be five or ten times bigger than the same photo as a JPEG. Lossless WebP is usually smaller than PNG for the same image, and the browser support is now the same.
GIF is only worth using for animation, and even then video is far smaller. An MP4 or WebM that plays muted and on a loop behaves just like a GIF at a fraction of the size.
If the image is a logo, an icon or an illustration made of shapes, it probably shouldn't be any of these. SVG is usually smaller still and stays sharp at every size.
And JPEG XL?
JPEG XL is the format to watch. It compresses roughly as well as AVIF, decodes faster, and can shrink an existing JPEG by about 20 percent with no quality loss at all, since the original can be rebuilt bit for bit.
For years only Safari supported it (version 17 and later). That changed in October 2026, when Chrome 155 turned it on by default and Firefox added it in version 158. Edge hasn't yet. Since <picture> falls back gracefully, you can add a JPEG XL source above AVIF whenever your tools can produce it. Many image tools and hosts can't create JPEG XL yet, and the converter here doesn't make it yet either.
Which one to use
For photos, serve AVIF and WebP with a JPEG fallback:
<picture>
<source type="image/avif" srcset="photo-768.avif 768w, photo-1200.avif 1200w" sizes="(max-width: 768px) 100vw, 768px">
<source type="image/webp" srcset="photo-768.webp 768w, photo-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 768px">
<img src="photo-768.jpg" srcset="photo-768.jpg 768w, photo-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 768px" width="1200" height="800" alt="A bowl of ramen on a wooden table">
</picture>The browser goes down the list and uses the first <source> it supports, so order matters: smallest format first. The <img> at the bottom is required. It's the element that actually displays, and it carries the alt text and dimensions. srcset and sizes explained covers the srcset and sizes parts.
If three formats feel like too many files, WebP plus a JPEG fallback gets you most of the benefit. Going straight to AVIF alone isn't worth the risk yet: a JPEG fallback costs nothing to the visitors who don't need it.
For everything else:
- Screenshots and images with text: lossless WebP, or PNG.
- Images that need transparency: WebP or AVIF instead of PNG, if they're photographic.
- Logos and icons: SVG.
- Animation: video.
A note on quality settings
The same quality number doesn't mean the same thing across formats. Quality 80 in AVIF isn't quality 80 in JPEG, so converting everything at one setting and comparing file sizes can mislead you. Compare how the images look at the size they display, then pick the smallest file that still looks right.
As a starting point, 75 to 82 suits most photos. Large background images can go lower. Screenshots and text need more.
If PageSpeed Insights is what sent you here, How to fix "Improve image delivery" goes through the rest of what it checks. To try the formats on your own images, the responsive image converter makes AVIF, WebP and JPEG at every width and writes the <picture> markup. Your images never leave your device.