From the author: using images and animations in user interfaces has become commonplace in modern web applications. While these designs are focused on improving your app’s user experience, things can backfire if these images aren’t responsive on all devices.
As developers, we must fulfill all the necessary requirements. But most of the time, we are missing out on some little things that can make a huge difference as we look for higher-level solutions.
Choosing between the picture tag and the img tag can be such a tiny decision, but you can improve both the UI and performance if you make the right choices. In this article, we’ll look at the difference between picture and img and what makes picture more useful than img.
Why is img tag not enough for modern web applications?
As we all know, the img tag has been a staple of HTML for a considerable period of time, and there was no doubt about its simplicity and usability.
However, with the development of devices with different screen sizes, resolutions and complex user requirements, questions began to arise about its speed and ability to be used in applications with multiple devices.
All of these questions can be grouped into two main aspects:
Resolution Toggle – Issues with serving smaller images for narrow screen devices.
Artistic direction is the problem of displaying different images on screens of different sizes.
Now let’s see how these issues were addressed and what additional features are available for the picture tag.
Switching resolution using the srcset and sizes attributes
As I mentioned earlier, modern web designers often use high resolution images to grab the attention of users. But as developers, we need to be very careful when choosing the correct HTML element.
Let’s say you are using a simple img tag for high resolution images. In this case, the same image is used on every device your app is running on, and this will indeed lead to performance issues on lower resolution devices such as mobile devices.
This can lead to longer image loading times and partial top-down image loading.
Problem loading images from top to bottom
This issue can be easily resolved with the picture tag using the srcset and sizes attributes.
<picture> <source srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w" sizes="(min-width: 1280px) 1200px, (min-width: 768px) 400px, 100vw"> <img src="medium-car-image.jpg" alt="Car"> </picture>
The srcset attribute accepts multiple images with matching pixel widths, and the browser uses these values to choose between the provided images. In the example above, there are 3 versions of the same image in 3 different sizes.
The sizes attribute defines the amount of space the image will occupy on the screen. In the example above, the image will occupy 1200 pixels if the minimum screen width is 1280 pixels.
That being said, it’s advised not to use the picture tag just to switch resolution, as the same can be achieved with an updated version of the img tag (which has more browser support).
<img srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w" sizes="(min-width: 1280px) 1200px, (min-width: 768px) 400px, 100vw" src="medium-car-image.jpg" alt="Car">
But in most cases, we need to handle both resolution switching and art direction and the picture tag at the same time is the best solution. So let’s see how we can enable artistic direction using the picture tag.
Artistic direction using media attribute
The main idea of the art direction is to display different images depending on the screen size of the device. In most cases, an image that looks great on large screens may get cropped or look small when switched to mobile.
We can solve this problem by providing different versions of the image for different screen sizes. These different versions can be landscape, portrait, or any other version of the same image.
With the picture tag, we can easily achieve switching resolutions by using multiple source tags within the picture tag.
<picture> <source ....> <source ....> <source ....> </picture>
We can then use the media attribute to define the different media conditions in which these sources will be used. We can also use the srcset and sizes attributes in the same way as we discussed in the previous section.
The following example shows a complete example of using art direction and switching resolution using the picture tag.
<picture> <source media="(orientation: landscape)" srcset="land-small-car-image.jpg 200w, land-medium-car-image.jpg 600w, land-large-car-image.jpg 1000w" sizes="(min-width: 700px) 500px, (min-width: 600px) 400px, 100vw"> <source media="(orientation: portrait)" srcset="port-small-car-image.jpg 700w, port-medium-car-image.jpg 1200w, port-large-car-image.jpg 1600w" sizes="(min-width: 768px) 700px, (min-width: 1024px) 600px, 500px"> <img src="land-medium-car-image.jpg" alt="Car"> </picture>
If the screen orientation is landscape, the browser will display images from the first set of images, and if the orientation is portrait, the browser will use the second set. In addition to this, you can use the media attribute with the max-width and min-width parameters:
<picture> <source media="(max-width: 767px)" ....> <source media="(min-width: 768px)" ....> </picture>
The last img tag is for backward compatibility with browsers that do not support picture tags.
Use with partially supported image types
With the rapid development of technology, different types of modern images appear every day. Some of these types such as webp, svg, and avif provide a higher level of user experience.
On the other hand, some browsers have limitations on these modern image types, and things will backfire if we don’t use compatible image types.
But we can easily fix this problem using the picture tag, as it allows us to include multiple sources in it.
<picture> <source srcset="test.avif" type="image/avif"> <source srcset="test.webp" type="image/webp"> <img src="test.png" alt="test image"> </picture>
The above example includes three types of images from avif, webp and png formats. The browser will try to use avif first, and if it fails, webp. If the browser doesn’t support both of them, it will use the png image.
The picture tag got even more interesting when Chrome announced that “DevTools will provide two new emulations in the Rendering tab to simulate partially supported image types.”
Starting in Chrome 88, you can use the Chrome DevTools to check browser compatibility with image types.
Using Chrome DevTools to Emulate Image Compatibility
While we’re talking about why the picture tag is more useful than the img tag, I’m pretty sure the img tag is not dead and will continue to be used.
If we use the srcset and size attributes wisely, we can get the most out of the img tag. For example, we can only enable resolution switching with the img tag.
On the other hand, we can use the picture tag to easily achieve switching resolution and artistic direction using media queries and other provided attributes.
The ability to work with partially supported image types and support for Chrome DevTools can be considered additional plus points for the picture tag.
However, both of these elements have their pros and cons. Therefore, we must carefully consider and use the most suitable element based on our requirements.
Thanks for attention!!!
Author: Chameera Dulanga
A source: //blog.bitsrc.io
Editorial staff: The webformyself command.