Crisper, Clearer Images Across all viewport Sizes
The specification of the picture element is the result of intensive research and development. It allows frontend developers to reference a set of pictures with different technical characteristics to display clear, crisp images across all pixel densities and viewport sizes. (I already gave a short introduction to the problem of different pixel densities in my last blog post.)
How the Browser deals with Images
Images are often a website’s heaviest resource. Therefore the browser loads them ASAP before it builds the DOM, loads external css, or layout structure. This produces the paradox that the browser does not yet know the rendered size of the image but still has to render it. The browser thus requires recognizable properties like the viewport or the display pixel ratio. Media queries have the same requirement and also render the image relative to the viewport size. The necessary calculations that have to be done in the context of image loading are complicated and error prone (further information here). To minimize errors, we should simply tell the browser the rendered image size instead of basing it on the viewport.
Use of the Picture-Element
So how do we set the markup of the picture element? With the sizes-attribute we tell the browser how many pixels the image needs, and, in the srcset, we state the width of the image in pixels using w descriptors. Now the browser has everything it needs to select the smallest possible source to display a crisp image.
In the source code below the sizes attribute tells the browser that it should render the images at 33 percent when the minimal viewport size matches 35.5em, otherwise it should render the images width 100% of the viewport size by default.
sizes=“(min-width: 35.5em) 33vw, 100vw”
Why it Matters
By telling the browser an image’s width in pixels and the minimal size needed, we solve two problems: the fluid-image- and the pixel-ratio-problem. The browser just needs to multiply the required width of the image in pixels (value of the sizes-attribute above) with the device-pixel-ratio to know which image of the srcset should be rendered to fill the space.