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.

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

  1. PNG (Portable Network Graphics) Specification, Third Edition — W3C (accessed 2026-07-05)
  2. Scalable Vector Graphics (SVG) 1.1 Specification — W3C (accessed 2026-07-05)