The <picture> tag is an HTML5 element that is used in the creation of responsive websites. It regulates the display of images in order to adapt to different device displays.
The starting point for the introduction of the <picture> tag was the increasing use of mobile devices. Because of the many different display sizes, pixel densities, image formats, and viewports, displaying images on smartphones and tablets was not always ideal. On the one hand, they require a relatively large volume of data. On the other hand, high-resolution images were often scaled incorrectly on mobile devices, so details were no longer visible.
This changed with adaptive websites. The content of websites nowadays gets optimized so that they can also be displayed on smaller screens. However, in the case of images, users still had a problem. If a high-resolution image had to be loaded on a small screen, the loading time increased and still required much data volume. The <picture> tag represents a solution in this case.
The <picture> tag provides the browser the possibility to opt for an image so that it is displayed correctly on different sized displays. A mobile browser selects a version that suits its type of device and display size. A browser on a desktop PC opts for a high resolution that fits the much larger screen.
The <picture> tag acts as a container. It does not load the image to be displayed, but tells the browser which image from the <img> tag to load. The <picture> tag contains the <img> tag. The <picture> tag does not make other tags like <source> and <img> obsolete. Rather, it embraces these tags to devote themselves to the display. The source of an image and other image attributes continue to be defined in standard tags.
The difference with the <img> tag is that <picture> is associated with certain attributes. These attributes determine the display so that an image is displayed correctly on mobile devices with small screens.
In this simplified example, the <picture> element encompasses both source and image. The srcset attribute provides the browser several options so that it can decide on a suitable image. Behind every image in srcset is an indication of its resolution, i.e. 1x for the standard resolution, and 2x for a higher resolution such as for Retina displays. 4x is designed for high-definition 4K monitors. This information may also be specified as part of the “width.” For example: “image1x.jpg 640W.”
<picture> <source srcset=”image1x.jpg 1x, image2x.jpg 2x, image4x.jpg 4x”> <img src=” image1x.jpg” alt=”Image for responsive layout”> </picture>
Once the integration is supported in all major browsers, the <picture> tag will probably advance to a new standard because it offers different options of adapting to different screen sizes, pixel densities, viewports or resolutions. From an SEO perspective this makes for decreased load times. This increases user-friendliness and will most likely be rated by search engines as a positive signal.