How image attribute sizes are calculated and with DPR
Bhavesha | Jan 7, 2023 | 5 min read
Overview
The following are some key points for optimizing images and image sizes with proper device pixel ratio –
- In this guide, we will learn everything related to responsive images based on user screen size, pixel density, and device orientation.
- To ensure an excellent user experience, we customize the design according to the user’s size, pixel density, and orientation.
- You can improve the performance of your website by working on the proper image sizes, attributes, and device pixel ratio.
It will be helpful to understand the concept of
image sizes and Device pixel ratio(DPR) and to maintain it based on the content below. The content below derives from our experience executing more than 50+ speed optimization projects on Shopify websites.
The Size Attributes
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/350x150 1440w,
http://placehold.it/700x300 2000w"
data-src="http://placehold.it/350x150"
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).
Device Pixel Ratio
The device pixel ratio (DPR) is a term that refers to the ratio of physical pixels on a device to logical pixels. Logical pixels are the pixels that are used to lay out a page and are defined by the dimensions of an image. Physical pixels are the actual pixels on the screen of a device. The DPR can be used to specify the size of an image in logical pixels, while still allowing the image to be displayed at its intended size on devices with different pixel densities.
We have an example of image size DPR –
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,
For that 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 that mobile whose DPR is 2: iPhone5, iPhone6/7/8, iPad, and iPad Pro
Here sizes is 336px
If a 2x image source is not given this will multiple 336×2=672 and will pick 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,”
If a 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 mobiles whose DPR is 3: iPhone 14, iPhone 13 Pro, Moto G4, iPhone6/7/8 Plus, iPhone X, and Galaxy Fold
Here sizes is 336px
If a 3x image source is not given this will multiple 336×3=1008 and will pick the 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,”
If a 3x image source is given this will pick that 3x source image
(800px x 800px)
”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 3x,”
What about the tag
The ‘
picture’ element works in conjunction with the ‘source’ element and the ‘img’ element. The ‘source’ element specifies multiple sources for an image, and the ‘img’ element is used as a fallback for browsers that do not support the ‘picture’ element.
Example:
<picture class=”Dummy” >
<source media=”( max-width: 375px )”
srcset=”{{ collection | img_url: ‘375x’ }},
{{ collection | img_url: ‘375x’, scale: 2 }} 2x”>
<source media=”( max-width: 768px )”
srcset=”{{ collection | img_url: ‘768x’ }},
{{ collection | img_url: ‘768x’, scale: 2 }} 2x”>
<img src=”{{ collection | img_url: ‘1200x’ }}”
srcset=”{{ collection | img_url: ‘1200x’ }},
{{ collection | img_url: ‘1200x’, scale: 2 }} 2x”
alt=”…” loading=”lazy”>
</picture>
Conclusion
To summarize, the size of an image in HTML is specified using the width and height attributes of the img element, which define the size of the image in pixels. The device pixel ratio (DPR) is a term that refers to the ratio of physical pixels on a device to logical pixels, The srcset attribute can be used to specify different versions of an image at different DPRs, and the browser will automatically select the appropriate version to use based on the DPR of the device.
Skip to content
