Image Compression Explained: JPG vs PNG vs WebP vs AVIF

Images are typically 60-70% of a webpage's weight. Get them right and your site feels fast — get them wrong and you're losing visitors before the page even finishes loading. This guide answers the only question that matters: which image format should you actually use in 2026?

Lossy vs lossless — the fundamental distinction

Every image format falls into one of two camps:

• Lossy (JPG, WebP, AVIF) — the encoder discards information the human eye is unlikely to notice. Smaller files, eventual quality degradation if re-saved many times.
• Lossless (PNG, WebP-lossless, AVIF-lossless) — no data is discarded. Identical to the source. Bigger files.

The right choice depends entirely on what the image is. Photos do well with lossy compression. Logos and screenshots need lossless.

JPG (JPEG) — the photo standard

JPG has been the default for photos since 1992. It uses lossy compression optimized for natural images with smooth color transitions. At 80% quality, a typical 5 MB camera photo becomes 400-800 KB with no visible difference.

Use JPG for:

• Photographs (people, landscapes, products).
• Complex artwork with gradients and many colors.
• Anywhere transparency is not needed.

Don't use JPG for:

• Logos, icons, line art — JPG smears clean edges into halos.
• Screenshots with text — text becomes blurry at low quality.
• Images with transparency (JPG doesn't support it).

Quality setting: 75-85% is the sweet spot. Below 60% starts to show artifacts. Above 90% wastes file size for invisible quality.

PNG — the lossless workhorse

PNG (1996) is lossless and supports transparency. It's the right choice for any image where every pixel matters: logos, icons, screenshots, line drawings.

Use PNG for:

• Logos and brand assets.
• Icons and UI elements.
• Screenshots of text and interfaces.
• Diagrams, charts, line art.
• Any image needing transparent backgrounds.

Don't use PNG for:

• Photographs — PNG files of photos are typically 5-10x bigger than JPG with no visible quality benefit.

WebP — the modern default

WebP (Google, 2010) combines the strengths of JPG and PNG. It supports both lossy and lossless modes, plus transparency in either. Typical file size is 25-35% smaller than equivalent JPG, 50%+ smaller than equivalent PNG.

Browser support is now universal — Safari finally added it in 2020. There's no reason to avoid WebP for new images in 2026.

Use WebP for:

• All photos on websites (lossy mode, 80-85% quality).
• Logos and icons where you want smaller files than PNG (lossless mode).
• Any modern web project where you control the source images.

Don't use WebP for:

• Files users will download and share elsewhere — JPG is more universally recognized outside browsers.
• Print workflows — design tools sometimes still prefer PNG or JPG.

AVIF — the new contender

AVIF (2019, based on AV1 video codec) is the next generation. File sizes are typically 20-50% smaller than WebP at the same quality. Browser support reached Safari in 2023; it's now safely usable.

The catch: encoding AVIF is much slower than JPG or WebP, and editing tools have inconsistent support. For most workflows in 2026, WebP is still the practical default — but AVIF is worth using for hero images and other big files where the byte savings matter most.

Real file size comparison

Same 4032×3024 px photo, 80% quality where applicable:

For a logo at 512×512 px with transparency:

The decision tree

1. Is it a photograph? WebP @ 80-85% (or AVIF if you have the build pipeline for it). Fall back to JPG for downloads.
2. Is it a logo, icon, or screenshot? WebP-lossless or PNG.
3. Does it need transparency? WebP or PNG (not JPG).
4. Are you outputting for print? PNG or TIFF, not WebP/AVIF.

Beyond format — the other 80% of speed

Picking the right format is step 1. The bigger wins come from these:

• Resize before serving. Don't deliver a 4000 px image to a 600 px container. Use the Image Resizer to match output dimensions to actual display size.
• Use responsive images. srcset and <picture> let browsers pick the right resolution per device. Skip mobile bandwidth pain.
• Lazy-load below the fold. The browser only fetches images as they approach the viewport. Native loading="lazy" is universally supported.
• Cache aggressively. Set long Cache-Control headers (1 year+) on hashed filenames. Force update by changing the hash.
• Use a CDN. Cloudflare, Fastly or BunnyCDN. Delivers images from edge servers near the user — drops latency by 50-200ms.

How small is "small enough"?

Target sizes for web images:

• Hero/banner image: 150-300 KB. Above 500 KB hurts Largest Contentful Paint dramatically.
• Inline content image: 50-150 KB.
• Thumbnail: under 30 KB.
• Total page weight target: under 1.5 MB for fast Core Web Vitals scores.

What about animated images?

GIF is still common but it's terrible at compression — animated GIFs are often 5-10x larger than the equivalent MP4 or animated WebP. For 2026:

• Animated WebP or AVIF: smaller than GIF, supports millions of colors.
• MP4/WebM video with autoplay+muted+loop: the smallest option for actual video clips.
• GIF: only when you need universal email/Slack support.

Quick reference

• Photo on website? WebP @ 80%.
• Logo with transparency? PNG or WebP-lossless.
• Screenshot with text? PNG.
• Email attachment? JPG for photos, PNG for everything else.
• Print? PNG or TIFF.