Is there any SEO benefits for using <img> vs background CSS


#1

Hey folks,
We have used background images in the listing cards in website. But now I am just wondering is it going to affect the SEO.


#2

Hi martinzzzz welcome to the forum

What gives you the idea it might affect SEO?


#3

I received a report from the team who’s doing seo for our website asking to change all the images to img instead of background image.


#4

Perhaps you should ask them why? As a rough rule, if they are part of the content then, yes, they should be images. If they’re just eye candy, then they should be background images.


#5

I’ve never heard anybody make this claim before, I’d just go with Gandalf’s take on it.

I’ve always seen that as the only logical way, unless it’s a special case where the site has been built in a funky fashion.


#6

My guess is that they are looking at <img> tags as a place to put keywords into the alt attribute. Background images don’t have alt attributes to stick keywords into.

Of course the alt attribute is meant to be a place for a description of the image, not keyword stuffing.

As posted by others, if an image is part of the content, then yes, have it in an <img> tag. If the image is decorative, then have it as a background.

For example:

.top_div { 
  background-image: url(nice-weather.jpg); 
} 

is better than

<img src="nice-weather.jpg" alt="cheap, high quality, widgets"> 

which if important content would be better something like

<img src="nice-weather.jpg" alt="picture of cloudless blue sky"> 

#7

Hi Martin,

Its better to use if you want your images to affect SEO positively. As you might know that Google can’t crawl / read images in its natural form (Google don’t have real eyes) but they can crawl the alt tag associated with images to know exactly what that image depicts. So better to use with proper and relevant alt tag so that Google can assign some positive value to your page.

Hope it will be helpful.

Best,
Deepak


#8

But only if those images are part of the content, rather than purely decorative, as @gandalf458 explained.

The purpose of alternative (alt) text is to provide a description for those unable to view the actual image, for whatever reason. It may be because the image has failed to load, because they’ve turned off images to conserve bandwidth, because they’re visually impaired and using assistive technology, or whatever.

If you’ve turned off images, and instead you see lots of keyword-stuffed alt text, it will probably lower your opinion of the site a bit, but you’ll be able to skim over it and ignore it to some extent. Imagine you’re using a screen reader, and every time it encounters a decorative image it reads out pointless alt text. Would you consider that a good - or even acceptable - user experience?

If the image is part of the content, then well-crafted alt text can be useful for search engines and human visitors alike, but it is not a feature to be abused for SEO purposes.

https://webaim.org/techniques/alttext/


#9

I don’t think so. Can you explain the reasons of your concern about affecting SEO by it?:slightly_smiling_face:


#10

I don’t think it can affect SEO somehow.


#11

Well said, Alt text is meant for people who can’t view the image for whatever reason. But at the same time Google reads ALTs to know what kind of image you are providing. I am not advocating using bogus Alt with keywords but I am suggesting to have descriptive text to understand the image better (for humans and google both). It should not be misused for SEO purposes. But no one can deny about image SEO when you have enough content to support your media files on the page.


#13

Background images and images displayed in img form are handled differently by Google. By changing the structure to img and optimizing the image name and adding alt and title attributes to the image improve the changes of the image ranking in image search which would improve the changes of people finding your site. I think that’s where they are coming from. I hope that helps!


#14

You are missing the point already made a few times above and that is a background image is just ‘eye candy’ and as such has no value to search engines. Why would a search engine need to know that your background is a nice red stripe (or whatever).

If however you are incorrectly coding html and putting images that are important to the page content in background images then yes they should be placed using an img tag instead with an appropriate alt attribute (it’s not a tag as others have mentioned ;)).

Once again it boils down to doing things the right way from the start and the SEO will take care of itself :slight_smile:

Code for people not search engines.


#15

Hi Paul - I apologize as I missed that item mentioned above. I agree with you.