The srcset
with the sizes
attribute is definitely the way to go to create responsive, flexibel, adaptive images.
Unfortunately there is no way to tell the browser, that a specific image doesn't gain much perceived quality with a higher density or that image quality of a specific image isn't important for the user experience.
Due to the fact, that a 2x retina means 4x data and 3x retina means 9x data, performance can suffer even on good connections badly.
lazySizes data-optimumx
feature (build on top of data-sizes="auto"
) gives the developer more control to use adaptive images markup, but opt-out from to high retina at some point by defining the optimum density.
Unfortunately this demo makes only sense, if you are using a retina device. Maybe come back with one (tablet / smartphone)? Sorry!
data-optimumx
attribute