Better responsive images with picture element

Better responsive images with picture element

The basic thing that you need to understand about the picture element is that it does not display anything on its own. It gives a context for the images which need to be inserted into it, and this enables the browsers to choose multiple source URLs. The src attribute in HTML does not mean anything when the source element gets nested within a picture. It can be used to display images that are relevant to your website, thus adjusting their position effectively and making them appealing to the users who visit your website.

In the picture element, a picture can only be used by default, which means that you will need to use a flag in your browser in order to access it. This is applicable for Chrome 38+, Opera 25+Firefox 38 and Edge 13+ also supports the picture element by default, too.

The HTML element contains one or more source elements along with the image (img) element, which offers different versions of an image for multiple scenarios. The browser is responsible for selecting the child element and chooses the perfect match among them. In case no match is found, or the browser does not support the picture element, then the URL, which is specified in the src attribute, is selected as fallback. The chosen image is then used in the img attribute. Moreover, the image is added in the space that is provided in the <img> element.

In order to decide which URL to load, the user agent would examine every srcset, media, and type attributes for selecting an image that would match the current layout and the capabilities of the device. The main idea of using the <img> element is the following:

It is used to specify the size and image attributes.

It provides a fallback if you do not get a usable image.

The source element has the following four attributes:

srcset: With this, the URL of the image is specified that you want to show. You can also add multiple URL which gets separated by a comma. You can provide screen resolution to every URL along with the width specification. 

Media: If you want to add a media query and in case it gets evaluated true, then you will be given a suggestion to show the image specified in the srcset attribute. 

Sizes: Under this attribute, you specify the size details for the source that are specified in the src attribute. You will need to add multiple sizes by separating them by a comma.  

Type: You need to specify the type of images in the source set in order to allow the user agent to skip the source element in case it does not support the type that has been specified. 

Example – Try to resize this window:

So why bother with picture tag if we can have the same using img srcset?

<picture> tag is here to give you two key features. It gives you Format-based Selection (image/jpeg, image/webp) which is a huge performance boost. As well as Viewport/Orientation based Images. This means you can serve different images while on mobile Portrtait and totally different while on desktop mode. For instance check out this banner:

Desktop Version: (Try Resizing the window to see mobile version)

Mobile Version: (Open from Desktop to see the difference)

Viewport-based selection: Depending on the width of the viewport, it is important that the image content has different rendered sizes. Moreover, the dimension of the images would vary according to the viewport size. It is extremely important that the image should match the dimensions. For instance, if you choose desktop viewport, you will need to make sure that the images fit well according to the viewing window.

Image format-based selection: It might be possible that you wish to show images with a different format, and depending on that, you will need to format the user that the agent supports. It is important that you provide multiple resolutions for the same image. With this, devices that have high resolution would be able to deliver an optimum, and the ones with a low resolution will avoid wasting bandwidth and time on large files.

Another trick that you can adopt is to use the combination of srcset and the picture element to optimize the images according to the viewports, Combining the mime type – (webp) along with art direction. 

You need to use Picture Tag wisely in order to get better responsive images. Make sure that you consider all the aspects related to the image positioning, resolution, and window size to add the perfect picture element and enhance its appearance on the screen. At last, the picture element is an excellent tool to produce good quality responsive images and ensure that your website looks engaging to the users, thus giving you high traffic and conversions.