During page reviews, a familiar gap appears: the hero looks polished, yet the headline, slogan, and selling points live only inside the artwork. Type is free, layers are rich, and stakeholders are pleased. Search and generative systems usually cannot read words locked in pixels, so the most important claims stay hidden.
When this is explained to site owners, the usual first reaction is doubt. Multimodal models are improving quickly, yet large-scale indexing still depends mainly on alternative text, because recognizing pixels one file at a time often costs hundreds of times more than reading a sentence.
The balance to aim for is this: keep the layout refined, and still let systems understand what each image is saying. In a site-building workflow, images and alternative text are the easiest items to skip, yet they affect citation chances the most.
What a system actually gets from an image
When a crawler or model meets an image, it usually receives these fields first:
It can read easily:
the file name (site-structure.webp)
alternative text (a description of the scene)
dimensions (a hint of visual weight)
nearby headings and paragraphs
It cannot read directly (or only at high cost):
the picture formed by pixels
copy burned into the file
color, composition, and brand tone
If the markup is only , the system can mostly guess that a file named cover is present, and little else.
Six rules for machine-friendly images
Rule 1: Key claims must be HTML text
This rule matters most: words drawn into an image are invisible to machines. Tenure, positioning, or slogans that exist only as pixels never reach search results or generated answers.
Traditional-industry sites fall into this often: history and awards become a glossy first screen, then neither search listings nor generated summaries can pick up those selling points.
A steadier pattern puts the copy back into markup:
A smart site that machines can read
Many client projects delivered, with full source handover
Product shots can use Product.image, and article heroes can use Article.image, so a system can tell what role each file plays.
Rule 6: Use figure with figcaption
When an image needs an explanation, wrap it in figure:
Topic cluster: the hub sits in the center, and surrounding pages link to each other
is treated as an extended note on the image, and it usually outweighs alt text alone. Content that must pair a picture with an explanation fits this structure especially well.
Three advanced tactics for search and visuals
Tactic 1: Offer formats via picture
Newer browsers can take the smaller AVIF file, while older ones fall back to JPG. Smaller files load faster, core web metrics are easier to pass, and systems tend to trust the site more (further reading: image compression in page layout).
Tactic 2: Declare width and height
This reduces layout shift while the page loads (CLS):
CLS is one of the core web metrics. Larger shifts mean a weaker experience, and a system may also lower the chance of citing the site.
Tactic 3: Skip lazy-load above the fold
Lazy-loading the first screen can slow the largest contentful paint, so the two cases should be handled separately.
Image checklist before delivery
Before each handoff, check the following:
Every informative image has alternative text (leave decorative ones empty)
Headlines, slogans, and action text exist as HTML
File names describe the content instead of using camera serials
Width and height are set
WebP or AVIF is preferred, with a fallback format
Product shots, heroes, and portraits include ImageObject
Explained images use figure and figcaption
Above-the-fold images are not lazy-loaded
Each file stays near 200KB when possible (heroes may go to about 500KB)
Closing: make images understandable content
Visual quality does not have to be sacrificed for machine readability. What should change is moving copy that used to be drawn into images into HTML text, plus an alternative description. Design still owns the look, and systems can understand it. Another pairing issue is how an FAQ block gets cited. Handling both together makes a page easier to understand as a whole.
Unless the work is purely an exhibition portfolio, images on a commercial site should pass the checks above. Skip one item, and the chance of being cited in a generated answer can drop.
