Using the Size Attribute for Repeated Images

Question

I am trying to wrap my head around using the srcset and sizes tags on img .

While I think I understood the basic principles - mainly thanks to this article - I struggle for the practical use of the sizes attribute.

In all the examples I can find, things are simplified and the size attribute is declared as if at each breakpoint the image width would be an exact proportion of the width of the viewport, allowing the use of vm units. For instance:

 sizes="(min-width: 36rem) 33.3vw, 100vw" 

Of course, in real life, images are often found in other containers, which themselves can be in other containers, etc., each with its own position, addition or positioning.

Is it possible to say that in all but the simplest cases (when the images have the width of the liquid and are not just the exact percentage of the viewport), calc should be used, potentially adding terribly complex calculations to the html markup since the dimensions of the images must be calculated using the width of the viewport down through any containers to the image? For example, how would you calculate the correct size for an image located in a container with 7px filling, which itself is inside the container, which is 45% of its container with an edge of 15 pixels, which is on the side panel, which is 25% of the container of the main page, which has 15px indentation and has a minimum width of 1220px?

 sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)), 100vw" 

Trying to figure this out in size attributes seems ridiculous, especially considering that all of this can change at every breakpoint. the need to keep this massive complex calculation in sync with CSS changes seems crazy. And then you have fuzzy browser support for calc .

I feel like I'm missing something obvious, but what is it?

Note. I know that Alexander Farkas is great at "Lazy Sizes" , which does size calculations for you using data attributes but I'm interested in standard use.

Answer 1

First of all,% units are not allowed in sizes . You must use vw. (Which may include the scrollbar width). So, for example, your 25% is 24-25vw. Secondly, there is no real difference between rem and em (in the context of the size attribute). If you are not using em / rem / min-width / max-width based media queries in your CSS, never use the ones that are part of your size attribute.

Basically, the sizes do not necessarily correspond to your actual image size by 100%. This means that the browser can find a suitable image candidate.

Your minimum width: the 1200px rule, as well as every use of max-width in your CSS, should clearly be part of the new media condition in your size attribute.

This leaves us with the following dimensions:

 (min-width: 1200px) calc(11vw - 44px) 

If you add, you have a maximum width or a media query that stops increasing the sidebar, you may be less correct and just convert 11vw - 44px to 10vw:

For instance:

 sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>" 

About calc support: picturefill 3.0 beta, as well as a respirator, enable calc support for IE8 +, so that all browsers that support size have sufficient numbering support, and all respiratory multitask browsers also support calc in size.

About getting it straight. This is clearly painful, and in most cases your CMS / backend system should help here. In most projects, you must accept a limited set of allowed image formats and write down the sizes for those that fit your design. And your backend will have to attach these sizes in the right place. If this is not possible. Use either lazySizes or use srcset with sizes , at least for the most important images (that is: large image formats, because that is where you can save the data the most).

---

If you want, you can choose a real website and attach to it the full correct sizes. But keep in mind. It should be limited only by the width. Currently, the standard does not support images with a height limit (this is only the lazysizes function).