Picture - a new item that is not

In the developer builds of Chrome, Firefox and Opera browsers, there is support for a new picture element, designed to solve a number of problems arising in the development of responsive designs. Let's take a closer look at it.

The new picture element solves the following tasks facing the developer of responsive web applications (I will use the classification proposed by pepelsbey at a recent frontend conference):

1. R etina, i.e. screens with dots per inch 150 and above, on which a regular image looks blurry
2. And daptivnost, the task of resizing the image according to your rules, prescribed in the design, depending on the size of the viewport.
3. The format, the ability to use modern formats such as WebP, if supported by the browser
4. Go to adrie or Artistic purpose. Cropping unimportant parts of the image, when displayed on devices with a smaller screen.

Putting the first letters, we get the RAFC mnemonic

Syntax

Conventionally, the extended syntax of the new element looks like

 <picture> <source srcset="< URL c >" [sizes="<     >"] [media="<>"] [type="<mime/type>"] > <source ...> ... <img src="image.jpg" alt="My image" [srcset="< URL  >"] [sizes="<     >"]> </picture> 

The picture element does not render any content, but is merely a reference container for the img tag attached to it.
')
Therefore, for most tasks, an abbreviated record will suffice, completely without using

  <img src="image.jpg" alt="My image" [srcset="< URL  >"] [sizes="<     >"]> 

Let's look at how the above mentioned problems are solved with the help of a new element. All sample files can be found in this github.com/fetis/picture repository.

To test the examples in this article on the desktop, you will need either Firefox Nighlty ( picture support is enabled by setting dom.image.picture.enable in about: config), or Chrome Canary , or Opera Developer . On a mobile device, you can test a new element in Chrome Beta.

Retina

We have an image of 400x300 pixels, which we also want to show beautifully at double and triple pixel density. To do this, we prepare 2 more pictures, 800x600 and 1200x900 in size and write the following code

  <img src="images/400.jpg" srcset="images/800.jpg 2x, images/1200.jpg 3x" width="400" height="300" > 

2x and 3x are pixel density descriptors , they tell the browser that these pictures were prepared for this density, you can use if you want. Please note that they do not force the browser to use these pictures, but only prompt it. The final decision remains with him depending on other conditions, for example, the current connection.

The src attribute in this case serves as the source of the image for a density of <2 and a foldback in case the browser does not support the new element.

Adaptability

Imagine a layout in which there is a single control point (breakpoint) 700pcs. With a viewport size of more than 700 px, we show the sidebar to the right and the size of our image should be 75% of the screen width. Otherwise, the sidebar is located at the end of the page and the image should be stretched to its full width. This is implemented by the following code.

  <img src="images/400.jpg" srcset=" 400w, images/800.jpg 800w, images/1200.jpg 1200w" sizes="(min-width: 700px) 75vw, 100vw" > 

400w, 800w, 1200w are width descriptors , they prompt the browser how wide the image is at a given URL and based on this information the browser decides which image is best for the current situation. As in the case of retina information is advisory in nature and the final decision what image to load remains for the browser.

Simultaneous use of density and width descriptors is not allowed.

The sizes attribute lists image sizes for all control points in our design. Control points are set in the form of ordinary media expressions, the browser takes the first one, which returns True and does not consider the chain any further. For the width, a new unit of length vw is used , which returns a value in percent of the viewport width.

If for a picture there is no need to use control points, then the recording can be reduced to such sizes="100vw" . And for more complex designs, you can use the calc() CSS function, for example
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"

The most complex behavior attribute in my opinion. If you do not specify sizes , the browser always chooses the largest image. In combination with the width does not work, although it would seem a logical combination and a number of other glitches. Perhaps this is a feature of early implementation.

As you can see, we have already covered 80% of the needs of adaptive layout, and have never used a picture , it is time for him to join the game too.

Format

Using different formats for images differs little from the methods used for video or audio tags.

  <picture> <source srcset="images/400.webp" type="image/webp"> <img src="images/400.jpg" width="400" height="300" > </picture> 

We specify a list of sources and mime / type for each, and the browser already selects the first one that knows. Images are used as a foldback from the src attribute.

Cropping

When we show a photo on a smaller screen, it sometimes makes sense to cut off the extra details, leaving only the main part. The media attribute will help us with this task.

  <picture> <source media="(min-width: 900px)" srcset="images/original.jpg 1200w" sizes="100vw"> <source media="(min-width: 700px)" srcset="images/800crop.jpg 800w" sizes="100vw"> <img srcset="images/400crop.jpg 400w" sizes="100vw" > </picture> 

In each media attribute, we specify a media expression, in which we will change the original image and, unlike the previous examples, the browser will be obliged to follow it. Also note how framing here is combined with adaptability to stretch the image to its full width.

RAFC

And now all 4 methods in one bottle :) Perhaps it will look like inserting pictures in a couple of years (an example from the Opera blog)

 <picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.webp 200w, opera-fullshot-400.webp 400w, opera-fullshot-800.webp 800w, opera-fullshot-1200.webp 1200w, opera-fullshot-1600.webp 1600w, opera-fullshot-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.webp 200w, opera-closeup-400.webp 400w, opera-closeup-800.webp 800w, opera-closeup-1200.webp 1200w, opera-closeup-1600.webp 1600w, opera-closeup-2000.webp 2000w" type="image/webp"> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w, opera-fullshot-1600.jpg 1800w, opera-fullshot-2000.jpg 2000w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w, opera-closeup-1600.jpg 1600w, opera-closeup-2000.jpg 2000w"> </picture> 

It uses 2 formats JPEG and WebP. With a screen width of more than 1280px, a full-sized picture in half of the viewport is shown. With a width of 640 to 1279, the cropped photo is shown at 60% of the viewport width. With a screen width of less than 640pcs, the cropped photo is shown at 100% width. The selection under the current DPI screen is based on the width of the source files.

Additional Information

Browser support caniuse.com/#search=picture
Specification www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element
Working group and typical tasks that they solved with the help of the new element responsiveimages.org
Many examples of using dev.opera.com/articles/responsive-images