How to use picture element for sharp images on mobile

Question

Picture element is getting widely and quickly spread (http://caniuse.com/#search=picture), and I think it is a great way to avoid serving oversized/undersized pictures, specially when you want to display the same picture on mobile and desktop at 100% of the viewport width.

That can be solved like this:

<img
    srcset="large.jpg  1920w, 
            medium.jpg  720w,
            small.jpg   360w"
    src="medium.jpg">

This allows the browser to be clever and decide which picture to load, but I find a problem with this approach: many mobile devices have a pixel density of 2 or more! Therefore when displaying it for 360w we would actually need the medium image if we want that image to look sharp. It could be done like this:

<picture>
   <source srcset="http://i.pinimg.com/736x/25/86/a7/2586a780c79125c4f405e75831338ad2.jpg" media="(min-width: 720px)">
   <source srcset="http://i.pinimg.com/736x/25/86/a7/2586a780c79125c4f405e75831338ad2.jpg" media="(min-width: 360px and min-resolution: 2dppx)">
   <img src="http://i.pinimg.com/736x/25/86/a7/2586a780c79125c4f405e75831338ad2.jpg">
</picture>

The problem here, in my opinion, is that this can grow as much as screen resolution grows and we lose the benefits of browser cleverly deciding the best option.

So, my question is if there is a halfway point between the two, so I can still separate between html and css.

Answer 1

The browser takes the pixel density into account when selecting an image. So a device with 360 CSS px wide viewport and a 2x pixel density would select medium.jpg. This is exactly what the w descriptor and the sizes attribute are designed to solve! Don't use picture here.

Also see https://ericportis.com/posts/2014/srcset-sizes/