\"lazy\"<\/span>><\/span><\/span><\/code><\/pre>\nThis single attribute is sufficient for many use cases. Browsers that support this attribute will handle lazy loading automatically.<\/p>\n
Advantages:<\/strong><\/p>\n\nSimple to implement and requires no additional JavaScript.<\/li>\n Supported by most modern browsers, reducing the need for polyfills.<\/li>\n<\/ul>\n<\/span>2.2 Implementing Lazy Loading with JavaScript<\/span><\/h4>\nIf you need more control over the lazy loading process, or if you want to ensure compatibility with older browsers, you can implement lazy loading using JavaScript. Here\u2019s a basic example:<\/p>\n
Step-by-Step Implementation:<\/strong><\/p>\n\nHTML Markup<\/strong>: Use a placeholder element for the image.<\/li>\n<\/ol>\nCopy<\/button><img data<\/span>-src=\"image.jpg\"<\/span> alt=\"Description\"<\/span> class<\/span>=\"lazy-load\"<\/span>><\/code><\/pre>\n\nJavaScript Code<\/strong>: Use the Intersection Observer API or scroll event to load images.<\/li>\n<\/ol>\nUsing Intersection Observer:<\/strong><\/p>\nCopy<\/button>document<\/span>.addEventListener<\/span>(\"DOMContentLoaded\"<\/span>, function<\/span>() {\r\n const<\/span> lazyImages = document<\/span>.querySelectorAll<\/span>('.lazy-load'<\/span>);\r\n\r\n const<\/span> imageObserver = new<\/span> IntersectionObserver<\/span>((entries, observer<\/span>) =><\/span> {\r\n entries.forEach<\/span>(entry<\/span> =><\/span> {\r\n if<\/span> (entry.isIntersecting<\/span>) {\r\n const<\/span> img = entry.target<\/span>;\r\n img.src<\/span> = img.getAttribute<\/span>('data-src'<\/span>);\r\n img.classList<\/span>.remove<\/span>('lazy-load'<\/span>);\r\n observer.unobserve<\/span>(img);\r\n }\r\n });\r\n });\r\n\r\n lazyImages.forEach<\/span>(image<\/span> =><\/span> {\r\n imageObserver.observe<\/span>(image);\r\n });\r\n});<\/code><\/pre>\nUsing Scroll Event (less efficient, but compatible with older browsers):<\/strong><\/p>\nCopy<\/button>function<\/span> lazyLoadImages<\/span>() {\r\n const<\/span> lazyImages = document<\/span>.querySelectorAll<\/span>('img.lazy-load'<\/span>);\r\n lazyImages.forEach<\/span>(img<\/span> =><\/span> {\r\n if<\/span> (img.getBoundingClientRect<\/span>().top<\/span> < window<\/span>.innerHeight<\/span> && img.getBoundingClientRect<\/span>().bottom<\/span> > 0<\/span>) {\r\n img.src<\/span> = img.getAttribute<\/span>('data-src'<\/span>);\r\n img.classList<\/span>.remove<\/span>('lazy-load'<\/span>);\r\n }\r\n });\r\n}\r\n\r\nwindow<\/span>.addEventListener<\/span>('scroll'<\/span>, lazyLoadImages);\r\nwindow<\/span>.addEventListener<\/span>('resize'<\/span>, lazyLoadImages);\r\nwindow<\/span>.addEventListener<\/span>('DOMContentLoaded'<\/span>, lazyLoadImages);<\/code><\/pre>\nAdvantages:<\/strong><\/p>\n\nMore control over when and how images load.<\/li>\n Can be tailored for additional optimization strategies.<\/li>\n<\/ul>\n<\/span>2.3 Using a Lazy Loading Library<\/span><\/h4>\nThere are several libraries available that can simplify the implementation of lazy loading. Some popular libraries include:<\/p>\n
\nlazysizes<\/strong>: A versatile lazy loading library that supports both images and background images.<\/li>\nLozad.js<\/strong>: A lightweight library that makes lazy loading easy to implement.<\/li>\n<\/ul>\nExample using lazysizes:<\/strong><\/p>\n\nInclude the Library<\/strong>: Add lazysizes via CDN.<\/li>\n<\/ol>\nCopy<\/button><script<\/span> src<\/span>=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lazysizes\/5.3.2\/lazysizes.min.js\"<\/span> async<\/span>=\"\"<\/span>><\/span><\/script<\/span>><\/span><\/span><\/code><\/pre>\n\nUse the Correct Markup<\/strong>:<\/li>\n<\/ol>\nCopy<\/button><img data<\/span>-src=\"image.jpg\"<\/span> class<\/span>=\"lazyload\"<\/span> alt=\"Description\"<\/span>><\/code><\/pre>\nWith lazysizes, the library will automatically replace data-src<\/code> with the src<\/code> attribute when the image is almost in the viewport.<\/p>\nAdvantages:<\/strong><\/p>\n\nFeature-rich libraries often come with additional functionalities, such as background-image<\/code> support and responsive loading.<\/li>\n<\/ul>\nLazy loading is just one part of optimizing images for mobile. You should also consider optimizing images themselves to enhance performance further.<\/p>\n
<\/span>3.1 Choose the Right Image Format<\/span><\/h4>\n\nWebP<\/strong>: Offers superior compression compared to JPEG and PNG. If supported by the browser, use WebP for even smaller file sizes.<\/li>\nJPEG<\/strong>: Suitable for photographs; compress to minimize file size without sacrificing much quality.<\/li>\nPNG<\/strong>: Best for images that require transparency.<\/li>\n<\/ul>\n<\/span>3.2 Use Responsive Images<\/span><\/h4>\nUsing the <picture><\/code> element or srcset<\/code> attribute allows the browser to choose the most appropriate image size based on the user’s device.<\/p>\nExample:<\/strong><\/p>\nCopy<\/button><img<\/span> src<\/span>=\"image-small.jpg\"<\/span> \r\n srcset<\/span>=\"image-medium.jpg 768w,\r\n image-large.jpg 1200w\"<\/span> \r\n sizes<\/span>=\"(max-width: 768px) 100vw, \r\n (max-width: 1200px) 50vw, \r\n 33vw\"<\/span>\r\n alt<\/span>=\"Description\"<\/span> loading<\/span>=\"lazy\"<\/span>><\/span><\/span><\/code><\/pre>\n