title: Why is the srcset attribute only working correctly when used before the src attribute in img tags
body: <p>I'm having a mystery here. The issue itself is worked around by now, but I still can't see the actual cause: On our image sharing site Pixabay.com we recently implemented the <code>srcset</code> attribute for <code>img</code> tags on search results. You can see that in action here: <a href="https://pixabay.com/photos/" rel="nofollow noreferrer">https://pixabay.com/photos/</a></p>
  
  <p>A typical <code>img</code> tag in there looked like this:</p>
  
  <pre><code>&lt;img src="/image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" alt="..."&gt;
  </code></pre>
  
  <p>It worked very well - for about 99% of all users. However, a few reported to see the issue depicted in this screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/Oghrx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oghrx.png" alt="enter image description here"></a></p>
  
  <p>Some 30-50 images loaded correctly on the page, while the others resulted in broken images. We realized, our NGINX log contained a few errors like this:</p>
  
  <pre><code>open() "/.../image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" failed (2: No such file or directory)
  </code></pre>
  
  <p>Apparently, for an unknown reason, the client requested the whole expression (value of src+"srcset"+value of srcset) as image path, which of course resulted in an error 404.</p>
  
  <p>We played around a bit and realized, first providing the <code>srcset</code> and then the <code>src</code> attribute on the <code>img</code> tags solves the issue. No more error logs, no more complaints.</p>
  
  <pre><code>&lt;img srcset="/image__180.jpg 1x, /image__340.jpg 2x" src="/image__180.jpg" alt="..."&gt;
  </code></pre>
  
  <p>I couldn't find any reports of this behavior anywhere on the web. But I'd like to learn more. Here's the discussion on Pixabay with several users reporting the issue: <a href="https://pixabay.com/en/forum/help-me-please-11/pixabay-technical-difficulties-1474/?pagi=2" rel="nofollow noreferrer">https://pixabay.com/en/forum/help-me-please-11/pixabay-technical-difficulties-1474/?pagi=2</a></p>
  
  <p>Do you have an explanation?</p>