Get the dimensions right
Resizing an image using CSS does not reduce the file's download size. The source image should be prepared to match the size at which it will be displayed. Serving different widths for desktop and mobile reduces unnecessary data transfer. Providing dimension information also prevents layout shifts while content loads.
What should be considered during implementation?
A prominent image visible above the fold does not share the same priority as a gallery further down the page. Do not unnecessarily delay the page's main image; load off-screen images only when needed. Choose the format based on the image type; preserving sharp edges in a brand logo requires a different approach than compressing a photograph.
Review and next steps
Don't just look at the file size after compression. Check for artifacts or distortion in text, faces, fine lines, and dark gradients. Image descriptions should convey the meaning of the photo; decorative images should not create unnecessary repetition for screen readers.
Your quick checklist
- Generate source sizes appropriate for the display.
- Prioritize the initial image.
- Visually inspect the compression.