Reference
Image and SVG Format Reference
A concise reference for the PNG, JPEG, WebP and AVIF containers and for SVG, including what each is good at.
Every image on the web is a container plus a payload. Knowing which container you have explains what a tool can and cannot do with it.
01Common containers
- PNG — lossless, supports transparency, ideal for screenshots and UI assets.
- JPEG — lossy, no transparency, universally supported for photographs.
- WebP — lossy or lossless, supports transparency and usually beats JPEG at the same quality.
- AVIF — a modern lossy format; decoding is broad but encoding depends on the browser.
- SVG — vector markup, resolution-independent, but can carry scripts and external references.
02Metadata is optional
EXIF, IPTC and XMP blocks are optional. A viewer should report only the fields that are present and say so plainly when they are absent, never inventing values.
03Why formats matter
Converting between lossy and lossless formats always re-encodes pixels. Choose the smallest format that keeps the quality you need, and measure the result rather than assuming it shrank.
Limitations
This reference covers the common containers only; AVIF encoding support varies by browser and build, and format support is not a guarantee of quality.
Frequently asked questions
- Is AVIF always smaller?
- Often, but not always, and only if your browser can encode it. The tools report the real output size.
- Does JPEG support transparency?
- No. Choose PNG or WebP when you need a transparent background.
Sources
- PNG (Portable Network Graphics) Specification, Third Edition — W3C (accessed 2026-07-05)
- Scalable Vector Graphics (SVG) 1.1 Specification — W3C (accessed 2026-07-05)
Test this in your browser
The tool runs entirely in your browser; the input you use never leaves it.
About the author
Gampangin builds and maintains free, browser-based developer tools and the documentation that makes them trustworthy. The organization is accountable for every page published on this site.