title: What will be indexed better in search engines: img tags or background-images with screenreader tags?
body: <p>When building responsive websites I sometimes use background images to render an appropriate image for the appropriate screen size. </p>
  
  <p>eg:</p>
  
  <pre><code>    #image { 
          background-image: url(largeimage.jpg); 
      }
      @media only screen and (max-width: 320px) {
          #image { 
              background-image: url(smallimage.jpg); 
          }
      }
  </code></pre>
  
  <p>To let screen readers know what kind of element we are dealing with I add</p>
  
  <pre><code>role="img"
  </code></pre>
  
  <p>And an </p>
  
  <pre><code>aria-label
  </code></pre>
  
  <p>Here is my question:</p>
  
  <p>I've always learned that it's better for SEO to add an image like a company logo in an actual image element. </p>
  
  <p>eg</p>
  
  <pre><code>&lt;img src="logo-companyname.png"&gt;
  </code></pre>
  
  <p>The reasoning is that the logo will show up when Google image searching on the company name. (presuming the website is ranked well enough)</p>
  
  <p>Will Google still "scrape" the logo when implemented as a div? eg</p>
  
  <pre><code>&lt;div id="logo-company" role="img" aria-label="company name"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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? </p>