A photo uploaded straight from a phone may contain far more pixels than a product card needs. The browser still downloads the file even when displaying it at a small size. Image optimisation starts before upload: decide what the picture communicates and where it will appear. You do not have to sacrifice clarity to avoid unnecessarily large files.
Match dimensions to the display
A thumbnail and a presentation image have different needs. Generate appropriate variants and let the browser select through responsive image markup. A CSS width alone does not shrink the downloaded file. Consider screen density without exporting maximum resolution for every context. Keep the original separately for future editing.
Choose a format for the content
Photographs, transparent illustrations and logos have different structures. Compare WebP or AVIF with conventional options while maintaining required compatibility. For simple graphics, a safely prepared SVG can work well. Do not accept unprocessed SVG uploads from users: the format can contain more than shapes. Export only necessary information and inspect compression results visually.
Prioritise the important image
The main image visible immediately should not automatically be delayed with lazy loading. Images far down the page can load when relevant. Giving every resource high priority removes the value of the signal. Check which element affects perceived loading on mobile rather than assuming it is always the hero photograph.
Reserve the space
Specify dimensions or a suitable aspect ratio so that text and buttons do not jump when an image appears. Use consistent cropping for cards and check the subject on narrow screens. A face or important product detail should not be cut off merely to fit a template. Visual stability is part of the loading experience.
Describe useful information
Alternative text should communicate what matters when the image cannot be seen. Decorative images can use empty alternative text. Avoid stuffing keywords or repeating a complete heading in every description. Check the page with images disabled: product, price and action should still make sense. Important words should not exist only as pixels.
Sources and further reading
A CloudCity editorial guide informed by the documentation below. Check the official source for rules and procedures that may change.
