We can also use srcset and sizes attributes in a similar manner as we discussed in the previous section. Then we can use media attribute to define different media conditions where these sources will be used. With picture tag, we can easily achieve resolution switching by using multiple source tags inside the picture tag. These different versions can be landscape, portrait, or any customized version of the same image. We can address this issue by providing different versions of the image for different screen sizes. In most cases, an image that looks fabulous on larger screens may get cropped or look so small when you switch to mobile.
The main idea behind Art Direction is to display different images based on the screen sizes of the device. So let’s see how we can resolve Art Direction using the picture tag. Having said that, it is advisable not to use the Picture tag just for Resolution Switching since the same can be achieved using the updated version of the Img tag (which has more browser support) īut, in most cases, we need to handle both Resolution Switching and Art Direction simultaneously, and the picturetag is the best solution. In the above example, the image will take up 1200px if the screen’s minimum width is 1280px. The sizes attribute defines the space that the image will take up on the screen. In the above example, there are 3 versions of the same image in 3 different sizes Srcset attribute accepts multiple images with their respective width in pixels, and the browser uses these values to choose between provided images. This issue can be easily addressed with the picture tag by using srcset and sizes attributes.
This way, you’ll have a super-optimized image component that you can use in all your web projects, without giving it a second thought. You can even share it on Bit.dev’s component hub (using Bit) to make it available for your team as well as your future self. Return the correct tag according to the received props and take care of all necessary fallbacks. Next time you create a React image component - make sure to implement your soon-to-be-learned best practices in it. This article will discuss the difference between the picture and img tags and what makes picture tag more prominent than img tag. But most of the time, we are missing out on some small things which can make a huge difference since we are searching for solutions at a higher level.Ĭhoosing between picture tag and img tag can be such a tiny decision, but you will be able to improve both user experience and performance if you make the right choice. Although these modern designs are focused on improving your application’s user experience, things can get backfired if those images are not responsive for all devices.Īs developers, we must fulfill all these requirements. Using images and animations in user interfaces has become a common thing in modern web applications.