Images play a very important role in web performance. Many a times we don't give much importance to simple attributes of html elements and we try different ways to optimize the performance of the webpage.
Lets see how setting width and height attribute to the image can improve the web performance and also lets understand the new attribute called 'loading="lazy"' can help us in fetching images based on the DOM visibility in the viewport.
First let us understand why setting width and height to image is important. Browser engine parses HTML and converts HTML to DOM and CSS to CSSOM. Once the image is downloaded there will be a layout shift since during the first stage of HTML parsing the image width and height is unknown. This results in repaint.
Layout shifting is not a good user experience. If there are too many images then it leads to performance issue.
Its important that we set width and height to image.
Another important attribute which is supported in all chrome browsers with version above 76 is 'loading="lazy"'.
When we have multiple images in the page, then we can use loading="lazy" attributes which downloads the images only for the DOM visible in the viewport.
When we scroll based on the DOM visibility in the viewport images will be downloaded. This is very useful attribute as there is no need for us to have a listener on scroll to check whether DOM is visible in the viewport or not.
Hope this helps :-)
For more details please refer:
https://web.dev/browser-level-image-lazy-loading/
Top comments (0)