Guides/Choosing the Right Image Format for a Website
Choosing the Right Image Format for a Website
Images are usually the heaviest thing on a web page — often more than all the text, code and styling combined — so getting them right is one of the highest-impact things you can do for a site's speed. But "getting them right" confuses a lot of people, because there are now five formats in common use and each is best at something different. The choice is not arbitrary and it is not about which format is "best" overall; it is about matching each image to the format built for its kind of content. Do that consistently and a site loads faster, ranks better and looks sharper.
Match the format to the content
The first split is photographs versus graphics. Photographs — real-world images with smooth gradients and millions of subtly different colours — belong in a lossy format: JPG traditionally, or the more efficient WebP and AVIF. These discard detail the eye cannot see and produce small files, which is exactly what a photo needs. Graphics — logos, icons, diagrams, screenshots, anything with flat colour, sharp edges or text — belong in a lossless format: PNG, or lossless WebP, which keep every edge crisp where a lossy format would smear it.
The second consideration is transparency. If an image needs to sit on a coloured or patterned background — a logo, an icon, a cut-out product shot — it needs a format that supports transparency: PNG, WebP or AVIF, never JPG (which fills transparency with solid white). And for logos and icons specifically, there is often a better answer than any of these, which is vector.
SVG for logos, icons and anything geometric
For logos, icons, simple illustrations and interface elements, SVG is usually the right choice and it is frequently overlooked. Because SVG is a vector format — it stores shapes as maths rather than pixels — it stays perfectly sharp at any size, from a tiny favicon to a full-width header, on any screen including high-resolution "retina" displays where raster images can look soft. One SVG file replaces the several sizes of PNG you would otherwise export, and it is typically tiny.
SVG is wrong for photographs (there are no clean shapes to describe) and can get heavy for very complex illustrations, but for the geometric, flat-colour graphics that make up a site's branding and interface, nothing else combines such small files with such perfect sharpness. Reach for SVG first for logos and icons; fall back to PNG only when the graphic is too detailed or comes only as a raster image.
Should you use WebP or AVIF?
For photographic content, the modern formats beat JPG substantially. WebP is roughly 25–35% smaller than JPG at the same quality and is now supported by every current browser — it is the safe modern default and switching your photos to it is one of the easiest page-weight wins available. AVIF goes further, often 50% smaller than JPG and noticeably better in dark scenes and gradients, though it is newer and encodes more slowly.
The professional approach is to serve modern formats with a fallback, so newer browsers get the small AVIF or WebP and older ones still get a JPG — HTML's `<picture>` element does this, and most website platforms and image services handle it automatically. If that is more than you want to manage, WebP alone is a safe, near-universal upgrade over JPG. The key point is that you no longer have to choose plain JPG for photos; there is almost always a smaller option that looks identical.
Format is only half the job: size and dimensions
Choosing the right format matters, but it is routinely undone by two other mistakes that waste far more bytes. The first is serving images at the wrong dimensions: uploading a 4,000-pixel-wide photo to display in a 600-pixel-wide column means the browser downloads and then throws away most of the image. Resize images to roughly the size they will actually be shown — accounting for high-resolution screens, so perhaps double the display size — before you upload them, and you often save more than any format change would.
The second is skipping compression. Even in the right format, an image straight from a camera or design tool usually has more quality than the web needs; running it through a compressor at a sensible quality setting shrinks it further with no visible difference. The winning workflow is all three together: pick the right format for the content, resize to the real display dimensions, then compress. OfficePad's convert, resize and compress tools do each step in your browser. Do all three and your images will be a fraction of their original weight while looking just as good.
Tools mentioned in this guide