How to prepare website images without losing useful detail

Image optimisation starts with choosing a suitable size and crop. Sending a full camera file to every visitor can add unnecessary weight, while aggressive compression can remove detail customers need to see.

Keep an original copy

Store the original away from the publishing folder. Work on a copy and use a clear naming convention. This lets you make another crop later without repeatedly compressing the same file.

Match the intended display

Ask the developer for the image's likely display dimensions and responsive requirements. Prepare a crop that preserves the useful subject. A banner and a project thumbnail may need different crops of the same photograph. Inspect each at the size it will actually appear.

Compare format and quality

Export a few reasonable variants and compare their file sizes and appearance. Use the format appropriate to the image and browser needs. MDN describes selecting formats, compression and suitable image sizes as parts of multimedia optimisation. Do not assume a single quality setting suits every photo or logo.

Check loading behaviour

Ask the developer to reserve the image's dimensions so the surrounding layout does not jump as it loads. Images lower down the page may be lazy-loaded; the prominent image needed immediately should be considered separately. Test the actual page rather than judging files in isolation.

Review the result on a phone

Look at edges, faces, small lettering and the subject you want customers to inspect. If important detail is blurred, choose another size or quality. If an image adds no useful information, removing it may be better than squeezing it further.

Keep a small asset record with original filename, published filename, purpose and permission. Include alternative text as a separate editorial decision. At handover, retain the originals and explain how new images should be prepared so later content changes do not undo the optimisation.

Practical guidance with illustrative examples. Read our editorial standards or send a correction.