Google Search Relations clarified on this week’s Search Off the Record podcast that images delivered through CSS background-image properties are invisible to Google Image Search. Developers should use HTML <img> or <picture> tags for any graphic that needs to rank in image results.
CSS background images not indexed by Google
Search advocate John Mueller explained that Google builds its image index from elements present in the rendered Document Object Model. A graphic loaded via background-image has no corresponding <img> or <picture> element, so the crawler ignores it.
- Google Image Search indexes only images that exist as HTML elements after rendering.
- Accepted elements include
<img>and<picture>. - CSS-driven graphics do not pass alt text or structured data.
- Real estate, news, and retail sites risk losing search traffic if core visuals remain in CSS.
- Decorative patterns, gradients, and shapes can stay in stylesheets.
- The advice mirrors guidance in Search Central’s Images best practices.
- The same rules apply to stock photography.
- No changes are required for favicons or Apple touch icons.
- Lazy-loaded images remain fine as long as the final DOM contains an
<img>element. - SVG files set as backgrounds are also excluded from indexing.
Google has no plans to automatically promote background images into the index, treating them like fonts or color definitions.
Background: Google image crawling and accessibility
Google’s 2023 Search Central documentation states that the crawler relies on HTML markup to understand images, including alt text, size, and placement. CSS backgrounds lack these signals and cannot surface in Google Images, Google Shopping, or Discover.
The same limitation harms accessibility because screen readers ignore CSS backgrounds. The Search Relations team noted that modern formats such as WebP and AVIF can be served through the <picture> element while still appearing in the DOM.
Developers using JavaScript to inject inline styles face the same constraint. If a script writes <div style="background-image:…">, Google still sees no image element, and server side or hybrid rendering does not change that outcome.
Site owners should audit templates, especially single-page applications and CSS frameworks, to ensure product or article photos appear as <img> elements after all scripts run. Doing so enables alt text, lazy loading, and structured data.
Mueller added that descriptive alt text remains essential. Without it, even correctly tagged photos may underperform in search results.
.svg)
.svg)
.svg)