A startup's pricing page showed their logo on a white box — on their own dark hero. The PNG had transparency; someone “optimized” it to JPG and the checkerboard became a white rectangle. Five minutes with a proper converter fixed a brand-damaging bug: PNG to WebP keeps transparency at a third of the bytes. This guide covers transparency-safe conversion both directions, quality picks, and the email fallback problem.
Part of the image optimization guide. Convert in the image format converter; shrink results in the image compressor. Decision background in formats guide.
PNG → WebP at 85%: the 70% shrink that keeps alpha
WebP lossless preserves every transparent pixel while cutting typical UI graphics ~70%: my test set of five logos averaged 310KB PNG → 95KB WebP, pixel-identical on diff. For photographic PNGs (screenshots with gradients), lossy WebP at 85% beats PNG by 5–8× — a 2.4MB screenshot dropped to 380KB with text still crisp. Procedure: convert one file, zoom both to 100%, toggle between them. If you cannot tell, ship the WebP. Batch the rest. Quality slider guidance: 85% default, 90%+ for tiny text under 14px, never below 75% for graphics (unlike photos, graphics show artifacts early).
WebP → JPG: when recipients demand it
Email clients, government portals and print shops often reject WebP. Converting back is safe with one rule: flatten transparency deliberately. WebP with alpha → JPG needs a background color — choose white for documents, brand color for marketing, never default black (the classic accident). Text on the flattened result deserves a 100% zoom check: lossy-on-lossy conversion softens edges twice. For email specifically, prefer JPG 80% under 200KB — many clients clip larger inline images.
Why transparent PNGs get white backgrounds (and the fix)
Three distinct causes, three fixes:
- Format conversion to JPG: expected — JPG has no alpha channel. Fix: stay PNG/WebP, or composite intentionally.
- Viewer with no transparency support: old Windows Photo Viewer shows black or white. Fix: nothing wrong with your file — verify in a browser.
- CSS background behind a transparent asset: the page, not the image. Fix: set the container background to match the design.
Diagnose by opening the file in two viewers: identical white in both means baked-in background (re-export from source); white in one only means viewer/CSS behavior. The converter shows a checkerboard preview so you see transparency before committing.
Email fallbacks and AVIF reality check
Keep a JPG/PNG copy of every WebP you ship in email campaigns — Outlook desktop and several webmails still refuse WebP in 2026, showing broken-image icons to your highest-value readers. Name pairs clearly (hero.webp + hero-fallback.jpg). AVIF converts ~20% smaller still, but encode times and spotty CMS support make it a hero-only experiment for now. Revisit yearly; the support curve moves fast. After any conversion, run the result through the compressor — format and quality multiply.
General guidance only. Always keep the transparent master — every lossy round-trip is one-way, and future formats will want the original.