Image optimization: formats, compression and responsive sizes

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.

Design a delivery matrix before exporting

Inventory images by job rather than by folder. A photographic hero, product cut-out, interface screenshot, logo and small editorial card each need different treatment. Record the master file, intended crop, transparency, maximum rendered width and places where text or fine edges must survive. From that list, define a limited width ladder that matches real layout slots. The browser can then select an appropriate candidate instead of receiving the largest source on every screen.

Use srcset and sizes when the composition stays the same and only resolution changes. Use picture when the subject needs a different crop or format for a particular layout. Add intrinsic width and height so the browser reserves space before the file arrives. Keep a durable original outside the public directory and store the conversion settings in a script or manifest. Reproducibility matters more than remembering which quality slider looked acceptable six months ago.

Compare optimizers on repeatability, not one demo

Test a prospective service with a small but representative pack: a dark photograph, skin tones, foliage, transparent graphics, a screenshot with text and an image that will be cropped. Compare visual output at the dimensions actually used on the site, then record bytes, processing time and any metadata removed. Inspect whether the service can preserve filenames and alt-text workflows, generate responsive variants and reject an output that exceeds a defined budget.

For a commercial decision, check batch limits, API and command-line access, storage policy, geographic processing, supported input sizes, retry behaviour and the ability to reproduce an old preset. Price the expected monthly transformations rather than the headline subscription. Include overage, bandwidth, team seats, renewal terms and the effort required to leave. A local tool may suit a stable catalogue; an API can earn its cost when assets arrive continuously from several editors. The same buying discipline applies when the purchase is a person rather than a service: an outside search specialist should be judged on evidence you can reproduce, not on a demo. Our checklist on the checks to run before hiring an SEO consultant keeps that comparison honest.