What will be indexed better in search engines: img tags or background-images with screenreader tags?

Question

When building responsive websites I sometimes use background images to render an appropriate image for the appropriate screen size.

eg:

    #image { 
        background-image: url(largeimage.jpg); 
    }
    @media only screen and (max-width: 320px) {
        #image { 
            background-image: url(smallimage.jpg); 
        }
    }

To let screen readers know what kind of element we are dealing with I add

role="img"

And an

aria-label

Here is my question:

I've always learned that it's better for SEO to add an image like a company logo in an actual image element.

eg

<img src="logo-companyname.png">

The reasoning is that the logo will show up when Google image searching on the company name. (presuming the website is ranked well enough)

Will Google still "scrape" the logo when implemented as a div? eg

<div id="logo-company" role="img" aria-label="company name"></div>

Or do I still need to add an image somewhere to get the desired result? Does Google do anything at all with the screen reader tags for that matter?

Answer 1

Use an img tag. It's better for a number of reasons.

When to use <img />

1. When Your Image needs to be indexed by search engine
2. If it has a relation to content not to design.
3. If your image is not too small ( not iconic images ).
4. Images where you can add alt and title attribute.

When to use CSS background-image

1. Images Purely Used to Design.
2. No Relation With Content.
3. Small Images which we can play with CSS3.
4. Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).

Based on the list above and some observations we have these reasons to use an img tag:

1. A logo image has semantic meaning and has relation to the content. So this is just the right thing to do from a semantical point of view.
2. Google does not automatically index background images, otherwise the image search results would be filled with image sprites. Google hasn't officially made a statement about this but it will most likely add more value to the div with an aria label, although an image will most likely still have more value. (Bing supposedly doesn't do anything with this though)

So: It's most likely best to use an img tag

Answer 2

2018 Status:

Google's John Mueller said in a webmaster hangout at the 20:55 mark that Google Image search does not index and rank images from CSS background code. He said if you want your images to rank in Google Image search then you best use normal image tag with the source attribute pointing at the image.

Here is a source:

Youtube

Article