Skip to content

← All writing

WebP vs. JPEG vs. PNG: Which Image Format, and When

· by Andergrove Software

Images are usually the heaviest thing on a web page, so the format you choose has an outsized effect on load time — and on Core Web Vitals, which Google uses as a ranking signal. Pick well and a page feels instant; pick badly and you ship megabytes you did not need to. The good news is that the decision comes down to a few simple questions.

You can re-encode and shrink any image between these formats, entirely in your browser, in the image compressor. This post is the "which one, and why."

Lossy vs. lossless in one minute

Every image format is either lossy or lossless (some do both).

  • Lossless compression stores the image exactly — decompress it and you get every original pixel back. Great for fidelity, but larger files. PNG is lossless.
  • Lossy compression throws away detail the eye is unlikely to miss, in exchange for much smaller files. JPEG is lossy. Save the same photo as JPEG at 80% quality and it can be a fifth the size of the PNG, with no visible difference.

The rule that follows: photos want lossy, graphics want lossless. A photograph has so much subtle detail that discarding a little is invisible and saves enormously. A logo, screenshot or diagram has hard edges and flat colour where lossy compression produces ugly halos — and where lossless compresses very well anyway.

The classic three

JPEG is the workhorse for photographs. It is lossy, universally supported, and its quality setting lets you trade size against fidelity. Its weaknesses: no transparency, and visible artefacts on sharp edges and text, so it is wrong for graphics.

PNG is lossless and supports transparency (including smooth, partial transparency via an alpha channel). That makes it the right choice for logos, icons, screenshots and anything that must sit cleanly over a background. The cost is size: a photograph saved as PNG is often several times larger than the JPEG. Use PNG for graphics and transparency, not for photos.

GIF is mostly a legacy format now. It is limited to 256 colours and compresses poorly; its one remaining excuse — animation — is done better by video (MP4/WebM) or by animated WebP. For a still image, PNG beats GIF on quality; for motion, a video file beats GIF on size by an order of magnitude. Reach for GIF only when a platform demands it.

WebP and AVIF: smaller at the same quality

Two modern formats do both lossy and lossless, add transparency and animation, and compress noticeably better than the classics.

  • WebP typically saves 25–35% over a JPEG at the same visual quality, and beats PNG for lossless graphics too. It supports transparency and animation, so it can replace JPEG, PNG and GIF. Support is universal in current browsers.
  • AVIF compresses even harder — often another 20% smaller than WebP on photos — and handles a wider colour range. It is now supported across current browsers, though encoding is slower and tooling is less mature.

For most sites today, WebP is the safe default: big savings, no compatibility worries. Use AVIF when you want to squeeze photos further and can spare the encode time. Because older browsers are now rare, you often no longer need a fallback, but if you must support them, the HTML <picture> element lets you offer AVIF, then WebP, then a JPEG the oldest clients understand.

Transparency and animation, decided

  • Need transparency? WebP or PNG. Use WebP for the size saving; fall back to PNG only where you truly need it.
  • Need animation? WebP or, better, a real video (MP4/WebM) — never a new GIF.
  • Neither, just a photo? WebP or AVIF, then JPEG as the old-browser floor.

A simple decision flow

  1. Is it a photograph? → WebP (or AVIF to go smaller). JPEG only if you need the widest possible compatibility.
  2. Is it a logo, icon, screenshot or diagram? → WebP lossless, or PNG if you need a fallback. Better yet, if it is a simple vector shape, use SVG — it is tiny and scales to any size.
  3. Does it need transparency? → WebP or PNG.
  4. Does it move? → a video file; animated WebP only if you must have an image.

Compress before you upload

Whatever format you choose, the other half of the win is compression and sizing. A 4000-pixel-wide photo displayed in an 800-pixel column is wasting most of its bytes; resize it to what the layout actually uses. Then compress: dropping a JPEG or WebP from 100% to ~80% quality is usually invisible and can halve the file. Doing this before you upload keeps your pages fast and your storage small.

The Andergrove image compressor re-encodes to WebP, JPEG or PNG with a quality slider and a max-width control, entirely in your browser — the image is never uploaded, which is both private and instant. Convert a folder of PNG screenshots to WebP, or shrink a phone photo before it goes into a post, and watch the size drop. Faster images are the cheapest Core Web Vitals win there is.

Open the image compressor →