JPG, PNG or WebP: choosing the right image format for the job

What is it?Needs transparency?Photograph?Text-heavyscreenshot?WebP (or PNG for legacy)JPG can't do transparencyWebP first, JPG for compat31–57% smaller, measuredPNG — pixel-perfect text1.7x JPG, keeps text crisp

Format advice is usually folklore. We measured ours with the same encoders these tools use, so this guide's claims come with numbers.

Question 1 — Does it need transparency?

JPG has no alpha channel: converting a transparent logo to JPG flattens it onto a background, permanently. Keep transparency in PNG (universal) or WebP (smaller). This is the one rule with no exceptions.

Question 2 — Is it a photograph?

Never PNG. In our format study the photo was 1,022 KB as PNG versus 43 KB as JPG-85 — about 24 times larger for no visible benefit. Between the lossy pair, WebP came out 31% smaller than JPG on that same photo, and it beat JPG on every content type we tested. Use JPG to WebP when the destination is modern; fall back to JPG for maximum compatibility (email clients, old CMSes, government portals).

Question 3 — Is it a text-heavy screenshot?

The surprise in our data: on a text-heavy screenshot lossless PNG (176 KB) cost only about 1.7x the JPG-85 file (105 KB) — a far smaller premium than the 24x it costs on a photo — and JPG text always carries faint compression fuzz. For UI screenshots, receipts and anything someone will zoom into, PNG is the honest choice; WebP at quality 90 splits the difference when size matters.

Practical rules

  • Sending photos by email? JPG or WebP at quality ~70 — see the Compress Image goal presets.
  • Website images? WebP everywhere current browsers are the audience; the savings are 30%+ for free.
  • Editing later? Keep a lossless master (PNG or the original) — every lossy re-save stacks damage.
  • AVIF compresses better still, but browsers cannot encode it from a canvas at all — we measured that too, which is why we convert from AVIF and offer no convert-to-AVIF tool.

Tools used in this guide

Advertisements

← All guides · corrections: editorial policy