WebP vs AVIF vs JPEG: which image format to use for a fast site
Use WebP as the default for photos and graphics on the web, AVIF where the smallest file matters and you can wait for it to encode, and JPEG where only JPEG is accepted. Serve AVIF and WebP with a JPEG fallback when you can.
Updated 2 min read
The tool this guide uses
Drag files here, or
JPEG, PNG, WebP, AVIF and GIF. Decoded on your device, never uploaded.
Encodes at quality 76, tuned to be indistinguishable from the original at normal viewing size. This is the setting to use when you just want the file smaller.
Optional. Height follows automatically.
Ready. Runs locally on your device.
Your files stay on your device. The tool works directly in your browser, using your device to process your files. Nothing is sent to our servers, and we never receive, store, or see your files or figures.
The short version
| Format | Best for | Size | Encoding speed | Support |
|---|---|---|---|---|
| JPEG | Photos where only JPEG is accepted | Largest of the lossy three | Fast | Everywhere |
| WebP | The default for web photos and graphics | Smaller than JPEG | Fast | All current browsers |
| AVIF | Hero images and anything size critical | Usually smallest | Slow | Current Chrome, Edge, Firefox and Safari |
| PNG | Screenshots, logos, exact pixels | Large for photos | Fast | Everywhere |
Google’s own WebP documentation reports lossy WebP files 25 to 34 percent smaller than comparable JPEGs at equivalent quality in its study. AVIF usually goes further, at the cost of much slower encoding. The exact saving depends on the image, so the best way to decide is to try your own images in the tool above and compare the sizes it reports.
Why format is only half of it
The biggest saving on most sites is not the format at all. It is dimensions. A phone photo is about 4,000 pixels wide; a product image on a page is rarely shown wider than 1,200. Serving the original makes the browser download more than ten times the pixels it will ever draw.
So, in order:
- Resize to the largest size the image is shown at, allowing twice that for high density screens if you want them sharp there. The Limit width field in the tool above does this while compressing.
- Choose the format. WebP by default, AVIF where it matters.
- Choose the quality. Smart in the tool above picks a sensible level per image; To a file size works from a budget, such as 200 KB per image.
Serving modern formats with a fallback
Where you control the HTML, let the browser choose:
<picture>
<source srcset="/images/product.avif" type="image/avif">
<source srcset="/images/product.webp" type="image/webp">
<img src="/images/product.jpg" alt="Blue canvas tote bag" width="1200" height="900" loading="lazy">
</picture>A browser takes the first source it understands, and one that understands none of them uses the JPEG. Three more habits keep images from hurting page speed:
- Always set width and height, so the page does not jump as images arrive.
- Lazy load images below the fold, but never the main image at the top of the page, which should load first.
- Keep file names descriptive, such as
blue-canvas-tote-bag.webp, for image search.
Doing it for a whole folder
The tool above compresses as many images as you add in one go, in your browser, and downloads them as a ZIP. Choose the format under Save as, set Limit width, and pick Smart or To a file size.
If your site’s images live in a CMS, compress them before uploading. Most platforms resize what you give them, but few recompress it well, and starting from a clean, right-sized file is what makes the difference.
Common questions
Do all browsers support WebP and AVIF now?
Every current major browser displays WebP, and current versions of Chrome, Edge, Firefox and Safari display AVIF. Older browsers and some email clients and upload forms still expect JPEG or PNG, which is why a fallback is still worth serving.
Is AVIF always smaller than WebP?
Usually, at the same visual quality, but not always, and it is much slower to encode. For a single hero image the wait is worth it. For a batch of hundreds of product photos, WebP is often the more practical choice.
When should I still use PNG?
For screenshots, logos and graphics with flat colour and sharp edges where you need exact pixels, or where a system only accepts PNG. For photographs, PNG is almost always the largest option.
Cite
Cite this page
Reembun. (2026, September 11). WebP vs AVIF vs JPEG: which image format to use for a fast site. https://reembun.com/guides/webp-vs-avif-vs-jpeg
About Reembun
Reembun is a free collection of more than 100 online tools for PDFs, images, video, audio, text and everyday calculations. Every tool runs inside your browser, so your files are processed by your own device and are never uploaded to a server. There is nothing to install, no account to create, and no watermark on what you make.
You do not have to take our word for it. Open your browser’s developer tools, watch the Network tab, and use any tool: your file never appears there.
Reembun is built and run by PT RHP Cipta Digital, a registered company in Indonesia.
