Need for Art Direction
Resolution switching is an effective technique for responsive images for most images. This is especially true for square images. But in some other cases, this is not an effective solution. Traditionally, desktops have a landscape orientation. So many images may be in landscape orientation. But recently mobile phones have become popular. Most people browse the Internet in Portrait mode. The images which are meant to be seen in the landscape mode do not look good in portrait mode. The subject in the image may appear tiny on mobile devices if they are relatively small when compared to the whole image. This cannot be fixed using resolution switching. In this case, we need a technique called art direction.
Art direction is the process of cropping the essential part of the original image and serving the cropped image as a substitute in smaller devices. Since we are responsible for providing the cropped image, we have more control over the image.
picture element
The picture element can be used to provide multiple source images for different devices. It contains source elements which provide individual image files along with conditions. An image element is provided as a fallback mechanism.
<picture> <source media="(max-width: 799px)" srcset="example-small-device.png"> <img src="example-large.png" alt="Example for art direction"> </picture>
The media attribute is used to set the condition for choosing the image. When the conditions are not met or the browser does not support the picture element, the image element is used as a fallback. In the above example, any device having width lower than 800px will show the smaller version.
Using picture element for newer image formats
There are some promising newer image formats that provide high-quality images at lower sizes. The browser support for these images is not extensive. If we still want to utilize these newer formats in browsers that support them we can use them in a picture element. The image element fallback ensures that in cases where browser support is not present the image gets displayed in a more conventional format.
<picture> <source type="image/svg+xml" srcset="example.svg"> <source type="image/webp" srcset="example.webp"> <img src="example.png" alt="Example image"> </picture>
You may be tempted to use JavaScript to dynamically change the src attribute for responsive images. The images will get replaced as expected. But the browsers usually send image requests before parsing the scripts. This results in a situation where both the larger image and the smaller image is loaded. This defeats the entire purpose of using responsive images. The user experience, in this case, is worse than simply using the original image. So we should only use HTML features for responsive images.