PNG, JPEG, WebP, AVIF: picking an image format in 2026

The right image format saves bytes, time, and money. The wrong one bloats your page or destroys your visuals. The choice is mostly between four formats, with a couple of footnotes. Here's what each one is good at, with honest trade-offs.

The four formats at a glance

The picture in 2026: PNG and JPEG are the lowest common denominator. WebP is the modern default. AVIF is the best compression available but with the smallest browser pool.

PNG: when you need lossless

PNG compresses without throwing away any pixel data. The output looks exactly like the input. That's the right choice for:

• Logos, icons, line art. Anywhere edges are sharp and a JPEG would create blocky artifacts at the boundaries.
• Screenshots. Lossy compression smears sub-pixel text and pixel-perfect UI details.
• Anything you might re-edit. Repeated lossy save/re-save degrades quality.
• Images that need transparency. PNG supports alpha (per-pixel transparency), JPEG does not.

PNG's weakness is photographs. A 4000×3000 photograph as PNG might be 25 MB. The same photograph as JPEG at quality 80 might be 800 KB and visually indistinguishable.

Use PNG-8 (256 colors with a palette) for icons that don't need millions of colors — it's often smaller than PNG-24 (full color) for the same content.

JPEG: the default for photographs

JPEG has been the photograph format for thirty years and still is, on the long tail of the internet. It uses lossy compression tuned for natural images — gradients, smooth textures, the kind of subtle color variation that photos have a lot of.

The key parameter is quality, usually 0–100. The math:

• Quality 95+ is overkill for most uses. The file is twice as big as quality 85, with no visible improvement on a screen.
• Quality 80–90 is the sweet spot for hero images. File size is 50% lower than quality 95, no visible artifacts at normal viewing distance.
• Quality 60–80 is fine for thumbnails and background images. Slight softening visible if you look for it.
• Quality 30–60 starts showing blocking and ringing. Use only when bytes matter more than fidelity.
• Quality below 30 is a meme; the artifacts are part of the aesthetic.

JPEG cannot do transparency. JPEG hates sharp edges (you'll see ringing around text and logos). JPEG hates pure colors with sharp boundaries (the same reason).

If you're saving a photograph for the web in a format your CMS does not auto-convert, JPEG at quality 82 is a safe default.

WebP: the modern web default

WebP, released by Google in 2010, supports both lossless and lossy compression, transparency, and animation. Browser support is universal except for very old Safari (≤13).

The compression numbers, on typical web images:

• WebP lossy at the same visual quality as JPEG: 25–35% smaller.
• WebP lossless at the same fidelity as PNG: 20–30% smaller.

That is real money for high-traffic sites. A 200 KB hero image becomes 140 KB. Multiply by a million page views.

WebP's downside is that it has been the modern web default for about a decade now, and AVIF is the next thing.

AVIF: the best compression, with caveats

AVIF (2019) is a still-image format based on the AV1 video codec. It compresses better than WebP — often 30–50% smaller than JPEG at the same visual quality, sometimes more on photographs. It supports HDR colors and 10/12-bit depth, which matters for professional photography but not for most web work.

The catches:

• Encoding is slow. A single AVIF can take seconds to encode at high quality. WebP and JPEG are nearly instant. For large batches, you need a build-time pipeline.
• Browser support is good but not universal. Safari adopted AVIF in 16 (2022). Older Safari and old Android browsers do not display AVIF.
• Some tools still don't read AVIF. Older image editors, some CDN transforms, some thumbnail generators. Test your pipeline.

For 2026 production sites, the practical advice: serve AVIF to browsers that accept it, fall back to WebP for the rest, fall back to JPEG/PNG for ancient clients. Modern image pipelines (Next.js Image, Cloudflare Images, Imgix) do this automatically.

What about SVG?

SVG is a vector format, not raster. It scales infinitely without losing quality, but only if the image is actually vector — logos, icons, charts. Trying to use SVG for a photograph is just an embedded raster wrapped in XML; the file is bigger and there's no quality benefit.

SVG is the right answer for:

• Logos and icons.
• Simple charts and diagrams.
• Any image where users might zoom in past 200%.

The catch: SVG can contain JavaScript and external references, which means a malicious SVG can run code in the page that displays it. If you accept SVG uploads, sanitize them with a library like DOMPurify before serving.

The 60-second decision tree

1. Is the image a logo, icon, or simple chart? → SVG.
2. Is it a screenshot, line art, or anything with sharp edges? → PNG (or WebP lossless).
3. Is it a photograph? → WebP with AVIF as the next-gen choice; JPEG as the fallback.
4. Does it need transparency? → WebP, AVIF, or PNG.
5. Animated? → WebP or AVIF (animated GIF only if you must — 10× larger than animated WebP).

A typical modern stack: store source images in their highest-quality original. At build time, generate WebP and AVIF variants in the sizes you actually need. Serve the right one with <picture> + <source>. Most CDNs and frameworks do this for you.

Resizing matters more than format

Compression format is the second-order optimization. The first-order one is: don't ship a 4000-pixel image to a 400-pixel-wide layout. The browser will downscale it, but the user already paid for the bytes.

The Image Resizer handles this client-side — pick a target width, get a resized image you can use on your site. For batches, plug your build pipeline into sharp or a CDN that resizes on request. For one-offs, drag and drop here.

A well-sized JPEG beats a poorly-sized AVIF. Get the dimensions right first; pick the format second.