Image file formats explained — when to use PNG, JPEG, WebP, AVIF, or SVG

JPEG — photographs

JPEG is a lossy format designed for photographs. It compresses by averaging nearby pixels, which works well for natural scenes (where no two adjacent pixels are the same) and badly for sharp edges (where the averaging shows up as artefacts). Use JPEG for: photographs, complex gradients, anything with millions of colours. Do not use JPEG for: screenshots, line art, anything with text — the edges will look fuzzy.

PNG — screenshots and line art

PNG is a lossless format that supports transparency. It is the right choice for screenshots, icons, logos, and any image where the edges matter. The file size is larger than JPEG for photographs, but the lack of artefacts at sharp edges is worth it. Use PNG for: screenshots, logos, anything with text. The free image-to-Base64 tool on this site will encode a PNG to a data URL for inline embedding.

WebP — the modern default for the web

WebP is a newer format from Google that produces smaller files than JPEG or PNG at equivalent visual quality. It supports both lossy and lossless compression, plus transparency and animation. Browser support is now universal (all major browsers since 2020). Use WebP as the default for any raster image on a web page. The free image-to-Base64 tool on this site can encode WebP too.

AVIF — the next step

AVIF is the newest format, based on the AV1 video codec. It produces even smaller files than WebP at equivalent quality and supports the same features. Browser support is good (all major browsers since 2022) but not quite universal. Use AVIF when you can, with WebP as the fallback. The `<picture>` element lets you serve both: AVIF first, WebP for browsers that don't support AVIF yet.

SVG — vector graphics

SVG is a text format (XML) for vector graphics — shapes defined by coordinates, not pixels. SVGs are infinitely scalable, look sharp on any display, and are usually smaller than raster equivalents for line art, icons, and simple illustrations. Use SVG for: logos, icons, illustrations, charts, anything that could be drawn in Illustrator. The free SVG-to-PNG converter on this site can rasterise an SVG at any size if you need a fallback.

The modern default

For photographs: JPEG (or WebP if you control the markup, or AVIF for the best compression). For screenshots, logos, and line art: PNG (or WebP). For icons and illustrations: SVG. For everything on a web page: WebP or AVIF with a `<picture>` element and a fallback. If in doubt, the free image-to-Base64 tool on this site will let you preview any format before you commit.