Reference
Image Format Guide
PNG, WebP, AVIF, and JPG — capabilities, trade-offs, and when to use each.
| Format | Transparency | Lossy | Relative size | Tool support |
|---|---|---|---|---|
| PNG | Yes | No | 100% | Universal |
| WebP | Yes | Yes | ~30% | Very wide |
| AVIF | Yes | Yes | ~15% | Modern tools |
| JPG | No | Yes | ~25% | Universal |
PNG
Lossless compression with full alpha channel support. The safest choice for any workflow — every tool handles PNG correctly. Large file sizes relative to WebP and AVIF. Use for source files, print production, and when you don't control the recipient's software.
WebP
Google's lossy (and lossless) format with transparency support. 60–80% smaller than PNG at comparable quality. Excellent browser support. Growing support in design tools — Figma yes, Photoshop yes (recent versions), Canva yes, InDesign limited. Use for web publishing.
AVIF
Based on the AV1 codec. Smallest files at equivalent quality. Transparency supported (but encoder must not premultiply — NSS handles this correctly). Limited design tool support. Use for modern web publishing where you control the pipeline.
JPG
No transparency support — transparent areas are composited onto a background before encoding. Universal tool support. Use for social media sharing, email, and anywhere transparency isn't needed and file size matters.