Images are usually the largest thing you ship to a browser and the part of the stack that gets the least engineering attention. They are also the one asset class that can create a legal problem months after launch. Three decisions cover most of it: the format, the weight, and the license.
Pick the Format Before You Optimize
Compression settings cannot rescue a format that was wrong for the content. Photographs belong in a lossy format, flat graphics with hard edges and few colors belong in PNG or SVG, and anything that needs to scale cleanly at any size belongs in SVG.
AVIF and WebP both beat JPEG and PNG at equivalent quality, with AVIF usually smaller and slower to encode. Both are safe to serve today behind a <picture> element with a JPEG or PNG fallback, which costs you a few lines of markup and removes the browser support question entirely.
SVG deserves a special mention because it is text. It compresses with gzip like any other text asset, it stays sharp at every density, and it can be inlined to remove a request. It is also the format most often shipped straight out of a design tool with editor metadata still inside, which can double its size before a single pixel renders. A rundown of each format and where it fits is in this guide to image formats for the web.
Weight Is a Layout Problem, Not Just a Compression Problem
The most common waste is not weak compression, it is serving a 3000 pixel wide image into a 600 pixel wide slot. Resize to the largest size you actually display, then use srcset and sizes so a phone never downloads the desktop asset.
The rest of the list is short and mechanical. Lazy load anything below the fold and never lazy load your hero, because that delays the very paint you are being measured on. Always set width and height (or an aspect ratio) so the browser reserves the space and your layout does not jump while images arrive. Serve through a CDN that can transform on the fly if you have one, since the correct variant generated at request time beats a build step that guesses.
Measure after each change rather than trusting a rule of thumb. Image weight is where most sites lose their mobile performance score, and it is also the easiest score to win back. The full sequence is written up in this walkthrough of optimizing images for a website.
The License Check Nobody Budgets For
The engineering side is only half the job. Every image you ship arrived under a license, and "I found it in a free image search" is not one.
Public domain and CC0 are the clean cases, use them for anything with nothing owed. Royalty free is a pricing model rather than a rights model, so restrictions can still apply even when the download cost nothing. The Creative Commons conditions, attribution, non commercial, share alike, are legally binding, and a missing credit line turns a perfectly legal image into an infringing one. On top of all of that sits the release question, which applies whenever a recognizable person, artwork or branded product is in the frame.
The practical fix is a habit, not a policy document: record the source URL and the license next to the file when you download it. Six months later nobody remembers where the header image came from, and an attribution you cannot reconstruct is an attribution you cannot honor. Each license type is explained in plain language in this breakdown of image license types.
A Short Checklist
Before an image ships: correct format for the content type, resized to the largest displayed size, compressed, srcset in place, dimensions set, lazy loaded unless it is the hero, real alt text written, and the license plus source recorded somewhere you will find again.
None of that is difficult. It is just eight small decisions that usually get made by default instead of on purpose, and defaults are what make pages slow and legal reviews unpleasant.
Top comments (0)