Image optimisation makes an image useful, discoverable and efficient to display. It combines editorial choices about what the image explains with technical choices about dimensions, encoding and loading. A small file alone is not enough if the image is unclear or misleading.
Give the image a useful role
Choose an image that illustrates the nearby content and can be published with appropriate rights. Google’s image guidance describes how surrounding text and descriptive information help explain the subject. Use an understandable filename and alt text suited to the image’s purpose. Do not turn alternatives into lists of suburbs or keywords. Decorative images should not create unnecessary spoken content for assistive technology.
Deliver an appropriate version
Match source dimensions to realistic display needs and provide responsive alternatives where suitable. Compare compressed versions visually before release, especially for product details, diagrams and text within screenshots. Reserve image space so loading does not unexpectedly move the page. Avoid removing essential detail merely to meet a file-size target. A buyer may need a clear connector or surface finish to assess the product correctly.
Prioritise the important image correctly
Offscreen images may suit lazy loading, while a prominent image needed for Largest Contentful Paint should be discovered promptly. web.dev warns against lazy-loading the LCP image. A technical SEO review can examine loading order and crawl access together. Check actual templates, since a CMS may apply the same loading behaviour to every image regardless of its role.
Check product detail at the delivered size
Open the actual responsive image selected on a typical phone and inspect whether the relevant detail remains legible. A compressed source file may look acceptable on a large editing screen while the delivered crop hides the feature customers need. Review alternative text and nearby labels at the same time. Optimisation succeeds when the image remains informative at its real display size, not simply when a smaller file appears in a report.
A catalogue photograph example
Suppose a Perth hardware retailer uses a high-resolution photograph of a hinge. A useful implementation preserves enough detail to identify the fitting while delivering an appropriately sized preview. The alternative text describes the relevant item, and surrounding copy states the model and dimensions. A generic filename change cannot fix the wrong product photograph. Test mobile display and image availability after release; better implementation does not guarantee an image-search position or a sales increase.
Common questions
Should all images be lazy-loaded?
No. Defer suitable offscreen images, but do not delay a critical visible image whose loading determines the main content’s arrival.
Does every alt text need the page keyword?
No. Describe the relevant image content or purpose naturally. Use an empty alternative for purely decorative images where appropriate.
Terms in this guide
- Alt text — A text alternative that describes an image’s relevant content or purpose. Decorative images can use an empty alternative. It should describe the image naturally rather than repeat keywords.
- Lazy loading — Deferring an asset until it is approaching the area the visitor is viewing. Main above-the-fold imagery should be prioritised rather than delayed unnecessarily.
- Largest Contentful Paint — A loading measure that reports when the largest visible content element is rendered. Large hero images, slow delivery and render-blocking resources can delay it.
Related SEO guides
Apply this to your website
Explore Technical SEO for help planning and implementing the relevant changes, or discuss your website with Refined IT.