In a recent Search Off the Record podcast, Google’s Search Relations team cautioned developers against using CSS for all website images.
While CSS background images can enhance visual design, they’re invisible to Google Image Search. This could lead to missed opportunities in image indexing and search visibility.
Here’s what Google’s Search Advocates advise.
The CSS Image Problem
During the episode, John Mueller shared a recurring issue:
“I had someone ping me I think last week or a week before on social media: “It looks like my developer has decided to use CSS for all of the images because they believe it’s better.” Does this work?”
According to the Google team, this approach stems from a misunderstanding of how search engines interpret images.
When visuals are added via CSS background properties instead of standard HTML image tags, they may not appear in the page’s DOM, and therefore can’t be indexed.
As Martin Splitt explained:
“If you have a content image, if the image is part of the content… you want an
img, an image tag or apicturetag that actually has the actual image as part of the DOM because you want us to see like ah so this page has this image that is not just decoration. It is part of the content and then image search can pick it up.”
Content vs. Decoration
The difference between a content image and a decorative image is whether it adds meaning or is purely cosmetic.
Decorative images, such as patterned backgrounds, atmospheric effects, or animations, can be safely implemented using CSS.
When the image conveys meaning or is referenced in the content, CSS is a poor fit.
Splitt offered the following example:
“If I have a blog post about this specific landscape and I want to like tell people like look at this amazing panoramic view of the landscape here and then it’s a background image… the problem is the content specifically references this image, but it doesn’t have the image as part of the content.”
In such cases, placing the image in HTML using the img or picture tag ensures it’s understood as part of the page’s content and eligible for indexing in Google Image Search.
What Makes CSS Images Invisible?
Splitt explained why this happens:
“For a user looking at the browser, what are you talking about, Martin? The image is right there. But if you look at the DOM, it absolutely isn’t there. It is just a CSS thing that has been loaded to style the page.”
Because Google parses the DOM to determine content structure, images styled purely through CSS are often overlooked, especially if they aren’t included as actual HTML elements.
This distinction reflects a broader web development principle.
Splitt adds:
“There is ideally a separation between the way the site looks and what the content is.”
What About Stock Photos?
The team addressed the use of stock photos, which are sometimes added for visual appeal rather than original content.
Splitt says:
“The meaning is still like this image is not mine. It’s a stock image that we bought or licensed but it is still part of the content,” the team noted.
While these images may not rank highly due to duplication, implementing them in HTML still helps ensure proper indexing and improves accessibility.
Why This Matters
The team highlighted several examples where improper implementation could reduce visibility:
- Real estate listings: Home photos used as background images won’t show up in relevant image search queries.
- News articles: Charts or infographics added via CSS can’t be indexed, weakening discoverability.
- E-commerce sites: Product images embedded in background styles may not appear in shopping-related searches.
What To Do Next
Google’s comments indicate that you should follow these best practices:
- Use HTML (
imgorpicture) tags for any image that conveys content or is referenced on the page. - Reserve CSS backgrounds for decorative visuals that don’t carry meaning.
- If users might expect to find an image via search, it should be in the HTML.
- Proper implementation helps not only with SEO, but also with accessibility tools and screen readers.
Looking Ahead
Publishers should be mindful of how images are implemented.
While CSS is a powerful tool for design, using it to deliver content-related images may conflict with best practices for indexing, accessibility, and long-term SEO strategy.
Listen to the full podcast episode below:
Featured Image: Roman Samborskyi/Shutterstock