For a site that shows handmade or visual work, an image is not decoration. It is the product, and often the main thing a visitor judges. Yet most of what Google documents about images is ordinary markup, and most image problems come from skipping it.
This article sets out Google’s image SEO best practices and its lazy-loading guidance, with checks you can run on a real page. Where we give our own reading, we say so. It was prompted by a recent build, Letters in Linen, a catalogue of handcrafted lettering canvases.
Why a catalogue is also an image site
Google says images can appear in several places: text result images, Google Discover and Google Images. It says the general recommendations are the same for all of them, and splits them into two groups: help Google discover and index your images, and optimise the pages the images sit on.
Images Google can find: img elements, not CSS
The documentation says standard HTML image elements help crawlers find and process images. Google can find an image in the src attribute of an <img> element, even when it sits inside another element such as <picture>. It says Google does not index CSS images, and shows a page that puts a photo in a CSS background as the bad example. Our reading: a gallery whose artwork is set as a background image is invisible to image indexing.
Alt text, file names and the text around an image
Google calls alt text the most important attribute when it comes to providing metadata for an image. It also improves accessibility for people who use screen readers or have low-bandwidth connections. The guidance is to write useful, information-rich text that uses keywords appropriately and in the context of the page, and to avoid filling the attribute with keywords, which it says gives a poor experience and may cause a site to be seen as spam. Its examples include missing alt text, a keyword-stuffed list, a single word, and a specific description of the subject and what it is doing; it rates the last as the best.
Here is a hypothetical example for a lettering canvas: “Hand-lettered canvas with the words welcome to our home in black on cream, hung above a sofa”. It names the subject and the context without listing search terms.
Google says it extracts information about an image from the page content, including captions and image titles, so images should sit near relevant text on relevant pages. File names give only very light clues, but short descriptive names are better than generic ones such as image1.jpg. For a site with thousands of images, it suggests considering automating the naming.
It also says that if an image appears on several pages, you should always use the same URL for it, so Google can cache and reuse it without requesting it again.
Responsive images and formats
Where a page uses the srcset attribute or the <picture> element, Google recommends always giving a fallback URL in the src attribute, because some browsers and crawlers do not understand the other attributes. The image formats Google Search supports in src are BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, and it is a good idea for the file extension to match the file type.
On quality and speed, it says sharp images appeal more to users in result thumbnails, but images are often the largest part of a page’s size, so apply current image optimisation and responsive techniques.
Lazy-loading without hiding images from Google
Google’s lazy-loading guidance says deferred loading is a common performance practice, but that done badly it can hide content from Google. The rule is that all relevant content should load whenever it becomes visible in the viewport. It lists browser built-in lazy-loading for images and iframes, the IntersectionObserver API, and libraries that load data when content enters the viewport, and notes that none rely on a user scrolling or clicking, which matters because Google Search does not interact with a page.
It also says not to lazy-load content likely to be visible straight away, because that slows it down in a way users notice. To test, use the URL Inspection tool and check the rendered HTML: if your image URLs appear in the src attribute, the setup works.
Choosing the preview image
Google’s choice of preview image is automated, but you can influence it with a preferred image: the schema.org primaryImageOfPage property, an image on the page’s main entity, or the og:image meta tag. It advises choosing an image that is relevant and representative, avoiding a generic image such as a site logo or an image containing text, avoiding extreme aspect ratios, and using high resolution if possible.
Our reading: the advice is general. For a business whose product is lettered artwork, the best image of the product contains text by nature, and Google’s page does not address that case. It is a judgement to make knowingly, not a rule to follow blindly.
Checking an image-led page
A routine we would use, as our reading rather than a Google procedure: view the source of a product or gallery page and confirm that each image is an <img> with a src, that the alt text describes the specific item, that the file name is descriptive, and that nothing important is a CSS background. Then run the page through the URL Inspection tool and look for the image URLs in the rendered HTML, especially for images that load lazily.
Where this fits at Cultured Digital: images in the build
Images are part of how a site is built, not a late addition. Our SEO-first websites work follows the principle of semantic HTML and real headings, with performance budgeted rather than hoped for. Our rendering guide covers JavaScript SEO and performance as one input among many, and our structured data guide covers markup designed with the content model.
The Letters in Linen project is described on its page, including alt text on its artwork images, set dimensions and lazy-loading.