Picture Tag
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.
General information
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.
Operation
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.
- srcset: This attribute gives the browser a set of images that can be loaded.
- media: The media attribute contains information about media queries. It queries which srcset is linked with the output medium. If, for example, a smartphone with certain dimensions such as width or height is concerned, the associated srcset will be employed and the display is optimized for the media type.
- sizes: Sizes defines how much space of the available viewport can be occupied with an image. This is done by specifying a percentage, for example, 100%, to occupy the entire visible range of the display screen.
Example
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>
Practical relevance
However, not all browsers support this new function currently. In such cases, there is a fallback to the <img> tag, so that the standard image is displayed. Sometimes the function can be allowed using the “experimental web platform features” in the Chrome and Opera browsers. In Firefox this is done via “dom.image.picture.enable” in the browser settings. The Internet Explorer checks the integration of picture tags.[1] A recent alternative is Picturefill 2.0, which works on the same principle, but uses JavaScript to display and adjust the images. With picturefill, the <picture> element can be used in any browser.[2]
Relevance to search engine optimization
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.
References
- ↑ Picture Element caniuse.com. Accessed on 03/20/2015
- ↑ Picturefill 2.0 scottjehl.github.io. Accessed on 03/20/2015