A client sent me their new logo as a 2.1MB PNG and asked why the site felt slow. Same logo as JPG: 380KB but the transparent background turned white and text edges blurred. As WebP lossless: 410KB, transparent, crisp. Three formats, same pixels, 5× size spread — format choice beats quality sliders for graphics. This guide gives the decision rules I use on every project, with the transparency trap explained once and for all.
Part of the image optimization guide. Convert in the image format converter; shrink results in the image compressor. The 80% rule lives in the pillar.
The decision tree (30 seconds per image)
- Is it a photo? → JPG 80% or WebP 80%. Done.
- Does it need transparency? → PNG or WebP lossless. Never JPG.
- Does it contain text or line art? → PNG first, then try WebP lossless. Compare at 100% zoom.
- Is it displayed over 2000px wide? → WebP 85% regardless — the 30% saving compounds at large sizes.
- Is it an email attachment? → JPG/PNG only. Some mail clients still refuse WebP.
The transparency trap (checkerboard means danger)
That gray checkerboard in your editor is not a background — it is the absence of one. Export to JPG and the converter must invent pixels: usually white, sometimes black, occasionally a mood. Transparent logos on dark website sections turn into white boxes — the #1 format embarrassment I review. Rules: checkered areas + JPG = damage; checkered areas + PNG/WebP = safe. If a platform demands JPG (some portals do), composite onto white yourself first so you control the result instead of discovering it. Test conversions in the format converter with the checkerboard preview on.
Photo tests: same image, four formats
I ran one 4.2MB phone photo through every pipeline at visually-lossless settings:
| Format | Size | Notes |
|---|---|---|
| JPG 80% | 900KB | Universal, email-safe |
| WebP 80% | 640KB | ~30% smaller, modern browsers |
| PNG | 6.1MB | Bigger than original — never for photos |
| WebP lossless | 2.4MB | Pointless for photos, perfect for logos |
Two lessons: PNG on photos is actively harmful (6.1MB!), and WebP's ~30% edge is free money wherever browser support allows. For hero images, serve WebP with JPG fallback via <picture> — one extra markup block, permanent savings.
Logos, screenshots and the AVIF question
Logos: vector SVG first (see SVG optimization), PNG/WebP fallback for email and social. Screenshots with text: PNG, then WebP-lossless trial — JPG blurs 12px UI text into mush. AVIF in 2026: ~20% better than WebP on photos, slow to encode, spotty CMS support. Adopt for heroes you fully control; WebP remains the pragmatic default everywhere else. After converting, always compress the result — format and quality are multiplicative wins, as resizing first compounds both.
General guidance only. Verify transparency and text sharpness at 100% zoom after every conversion — thumbnails lie.