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. 

browser knows the size of the viewport presented by the hole

THE browser knows the viewport size presented by a given “hole.”

 

the browser takes the smallest source possible to display a crisp image

The browser takes the smallest source possible to display a crisp image.

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.

 

<img class=”o-picture”

      alt=“Picture-Element”

      sizes=“(min-width: 35.5em) 33vw, 100vw”

      srcset=/img/jpg/home-srplogo_4x.jpg 3840w,

            /img/jpg/home-srplogo_3x.jpg 2880w, 

            /img/jpg/home-srplogo_2x.jpg 1920w,

            /img/jpg/home-srplogo_1.5x.jpg 1440w,

            /img/jpg/home-srplogo_1x.jpg 961w,

            /img/jpg/home-srplogo_0.5x.jpg 480w“>

 

 

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.

For browsers that do not yet support the picture element you should use polyfill picturefill. Here you can discover current browser support.