Converting an image to WebP is a useful step, but it does not automatically make the website efficient. A large original can remain wasteful in a small card. Start with the placement: how big the image appears, how much detail it needs and whether it is important during the first load.
Website image optimisation starts with choosing the right dimensions for the place where an image appears. WebP compression is then a balance between file size and visible detail. Ask for a comparison at the actual display size, with descriptive alternative text and responsive variants where useful; a smaller file is only helpful if it still serves the reader.
Choose dimensions before quality
Estimate the rendered size and provide responsive candidates where useful. A mobile card should not necessarily download the largest hero file. Keep the aspect ratio explicit so the browser can reserve space. Check that the selected image remains sharp enough at the actual display size.
Inspect the compressed result
Compare gradients, fine detail and edges. Some images tolerate stronger compression than others. A dark screenshot with small text behaves differently from abstract artwork. Look at the result rather than selecting a quality number once for every asset. Keep source originals outside the production upload folder.
Prioritise the first useful image
Load the main visual promptly and defer images below the fold. Avoid making every image high priority. If artwork is purely decorative, do not let it delay the page’s useful information. Test what the browser actually requests, since the markup and layout together determine responsive selection.
Give the image a clear purpose
Use a meaningful alternative for content images and an empty alternative for decoration where appropriate. Keep generated concept art distinct from actual project screenshots. Search visibility depends on the surrounding useful content as well as the file. A compressed image is one part of the complete page.
For Rivaux Designs, the generated artwork is supplied at several widths and the public raster images use WebP. Their actual sizes are recorded so performance decisions can be inspected rather than assumed.
Explore the service and discuss your project.
Further reading: Can a beautiful animated website still be fast?.
Sources & further reading
Have a correction or a question about this article? Contact Benoit.
