The image format guide

There are two fundamentally different ways to store an image. A raster format stores a grid of pixels — each pixel's colour is recorded explicitly. JPG, PNG, WebP, AVIF and HEIC are all raster formats. A vector format stores instructions — lines, curves, shapes, fills. SVG is the only mainstream vector format on the web.

The difference matters when you scale the image. A 100×100 raster logo looks crisp at 100×100, blurry at 300×300, and pixellated at 2000×2000 — you only have 10,000 pixels to work with. A vector logo describes itself with mathematical curves and looks crisp at any size from a smartwatch favicon to a 4K billboard.

The rule: use vector (SVG) for any image with clear geometric structure — logos, icons, illustrations, charts, UI graphics. Use raster (JPG / WebP / AVIF) for photographs and anything that doesn't have clean vector shapes. PNG sits in the middle: raster, but designed to be used for the kind of graphic content where SVG isn't an option.

Image compression algorithms come in two flavours. Lossless compression stores every pixel exactly — decoding the file produces a bit-identical copy of the original. PNG and (lossless) WebP are the main lossless raster formats; SVG is also lossless by nature.

Lossy compression discards data the human eye is unlikely to notice. JPG, WebP (lossy mode), AVIF and HEIC are all lossy. The trade-off is dramatic: a lossy JPG of a photograph is typically 10–20× smaller than the same image as a lossless PNG, with no visible quality difference at normal viewing sizes.

The rule: use lossy compression for photographs (the eye doesn't notice subtle changes in millions of pixels). Use lossless for graphics, screenshots, line art and anything with sharp edges where any artefact would be visible. Re-encoding a lossy image compounds quality loss — keep editing sources in a lossless format and only export to lossy when you publish.

Image weight is the single biggest factor in web-page performance. Google's Core Web Vitals — Largest Contentful Paint (LCP) in particular — are dominated by the hero image on most pages. A slow LCP hurts both rankings (Google has used Core Web Vitals as a ranking signal since 2021) and conversion (every additional second of LCP costs visible bounce rate).

The fastest win on most sites is migrating photographic content from JPG to WebP — typically a 25–35% reduction in image bytes with no visible quality change. The next win is making sure graphics aren't shipped as PNG when SVG or lossless WebP would do. The third is right-sizing: most sites still serve 4000-pixel originals when they only render at 1200 pixels.

The website image optimiser audits a folder of images and applies these three optimisations automatically — typically cutting total image weight by 60–80%.