Your site could be hiding images from Google - check this CSS mistake

Google’s Search Relations team is reminding developers that images added only through CSS background properties are invisible to Google Image Search. The warning came during an April 2024 Search Off the Record podcast.

Why CSS background images are skipped

Google’s crawler reads the Document Object Model (DOM) to decide which images to index. Pictures introduced via CSS never appear in the DOM, so they are treated as decorative elements and excluded from image indexing.

Key takeaways from the podcast

• John Mueller cited a case where a developer replaced every <img> tag with CSS background images, eliminating those visuals from search results.
• Martin Splitt confirmed that Googlebot cannot see images that live only in style sheets.
• The team advised keeping decorative visuals in CSS but placing any meaningful photo, chart or graphic in HTML.
• Stock photos can stay in HTML; although duplication might limit ranking, indexing and accessibility still improve.
• Industries such as real estate, news and retail risk losing visibility if product or story images reside solely in CSS.

Best practices

Google’s Image best practices recommend:

• Using semantic HTML (<img> or <picture>) for every content-relevant image.
• Adding descriptive alt text for accessibility and richer indexing signals.
• Separating content from presentation - keep decorative imagery in CSS, but surface meaningful visuals in the HTML structure.

Why marketers should care

Images drive clicks from Google Images, Google Discover and rich results. If key visuals are hidden in CSS, pages miss out on traffic, product exposure and accessibility compliance. Reviewing templates and ensuring that all important graphics use proper HTML tags can safeguard search visibility.

Sources

The information above is drawn from Google’s 18 April 2024 Search Off the Record podcast and the company’s official Image best practices documentation.