Using properly sized images is significant for mobile websites. Properly sized images weigh less kb's, therefore occupy less bandwidth on mobile devices where bandwidth may come with an additional cost.
Let's find out how we can utilize the simple HTML tag
Deliver the properly sized image to the browser
The HTML picture element can be used to deliver the right size image based on the device screen size. With the regular tag, all the browser sizes are served with the same sized image, and the image resizing happens on the browser, leading to the use of bandwidth unnecessarily.
<picture> <source media="(min-width: 600px)" srcset="banner-medium.jpg"> <source media="(min-width: 400px)" srcset="banner-small.jpg"> <img src="banner.jpg"> </picture>
In the above code, the
Different image format support
There are certain image formats optimized for the web, but not all browsers support them. For example, WebP from google is a great way to deliver your images, but Internet Explorer doesn't support it. To overcome this, we can use the
<picture> <source srcset="banner.webp" type="image/webp"> <img src="banner.jpg"> </picture>
With the above code, browsers that support WebP (Chrome, Edge, Firefox, Safari, Opera) will benefit from the smaller size WebP image while older versions of browsers and browsers that don't support WebP will fall back to the standard element.