Responsive Images with HTML picture

tips & tricks
12

You do not know what you talk about and hasn’t understood the specification. A great many here use img srcset and I assure you it does choose the smallest picture with a resolution equal or higher to the viewport. If it does not, then you mess up the code, as it happened to me once (the sizes attribute).
Now, about pixel density, I don’t think worrying about makes any sense but what you need is this:

<img sizes="(min-width: 1200px),
            (max-width: 1199px),
            (max-width: 380px)"
     srcset="/img/blog/responsive-images-lg.png 1x,
             /img/blog/responsive-images-lg@2x.png 2x,
             /img/blog/responsive-images-md.png 1x,
             /img/blog/responsive-images-md@2x.png 2x,
             /img/blog/responsive-images-sm.png 1x,
             /img/blog/responsive-images-sm@2x.png 2x"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">