Page load times are an essential SEO element that companies are increasingly paying attention to due to the reducing attention spans of readers. Another crucial requirement for web pages is to fit images as per the screen size and resolution of the user’s screen. These requirements have given rise to the concept of the picture elements.
To understand the picture element, we first discuss the srcset attribute which is an attribute of the img element designed so as to provide the right image to a specific device. Using this element, developers can specify a list of sources for an image and only one will be selected based on the pixel density or size of the user’s screen. Even the browser is provided with a set of recommendations of certain image types, thus improving the loading time of a page. In short, this technique minimizes the website load for devices with smaller screens and improves user experience. The standalone proposal of this attribute has now been developed into a wider proposition, namely, the picture element. In this post, we explain the picture element, its major features, and its advantages.
Definition of Picture Element: Providing an image of the right size and pixel density to a specific device became more and more important due to the growing number of devices. That is where the picture element came into use. It should be noted that the picture element does not display anything by itself. It just provides a context for images inserted into it and this allows browsers to choose from multiple source URLs. Therefore, this element is different from other container elements like video and audio. For video and audio elements, if you insert the src attribute, the attribute has complete priority on the source elements. This is in contrast to the picture element where the source element is prioritized on every situation and the element itself is nothing more than a container that provides multiple sources to the contained img element.
Since the picture element serves as a container for multiple sources, the authors can indirectly control or give hints to the user agent regarding the image resource to use on the basis of screen pixel density, viewport size, image format, and other such factors. Two different tags, to provide backward compatibility for browsers that don’t support it and
, are placed inside this element.
The source element contains the following four attributes:
srcset: Used to specify the URL of the images to be shown and multiple URLs are separated by a comma. There is the possibility to pair each URL with a screen resolution or a width specification.
media: Here a media query is written meant to give suggestions about which image specified in the srcset attribute to display.
sizes: This attribute is used to specify a set of intrinsic sizes for the sources mentioned in the srcset attribute. Also accepted are multiple sizes separated by a comma.
type: This gives the type of the images in the source set which allows the user agent to skip to the next source element if it does not support the given type.
There are various ways to use a picture element and below we quickly describe a list of directions you can give to this element: Art direction-based selection: In the picture element, multiple images are used to appropriately fill the browser viewport instead of a single image. The use of different images resized to fit a particular screen aids in communicating a message effectively.
Device-pixel-ratio-based selection: Devices with different screen densities require images with different minimal resolutions. Thus, the higher the pixel density, the more pixels an image needs to look good. A designer should aim to display images so as to reduce perceptible crops.
Viewport-based selection: This means showing the same image content in different sizes depending on the width of the viewport. Normally, images with larger image dimensions are sent to browsers with narrow viewports and are then resized by the browser to fit the design. However, ideally, images served should match the user’s viewport dimensions.
Image format-based selection: This selection pertains to displaying the same image content but using separate image formats, depending on the format that the user agent supports. Designers should try to provide the same image in multiple resolutions so that high-resolution devices get the optimum image for a given resolution, while low-resolution devices save the time and bandwidth required to download unnecessarily large files.
Using Picture Element: Practical examples: Imagine working on a website with a mobile-first approach and use an image like “River and Mountains”. In the code below, we show the image river-and-mountains-mobile.png by default and then the images that we’d like to render if users are visiting the website with a tablet or from their desktop. Hence, river-and-mountains-tablet.png is used for devices with a screen of at least 680px while river-and-mountains-desktop.png is used for devices with a screen width of at least 1024px. There is also a fallback image river-and-mountains.png for browsers that are not able to recognize the picture element.
The code to implements the above is:
If we want to focus on the power of the srcset attribute, the following code gives an idea of what to add:
As discussed, the srcset attribute accepts multiple URLs separated by a comma. One can also match each URL with a screen resolution or a width specification. In the above example, the second URL is paired with the string 2x, separated by a space, that targets users with a high-resolution display (pixel density 2x, like the Retina). The browser first considers the source element that best accommodates the user screen based on the media query specified. The second element taken into consideration will be the screen resolution. Now we see how the picture element utilizes the size attribute. Imagine we want our image to cover 50% of the width regardless of its actual size and pixel density.
For this, we have to mention the size we want to cover and the size of each image in the srcset attribute as follows:
Compatibility: Currently, the picture element is only supported by default in Chrome 38+ and Opera 25+. Since version 34, Firefox supports this element behind a flag. Starting from version 38, Firefox will support pictures by default too. The element is still under consideration in Internet Explorer.
Conclusion: The picture element is a solution to the problem of responsive images. It allows developers to resolve the issue of fixing the right image resolution for multiple devices. This concept has great potential since it was required for a long time before it came into existence and offers specifications that are extremely useful where different devices and screen sizes and different images with different resolutions are concerned.