controlling retina/density of responsive images with lazysizes and the optimumx plugin

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

load config

load image specific

load with "auto" value

viewport width

oninput / onchange

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