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!

Configure the `data-optimumx` attribute
`data-optimumx`
optimumx
viewport width
oninput / onchange

Wether viewport should be changed while dragging (input/checked) or on drag release (change/unchecked).