WebP Conversion Calculator
Estimate JPEG/PNG/GIF → WebP and AVIF savings with a format comparison matrix, quality slider, bulk page-weight mode, and a ready-to-paste <picture> element.
About this ToolHow it works, benefits & use casesTap to collapse
Enter the weight of an existing JPEG, PNG or GIF and this calculator estimates how much smaller it would become as WebP and AVIF. It applies format-specific compression ratios — anchored at a q80 reference (JPEG → WebP ≈ 34% smaller, PNG → WebP ≈ 26%, AVIF ≈ 50%) — then scales every estimate with a single encoding-quality slider so you can trade size against fidelity, with AVIF always staying ahead of WebP. In single-image mode the results show as a format-comparison matrix with proportional bars for the original, WebP and AVIF sizes plus per-format byte and percentage savings, and a savings card with the headline numbers. Switch to bulk mode to paste a list of “name, size” lines (each extension sets that image’s source format) and get total page-weight savings across the whole set. A connection selector — Average 4G, Slow 3G or Cable — turns the byte savings into an estimated load-time before/after, framing the LCP impact. Every result ships with a copyable, downloadable <picture> element (AVIF + WebP sources with your original-format fallback and your own alt text), and the full state lives in the URL so any estimate is shareable.
How to Use
- 1Pick single-image or bulk page mode, then choose the source format: JPEG, PNG or GIF.
- 2In single mode, type the original file size and choose KB or MB; in bulk mode, paste one “name, size” line per image.
- 3Drag the single Encoding quality slider (1–100, anchored at q80) to match the fidelity you plan to encode at.
- 4Choose a connection — Average 4G, Slow 3G or Cable — to see the estimated load time before and after.
- 5Read the comparison matrix and savings card, then copy, download or share (via its URL) the generated <picture> element.
Key Benefits
- Estimates WebP and AVIF savings from a single original size and format
- One encoding-quality slider scales every estimate so you can balance size against fidelity
- Single-image comparison matrix visualises original vs WebP vs AVIF with proportional bars
- Bulk mode totals page-weight savings across a pasted list, inferring format per line
- Connection selector turns byte savings into an estimated load-time before/after
- Generates a copyable, downloadable <picture> element with AVIF, WebP and your fallback
- Shareable URL captures the mode, format, size, quality and connection settings
Common Use Cases
- Building a business case for migrating an image library to WebP or AVIF
- Modelling total page-weight savings across all images on a page in bulk mode
- Comparing WebP and AVIF output at different quality levels for a given asset
- Estimating how much faster a hero image loads on 3G, 4G or cable after conversion
- Sharing a quick savings estimate with a teammate via a single link
Format comparison
| Format | Size | Savings |
|---|---|---|
| JPEGSource | 480.00 KB | — |
| WebPq80 | 316.80 KB | 34% |
| AVIFq80 | 240.00 KB | 50% |
Estimated savings
- Original total
- 480.00 KB
- Bandwidth saved (AVIF)
- 240.00 KB
- Est. load on Average 4G (12 Mbps)
- 328 ms → 164 ms
Faster image bytes mean a lower LCP when the hero image is the largest paint.
AVIF + WebP sources with an original-format fallback
<picture> <source srcset="image.avif" type="image/avif" /> <source srcset="image.webp" type="image/webp" /> <img src="image.jpg" alt="Hero image" loading="lazy" decoding="async" /> </picture>
Source image
WebP vs AVIF tradeoffs
AVIF wins on raw compression — typically ~50% smaller than JPEG and noticeably smaller than WebP at the same perceived quality — and supports HDR and wide color gamut. WebP encodes far faster, has broader (and older) browser support, and is a safe default. Serve both via a <picture> element: the browser picks AVIF first, falls back to WebP, then to your original JPEG/PNG so nothing breaks on legacy clients.
These numbers are estimates
Real encoded sizes depend on image content, encoder settings, and effort levels — flat illustrations compress very differently from photographic noise. This calculator models well-cited ratios (JPEG→WebP ≈ 25–34% smaller, PNG→WebP lossless ≈ 26%, AVIF ≈ 50%) scaled by the quality slider. Use it to size up a migration, not as a guarantee; always confirm with a real encode.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Image Format ConverterConvert between image formats
- Lorem Pixel GeneratorGenerate placeholder image URLs
- Spacing Scale CalculatorLinear, geometric, Fibonacci or modular spacing scales with a visual ruler preview and utility classes — export CSS, Tailwind v4, SCSS, JSON
- Unused CSS DetectorFind CSS selectors never matched by your HTML, see how many bytes you can save, and get cleaned CSS - with a safelist for dynamic classes
- Responsive Image GeneratorBuild srcset/sizes, <picture>, Next & Gatsby image markup with byte-savings and a CLS audit
- PNG to ICOConvert PNG images to multi-resolution .ico favicons at any size
They are model-based heuristics, not real encoder output. At the q80 reference the tool assumes JPEG → WebP is about 34% smaller (PNG → WebP about 26%) and AVIF about 50% smaller, then scales by your quality slider. Actual results vary with image content, encoder and settings — photographs compress differently from flat graphics — so treat the numbers as planning estimates rather than guarantees.
There is one Encoding quality slider (1–100) shared by both formats, anchored at q80 = 1.0. Below q80 the multiplier shrinks toward roughly 0.55×; above it grows toward about 1.35×, raising the predicted sizes. The curve is bounded so an estimate never exceeds the original and AVIF always stays smaller than WebP across the whole range.