Web Tools · image optimization
Image optimization: formats, compression and responsive sizes
How to choose a practical image format, serve the right width and protect the visual idea while reducing transfer weight.
The useful version of a web practice is the one that can be repeated by someone else. This note keeps the scope tight, names the trade-offs and ends with a way to check the result. Continue with the image optimization index or meet the Sites To Use editorial desk behind the notes.
Choose the job before the format
A photograph, a sharp interface capture and a flat mark do not have the same compression problem. Describe the image first, then choose a format that preserves the part people need to read. Modern formats can reduce weight, but a smaller file is not automatically a better image if text or edges become brittle.
Keep an original outside the delivery folder. The delivery version should be reproducible from a known width, quality setting and crop, so a later refresh does not depend on memory.
Make width do the work
Most wasted bytes arrive because a mobile visitor receives a desktop image. Create a small set of meaningful widths and let the browser choose through srcset and sizes. The sizes value should describe the actual layout, not the width of the source file.
Art direction is different from resolution switching: use picture sources when the crop itself needs to change. That keeps the subject legible without asking one image to fit every context.
Inspect the result in context
Check the rendered image on a narrow screen, a normal laptop and a high-density display. Look for halos, muddy type and a crop that hides the subject. Record file size alongside the visual decision. The goal is a fast page that still feels intentional.
