RESPONSIVE IMAGES | OPTIONS
Responsive images are a set of approaches for loading the appropriate picture depending on the device’s quality, rotation, pixel density, broadband connection, and page layout. The images should not be stretched to fit the style of the page, and fetching it should not waste time or bandwidth. It enhances the user experience by allowing images to load quickly and appear crisp to the naked eye.
For example, if we use 2200px on our website, it looks optimal for desktop because the viewport width and picture width matches. However, the viewport on mobile is just 375 pixels wide and tablets will also be in the same boat with 1024 pixels wide. In this case the users time and bandwidth will get squandered by downloading this massive file.
Hence to tackle this kind of issues, we have 2 options available in responsive images.
1. Resolution switching
2. Art Direction
RESOLUTION SWITCHING:
Focusing on identical image and display it according to the screen resolutions. The 2 methods in resolution switching are,
- Resolution switching using sizes
- Density Switching
Resolution switching with sizes use srcset and sizes attribute to provide additional images which helps the browser to pick the correct one. srcset contains the list of images along with the width. In the syntax, cake_480.jpg 480w defines that the cake_480 image is of 480px wider and cake_800.jpg 800w defines cake_800 is of 800px wider. sizes attribute contains media conditions and indicates what image size would be best to use when media condition is true. src is the fallback for srcset, if incase browser doesn’t support srcset and sizes attributes.
Considering all the above attributes, the browser will first look for,
i. device width
ii. Media conditions in the sizes list
iii. slot size given to the media query
iv. Images listed in the srcset attribute
<img srcset=”cake_480.jpg 400w,
cake_800.jpg 800w”
sizes=”(max-width:600px) 300px,800px”
src=”cake_800.jpg”
alt=”bakery”>
If any device with a viewport width of 300px is loading the website then media condition max-width:600px becomes true, so the browser choose 300px slot and the first image will get displayed, as width is closest to the slot size. It is not mandatory that the image slot in size attribute and width of image in srcset attribute should get match, the browser will pick up the right one depends upon the screen resolution and the media condition which we gave. Here the cake_800 image is of 106KB whereas cake_480 image is of 44KB. So, just imagine if a webpage had lots of images, then this technique could save mobile users a lot of bandwidth.
Density switching displays the image based on the device pixel ratio. srcset contains the list of images along with the density descriptors(1x,2x,3x). Every device by default have its own device pixel ratio. Depends upon that the browser will display image suitable to the screen. As per the above syntax, if any device with 3x device pixel ratio is loading the image then cake_800.jpg image will get displayed and in the same way if 2x device is loading the image then cake_480.jpg image will be displayed. This is often uses while working with high density screens.
<img srcset=”cake_320.jpg, cake_480.jpg 2x, cake_800.jpg 3x”
src=”cake_800.jpg”
alt=”bakery”>
ART DIRECTION:
Focusing on different cropped images according to the layout. For suppose if we see few images on a larger screen, we can clearly able to see each and everything i.e., the main focus part and also the background, but this can’t be possible if we see the same image on narrow screens, in this case art direction helps to clearly focus on the main part of the image rather than displaying the image with whole background. Here we use picture tag which wraps multiple source tags. Source tag contains media conditions that defines at what width the image should get selected by browser. If screen width is less than or equals to 500px then cake_320 image will get displayed. Suppose if the width is less than 799px then cake_480 image will get displayed, if width is more than 800px then cake_640 image will get displayed. src here is a fallback because picture tag is not supported by all the browsers.
<picture>
<source media=”(max-width: 500px)”srcset=”bakery_320.jpg”>
<source media=”(max-width: 799px)” srcset=”bakery_480.jpg”>
<source media=”(max-width: 800px)”srcset=”bakery_640.jpg”>
<img src=”art_direction/bakery_640.jpg” alt=”bakery”>
</picture>
WHY DO WE NEED RESOLUTION SWITCHING & ART DIRECTION:
Good website means rendering the high quality and right images across all devices depends upon the screen resolution with fast loading pages. The main aim of responsive images is to avoid resizing, zooming the images that have not been optimized for multiple devices. Most of the times it is quite difficult to operate these kinds of websites and users become frustrated to figure out to do something.
Essentially, mobile usage is also high in demand now-a-days, so with resolution switching and art-direction web developers can serve high quality and high resolution images to the websites. This 2 methods allows to display just one image that scale up and down automatically to match the device its being viewed on. This results in improving the website loading time and also visual representation of images.
REFERENCES:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://medium.com/@woutervanderzee/responsive-images-with-srcset-and-sizes-fc434845e948
A Guide to the Responsive Images Syntax in HTML