December 21, 2021 | 5 min read

How image attribute sizes are calculated and with DPR

The automatic sizes calculation uses the display width of the image. This means that the width of the image has to be calculable at least approximately before the image itself is loaded (This means you can not use width: auto ).
Often the following general CSS rule might help:
img [data-sizes=”auto”] {
display: block;
width: 100%;
}
(OR)

< img style=”width: 350px; height: 150px;” />

data-srcset=”http://placehold.it/350×150 1440w,
http://placehold.it/700×300 2000w”
data-src=”http://placehold.it/350×150″
class=”lazyload” />

The data-sizes=”auto” feature only makes sense if you use the data-srcset attribute with width descriptors which allow the most appropriate image can be selected (It does not make sense if you use the x descriptor or only src).
Before lazyload Desktop

data-sizes=”auto”
data-aspectratio=”{{ image.width }}/{{ image.height }}”
data-srcset=”{{ image | img_url: ‘2500x’ }} 2500w,
{{ image | img_url: ‘2000x’ }} 2000w,
{{ image | img_url: ‘1800x’ }} 1800w,
{{ image | img_url: ‘1600x’ }} 1600w,
{{ image | img_url: ‘1200x’ }} 1200w,
{{ image | img_url: ‘800x’ }} 800w,
{{ image | img_url: ‘600x’ }} 600w,
{{ image | img_url: ‘400x’ }} 400w,
{{ image | img_url: ‘200x’ }} 200w,
{{ image | img_url: ‘800x’ }} 3x,
{{ image | img_url: ‘600x’ }} 2x”
height=”{{ image.height }}”
width=”{{ image.width }}”/>
After lazyload Desktop

data-sizes=”100vw”
data-aspectratio=”816/1223″
data-src=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891″
data-delayedsrcset=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_200x.jpg?v=1616128891 200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x1600.jpg?v=1616128891 1600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x1800.jpg?v=1616128891 1800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2000.jpg?v=1616128891 2000w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2500.jpg?v=1616128891 2500w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_300x.jpg?v=1616128891 3x”
src=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_700x.jpg?v=1616128891″
sizes=”720px”>
=> Here sizes is 720px so the srcset will display the very next image size which is 800w (800px x 800px)
”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,”
After lazyload Mobile

< img class=”lazyloaded” />

data-sizes=”100vw”
data-aspectratio=”816/1223″
data-src=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891″
data-delayedsrcset=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_200x.jpg?v=1616128891 200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x1600.jpg?v=1616128891 1600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x1800.jpg?v=1616128891 1800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2000.jpg?v=1616128891 2000w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2500.jpg?v=1616128891 2500w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 2x,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 3x”
height=”1223″
width=”816″
srcset=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_200x.jpg?v=1616128891 200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x1600.jpg?v=1616128891 1600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x100.jpg?v=1616128891 1800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2000.jpg?v=1616128891 2000w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2500.jpg?v=1616128891 2500w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 2x,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_300x.jpg?v=1616128891 3x”
src=”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_700x.jpg?v=1616128891″
sizes=”336px”>
For those mobile whose DPR is 1: iPhone4
Here sizes is 336px so the srcset will display the very next image size which is 400w (400px x 400px)
”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,”
For those mobile whose DPR is 2: iPhone5, iPhone6/7/8, iPad and iPad Pro:-
Here sizes is 336px
If 2x image source is not given this will multiple 336×2=672 and will pick a very next image size which is 800w
(800px x 800px)
”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,”
If 2x image source is given this will pick that 2x source image
(600px x 600px)
”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 2x,”
For those mobile whose DPR is 3: Moto G4, iPhone6/7/8 Plus, iPhone X and Galaxy Fold:-
Here sizes is 336px
If 3x image source is not given this will multiple 336×3=1008 and will pick a very next image size which is 1200w (1200px x 1200px)
”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,”