Add support similar to srcset to overcome resolution switching problem

[jeznag]

I currently have this HTML to cater for retina devices:
<img src="assets/images/continuous-improvement.png" srcset="assets/images/continuous-improvement.png 1x, assets/images/[email protected] 2x" alt="" />

Is there any way to achieve the same result with progressively?

[thinker3197]

Yes, you can use the data-progressive-sm attribute for loading lower resolution/quality image on smaller devices. For example, your markup would look similar to this

<figure class="progressive">
  <img class="progressive__img progressive--not-loaded" data-progressive="assets/images/[email protected]" data-progressive-sm="assets/images/continuous-improvement.png" src="assets/images/continuous-improvement-lowly.png">
</figure>

Ps, Make sure you set proper break point value so that the non-retina image loads on devices with width > 600 and < 1500.

[jeznag]

@thinker3197 It's not about the viewport width, it's about the device pixel ratio. With
<img src="assets/images/continuous-improvement.png" srcset="assets/images/continuous-improvement.png 1x, assets/images/[email protected] 2x" alt="" />

It uses extra high res version of the image at high DPI and normal res at normal DPI.

if (window.devicePixelRatio >= 2) {
// retina display
} else {
// standard display
}

Retina displays can be on large screens so a viewport check is not appropriate.

[thinker3197]

Agreed, my bad I didn't understood it first. At the moment progressively doesn't support a similar functionality as srcset for higher resolution devices.

[jeznag]

No worries. I'll have a go at a feature enhancement PR next week.

[hektorloto]

Actualmente tengo este HTML para atender dispositivos de retina: <img src="assets/images/continuous-improvement.png" srcset="assets/images/continuous-improvement.png 1x, assets/images/[email protected] 2x" alt="" />

¿Hay alguna forma de lograr el mismo resultado progresivamente?