A useful website image needs to look good in its final setting and arrive without making the page unnecessarily heavy. The starting point is the role of the image: evidence of your work, an explanation of a product, a team introduction, or atmosphere around a clear message.
Choose the image for its job
A full-width hero needs a different crop from a small article thumbnail. Check whether the subject survives a narrow mobile crop and whether any text will sit over the image. Ask for an alternative photo when the composition cannot support the layout.
Use photography you own or have permission to use, and keep a record of any licence or attribution requirements. Do not remove a watermark and assume that makes an image suitable for publication.
Prepare files for their display size
Avoid sending an untouched camera original to a small card. Export a suitable size and compare compression levels at the size the visitor will see. Preserve enough detail for the purpose: a product close-up may need more fidelity than a softly layered background.
Keep an editable original separately. This gives the team room to create another crop later without repeatedly compressing the same file. Use descriptive filenames that help you recognise the asset in the media library.
Let the browser choose suitable files
Responsive image markup can offer different file sizes for different display conditions. Reserve the image’s dimensions or aspect ratio so the layout knows how much space it needs before the file arrives.
Prioritise the important opening image and consider deferred loading for images farther down the page. Loading every image immediately can compete with the content a visitor needs first; deferring the main visual can also create an avoidable wait. Review the actual page rather than applying one rule to every image.
Review the final composition
Check the image on a phone and a desktop. Look for awkward cropping, unreadable overlaid text, and visible joins where a photograph meets a background. If a gradient is used to blend an edge, make sure it does not conceal the important subject.
Add useful alternative text when the image conveys information. Decorative imagery may need an empty alternative instead. Describe the function and meaning in context rather than stuffing keywords into the description.
Website image preparation checklist
- Image choice supports a specific purpose
- Desktop and mobile crops both work
- File size suits the displayed area
- Image space is reserved before loading
- Alternative text matches the image’s role
Further reading
Check images alongside navigation and forms with our mobile website design checklist. For a rebuild that brings content, layout, and image choices together, explore our website redesign service.
