WebP vs AVIF vs HEIC vs JPEG vs PNG: Which Image Format Should You Actually Use?

TL;DR: AVIF produces the smallest files. WebP is the practical best choice for the web (great compression + universal browser support). JPEG is the safe default for email and legacy compatibility. HEIC is excellent but locked to the Apple ecosystem. PNG is lossless but massive — use it only when you need pixel-perfect output. Here's the quick reference:

Keep reading for the real data behind these recommendations.

Why This Matters

Images typically account for half the total weight of a web page. Choosing the right format can cut file sizes by 60–90% with no visible quality loss — directly improving page load times, Core Web Vitals scores, and bandwidth costs. But "best format" depends entirely on where the image is going and who needs to open it. A format that's perfect for your website might break in an email client or double in size when converted from a phone camera original.

We ran real benchmarks across 8 source images and 5 formats to find out exactly how they compare.

Compression Benchmark

Methodology

We tested 8 source images across 4 categories:

Photographs — Two iPhone 17 Pro shots: a landscape of the Northern California coastline (4284×5712) and a close-up of a jade plant in San Francisco (4284×5712). Source format: HEIC.

Illustrations — Two digital illustrations created for collectible trading cards (3600×2700 and 1600×1200). Source format: JPEG. Art credits: Rift by Brian Haung, Famke by Jen Lum.

Screenshots — Two in-game screenshots from an iOS game (2208×1242). Source format: PNG.

UI assets — Two app game UI screens (1920×1080). Source format: PNG.

Each image was exported through ImageCrush at three quality levels (90%, 75%, 60%) in JPEG, WebP, HEIC, and AVIF. PNG was exported once per image — it's a lossless format, so the quality slider has no effect. All exports maintained original dimensions (no resizing) for a fair comparison.

Total output: 120 images from 8 sources across 17 presets, exported in 34 seconds.

Results: Average File Size by Category (75% Quality)

75% quality is the sweet spot for most use cases — good compression with minimal visible quality loss. Here's how the formats compare:

AVIF wins every category. WebP and HEIC trade places depending on the content type, but both consistently beat JPEG by a wide margin. PNG is in a league of its own — 5 to 10 times larger than lossy formats for photos and illustrations.

For screenshots and UI assets (where source images were PNG), every lossy format delivers dramatic savings: JPEG cuts the file to roughly 18% of the PNG original, and AVIF gets it down to 6%.

How Quality Affects File Size

Using an in-game screenshot (2208×1242, source: 2,872 KB PNG) as a representative example:

Dropping from 90% to 75% quality roughly halves the file size for WebP, HEIC, and AVIF. Going from 75% to 60% provides diminishing returns — the additional savings are smaller, and compression artifacts start becoming visible, especially in gradients and fine detail.

For most web use, 75% hits the best balance of size and quality. One caveat: quality sliders aren't comparable across formats. Setting 75% in JPEG, WebP, and AVIF produces visually different results at different file sizes — test each format independently.

The HEIC Conversion Trap

One of the most striking findings: converting iPhone photos from HEIC to JPEG can double the file size.

Our 24-megapixel iPhone 17 Pro landscape photo weighed 4.5 MB in its native HEIC format. Converting it to JPEG:

• At 90% quality: 8.3 MB (an 80% increase)
• At 75% quality: 6.4 MB (still 40% larger than the original)
• At 60% quality: 4.6 MB (barely breaks even, with visible quality loss)

The same pattern held for WebP at 90% quality — the output was actually larger than the HEIC source.

Why? HEIC uses the HEVC (H.265) codec, which is extremely efficient for photographic content. JPEG and WebP at high quality settings simply can't match that compression density for high-resolution photos. Only AVIF at 75% or below managed to meaningfully compress below the HEIC source size.

The takeaway: if your source images are already in HEIC (as every modern iPhone and iPad produces), don't convert to JPEG for size savings. You'll get the opposite. Convert to WebP or AVIF at moderate quality, or keep them in HEIC for Apple-to-Apple workflows.

More broadly, re-encoding any lossy format costs quality. Converting JPEG→WebP applies lossy compression to already-lossy data. Whenever possible, start from the highest quality original (RAW, TIFF, or PNG) rather than re-compressing an existing lossy file.

Quality Comparison: 100% vs 60%

To see what compression actually looks like, here are 800×800 center crops of two images at JPEG 100% quality (maximum fidelity) and 60% quality (aggressive compression).

Jade Plant — iPhone 17 Pro (close-up with fine leaf detail)

JPEG 100% — 616 KB

JPEG 60% — 110 KB (82% smaller)

Game Screenshot (UI elements, text, and complex scene)

JPEG 100% — 850 KB

JPEG 60% — 126 KB (85% smaller)

Digital Illustration (rich color and fine linework)

JPEG 100% — 892 KB

JPEG 60% — 109 KB (88% smaller)

UI Design Mockup (flat colors, sharp edges, small text)

JPEG 100% — 366 KB

JPEG 60% — 84 KB (77% smaller)

At web resolution on a normal display, the 60% versions are hard to distinguish from the originals. Drag the sliders and look closely — the jade plant's leaf edges soften, the game screenshot's UI text gets fuzzier, the illustration loses subtle color gradations, and the UI mockup's sharp edges start to ring. Each content type reveals compression artifacts differently. For most use cases, 75% gives you the compression benefits without these trade-offs.

Picking the Right Format

Web Development

Use WebP. It's the modern default for a reason: great compression, universal browser support, and transparency when you need it. Serve WebP as the primary format with a JPEG fallback for the rare legacy browser:

<picture>
  <source srcset="/images/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="Hero image" />
</picture>

If you're using Next.js, the next/image component handles format negotiation automatically — it serves WebP or AVIF based on browser support. But pre-optimizing your source images before they hit the build pipeline still matters. A 5 MB source image means a 5 MB upload and slower builds, even if the output is compressed.

The same applies to CMS content — WordPress (since 5.8), Ghost, Sanity, and most modern platforms handle WebP natively. Our benchmark: switching from JPEG to WebP at 75% quality cut file sizes by 60% on average across all test images.

Email Attachments and Newsletters

Use JPEG at 70–80% quality. Email clients have wildly inconsistent format support. Outlook doesn't render WebP. Older versions of Gmail struggle with it. Apple Mail handles HEIC but nothing else does. JPEG is the only format guaranteed to display correctly everywhere.

Resize to reasonable dimensions before attaching — 1200px on the long edge is plenty for email. A full-resolution iPhone photo converted to JPEG at 75% quality and resized to 1200px will be under 200 KB. The original HEIC might be 4–5 MB.

For HTML email newsletters, the same rule applies. Don't get clever with modern formats — recipients will see broken images.

Social Media

Use JPEG for photos, PNG for graphics with text. Every platform — Instagram, X, LinkedIn, Facebook — re-encodes your upload to their own specs anyway. You can't control the final format or quality. What you can control: upload the highest quality source that fits within the platform's file size limits, at the right dimensions.

Quick reference for dimensions:

• Instagram — 1080×1080 (square), 1080×1350 (portrait), 1080×566 (landscape)
• X / Twitter — 1600×900 (landscape), 1080×1080 (square)
• LinkedIn — 1200×627 (link preview), 1080×1080 (post)
• Facebook — 1200×630 (link preview), 1080×1080 (post)

Use ImageCrush to batch-resize and export at 90% JPEG quality. The platform's re-encoder handles the rest.

Apple Ecosystem

Keep it in HEIC. If your photos stay within Apple Photos, iCloud, AirDrop, and Messages, there's no reason to convert. HEIC is native to iOS and macOS, compresses roughly as well as WebP, and preserves all the metadata your iPhone captures — including depth maps, Live Photo data, and HDR information.

Convert only when you need to leave the Apple ecosystem: uploading to a website, attaching to a cross-platform email, or sharing with someone on Android or Windows. At that point, batch-convert to WebP or JPEG at the quality level that fits your use case.

Our data showed that HEIC source photos from iPhone actually increased in file size when converted to JPEG — sometimes by 80–100%. The conversion only makes sense when the receiving end can't handle HEIC.

App Development and UI Assets

Use PNG for pixel-perfect assets, WebP for larger images. Icons, buttons, and small UI elements need lossless fidelity — PNG preserves every pixel exactly. For larger assets like onboarding screens or backgrounds, WebP lossless mode saves significant space.

If you're building for Apple platforms, your Xcode asset catalog handles format selection at build time. Export your source assets as PNG at the highest resolution you need, and let the toolchain optimize from there. For @1x, @2x, and @3x export, batch tools like ImageCrush can generate all scale variants from a single source in one pass.

Archival and Print

Use PNG. Lossless is non-negotiable for archival and print. Archive originals as PNG (or TIFF), then generate optimized exports in whatever format the destination requires. Note that JPEG has no transparency support — if you need alpha channels, use WebP or PNG.

Batch Converting with ImageCrush

Everything in this benchmark was exported using ImageCrush, a native macOS batch image optimizer. The workflow:

1. Drag in your images — drop a folder or individual files into the app
2. Pick a format — JPEG, WebP, HEIC, AVIF, or PNG
3. Set quality — adjust the slider (or leave it alone for PNG)
4. Resize if needed — set max dimensions or an aspect ratio crop
5. Save as a preset — name your settings for one-click reuse
6. Export — all images process concurrently using native Apple frameworks

The entire benchmark for this post — 8 images across 17 presets, producing 120 output files — exported in 34 seconds. All processing happens locally on your Mac. No uploads, no cloud services, no waiting on a remote server. Smart passthrough means files that can't be improved are left untouched — no generation loss for no benefit.

Download the free trial — 7 days, full access, no restrictions.

Further Reading

• web.dev — Image Performance — Google's guide to image performance on the web
• Can I Use — WebP and AVIF — current browser support tables
• Using HEIF or HEVC media on Apple devices — Apple's guide to HEIC/HEIF capture, compatibility, and conversion
• Squoosh — Google's browser-based image comparison tool for testing individual images