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

when building responsive websites use background images render appropriate image appropriate screen size.

eg:

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

to let screen readers know kind of element dealing add

role="img" 

and

aria-label 

here question:

i've learned it's better seo add image company logo in actual image element.

eg

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

the reasoning logo show when google image searching on company name. (presuming website ranked enough)

will google still "scrape" logo when implemented div? eg

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

or still need add image somewhere desired result? google @ screen reader tags matter?

use img tag. it's better number of reasons.

when use <img />

1. when image need indexed search engine
2. if has relation content not design.
3. if image not small ( not iconic images ).
4. images can add alt , title attribute.

when use css background-image

1. images purely used design.
2. no relation content.
3. small images can play css3.
4. repeating images ( in blog author icon , date icon repeated each article etc.,).

based on list above , observations have these reasons use img tag:

1. a logo image has semantic meaning , has relation content. right thing semantical point of view.
2. google not automatically index background images, otherwise image search results filled image sprites. google hasn't officially made statement add more value div aria label, although image still have more value. (bing supposedly doesn't though)

so: it's best use img tag