Best Image Format for Website Speed: JPG, PNG, WebP or AVIF?
For fast website speed, WebP is the best general image format today, while AVIF made the smallest files for photo-like detail in our tests. Keep PNG for diagrams needing perfect sharpness, and turn heavy PNGs into JPG when photos were mistakenly saved as PNG. If you use AVIF, also offer a WebP or JPG fallback.
Which image format should you choose for each type of graphic?
Picking the right image format depends on image content. Photos have continuous tones, while screenshots, charts, and logos have sharp edges and solid colours.
The Google web.dev guide on choosing the right format advises: "Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG, lossy WebP, or AVIF." The guide also states: "Do you need to preserve fine detail with highest resolution? Use PNG or lossless WebP."
Use this picking table for common website assets:
| Image type | Recommended format | Safe fallback | Key reason |
|---|---|---|---|
| Photos | AVIF or WebP | JPG | Smallest size; JPG works everywhere |
| Screenshots, charts, logos | Lossless WebP or PNG | PNG | Crisp text without blur |
| Transparency needed | WebP or PNG | PNG | Alpha support; JPG fills solid colour |
| A form or portal asks for JPG | JPG | None | Send the format the form asks for |
On our photo-like test image, AVIF made the smallest file at a similar match score, with WebP next. JPG is the universal fallback. A photo saved as PNG wastes the most bytes (over 4 MB for our photo-like test image), so converting photographic PNGs to JPG or WebP gives the biggest saving.
For screenshots, charts, and logos, lossless WebP delivers smaller files than PNG with zero quality loss. Lossy WebP also beats JPG at equivalent quality matches. Avoid JPG for graphics with text, because it creates artifacts around sharp edges.
How do JPG, PNG, WebP and AVIF compare on file size?
To measure server-side optimization pipelines, we tested four web assets using sharp 0.35.5 with libvips 8.18 (JPG q80 mozjpeg, WebP q80, WebP lossless, AVIF q50):
- A 1366x768 screenshot of a real web article page.
- A 1200x630 flat share graphic.
- An 800x450 bar chart.
- A 1600x1067 colourful synthetic pattern with photo-like detail (this is a synthetic benchmark pattern, not a real photo).
Match reflects Peak Signal-to-Noise Ratio (PSNR) in dB (higher is closer to original pixels; lossless means identical pixels). Quality settings differ across formats, so evaluate file sizes alongside match scores.
| Image | PNG | JPG q80 | WebP q80 | WebP lossless | AVIF q50 |
|---|---|---|---|---|---|
| Screenshot | 84.6 KB | 87.4 KB (28.9 dB) | 75.7 KB (30.0 dB) | 47.1 KB (lossless) | 56.7 KB (35.7 dB) |
| Flat graphic | 22.0 KB | 21.8 KB (40.1 dB) | 10.5 KB (43.8 dB) | 9.5 KB (lossless) | 6.1 KB (45.8 dB) |
| Bar chart | 9.5 KB | 12.1 KB (37.2 dB) | 4.4 KB (38.5 dB) | 3.2 KB (lossless) | 2.8 KB (51.3 dB) |
| Photo-like pattern | 4,256.3 KB | 111.5 KB (42.4 dB) | 67.9 KB (39.9 dB) | 1,575.1 KB (lossless) | 32.0 KB (42.8 dB) |
The server encoder results show four clear patterns:
- For the photo-like pattern, AVIF was smallest at 32.0 KB (42.8 dB), beating JPG (111.5 KB at 42.4 dB) and WebP (67.9 KB at 39.9 dB).
- Storing photographic detail in PNG creates huge files (4,256.3 KB). Converting to WebP or JPG eliminates that waste.
- For the screenshot, graphic, and chart, lossless WebP beat PNG without losing a single pixel. The screenshot fell from 84.6 KB to 47.1 KB.
- JPG performed poorly on screenshots (87.4 KB) and charts (12.1 KB), ending up larger than PNG while adding edge blur.
How we tested image formats across web browsers
Browser tools convert images directly on the user's device via the HTML canvas API. On 2026-10-24, we ran automated Playwright tests in Chromium and Mozilla Firefox using canvas export at balanced quality 85:
| Image | JPG 85 | WebP 85 | WebP 100 (lossless) |
|---|---|---|---|
| Screenshot (PNG 122.8 KB) | Chromium 126.6 KB (29.6 dB) | 86.7 KB (30.1 dB) | Chromium 205.3 KB · Firefox 47.9 KB |
| Bar chart (PNG 13.5 KB) | Chromium 15.8 KB (38.0 dB) | 5.2 KB (38.6 dB) | Chromium 75.2 KB · Firefox 3.2 KB |
| Photo-like pattern (PNG 4,282.8 KB) | Chromium 188.8 KB (43.0 dB) | 87.2 KB (41.0 dB) | Chromium 1,890.3 KB · Firefox 1,575.8 KB |
WebP 85 numbers in the table are Chromium. Firefox matched within 0.5 KB (86.3 KB screenshot, 4.7 KB chart, 86.8 KB pattern). For JPG 85, Firefox made larger files: 134.4 KB screenshot, 21.0 KB chart, 204.7 KB pattern.
Two browser findings stood out:
- In both browsers, WebP quality 100 was lossless, producing identical pixels.
- Lossless WebP file sizes depended heavily on the browser. Firefox made the smallest files of all for the screenshot (47.9 KB) and chart (3.2 KB). In contrast, Chromium's lossless WebP was larger than the PNG (205.3 KB on the screenshot, 75.2 KB on the chart).
What happens when converting images directly in a browser?
We tested canvas exports across Chromium, Firefox, and the Playwright WebKit build. All three saved PNG, JPG, and WebP. None could save AVIF; each browser returned a PNG instead.
Our Image Converter therefore shows AVIF as not available for saving in those browsers. It can still read AVIF files. Real Safari on iPhone and Mac was not tested.
At the default quality 85, our live Image Converter turned an article screenshot from 122.82 KB into an 86.66 KB WebP.
For browser tools today, WebP is the practical upgrade. AVIF encoding requires a server build tool or a desktop app.
When should you avoid modern formats and stick with JPG or PNG?
According to the MDN guide to image types, WebP compatibility spans "All versions of Chrome, Edge, Firefox, Opera, and Safari". AVIF compatibility includes "Chrome 85, Edge 121, Opera 71, Firefox 93, and Safari 16". For AVIF, MDN notes that "you should provide a fallback in WebP, JPEG or PNG format using the <picture> element (or some other approach)".
Keep older formats in these cases:
- A form asks for JPG: send JPG. A WebP or AVIF file is not a JPG, even if it is smaller.
- Strict KB limits: When an upload requires a file under 20 KB or 50 KB, format conversion alone may not suffice. Use Compress Image with target size mode.
Honest limits: our tests used one synthetic pattern with photo-like detail, not real camera photos. Physical iPhone and Mac devices running Safari were not tested.
FAQ
Which image format gives the best website speed overall?
WebP is the best general format for websites today because it provides strong compression for photos and graphics across all modern browsers. AVIF made the smallest photo-like file in our tests, but browser tools cannot export it, and it needs a fallback for older browsers.
Can every browser open WebP and AVIF images?
WebP works in all versions of Chrome, Edge, Firefox, Opera, and Safari. AVIF is supported in Chrome 85, Edge 121, Opera 71, Firefox 93, and Safari 16. Older browsers need a WebP or JPG fallback via <picture>.
Why did Chromium make a larger lossless WebP than Firefox?
We did not look inside the browsers, but the results were very different: Firefox's lossless WebP was the smallest file of all for the screenshot and chart, while Chromium's was bigger than the original PNG. In Chromium, lossy WebP at quality 85 is much more practical.
Should you convert all existing website PNGs to JPG?
Only convert PNGs if they contain photographs without transparency. Converting screenshots, charts, or logos to JPG increases file size, creates blurry text edges, and turns transparent areas solid.
Choose the right format and speed up your site
Use WebP for general web images, AVIF for photos when your build tools support it, and PNG for diagrams needing lossless clarity. If your website has photos stored as heavy PNGs, turn your PNG photos into JPG to cut page weight. Conversions run directly in your browser, so your files stay on your device.
Related guides: Why is my JPG bigger than my PNG? · Why your PNG turns black when converted to JPG