progressively
progressively copied to clipboard
thinker3197
Add support similar to srcset to overcome resolution switching problem
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?
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.
@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.
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.
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?
