![Theme Switcher Image](https://stackcoder.in/images/theme-switcher.png?cb=stackcoder90070)
Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Google Chrome Version 79+ rolled out the new feature that allows developers too lazy load images by adding simple loading="lazy"
or loading="eager"
attributes to images.
Don't skip stay tuned till end of the article. I have shown you various implementation and tips too :)
loading="lazy"
)If you don't want the images to be loaded till the time users scrolls down to the content which is located off the screen then you can use the following loading attribute
<img src="image.png" loading="lazy" alt="Alternate name of the image">
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
loading="eager"
)If you want the images to be loaded immediately irrespective of the offscreen images or on screen images then you can use eager loading.
<img src="image.png" loading="eager" alt="Alternate name of the image">
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="eager">
</picture>
<img loading=lazy>
is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera), Firefox and the implementation for WebKit (Safari) is in progress.
Avoid lazy-loading images that are in the first visible viewport. Google recommends to add loading="lazy" to only images that are offscreen so make sure to keep in mind.
Hope this trick will help you load your website very faster than earlier with slightest change to your image.
Free SSL Certificate In cPanel With ZeroSSL & Certbot
Getting Started With AMP (Accelerated Mobile Pages)
What Is Composer? How Does It Work? Useful Composer Commands And Usage
Firebase Cloud Messaging (FCM) Browser Web Push Notifications Using Javascript And PHP
Accessors And Mutators In PHP Laravel
Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool
Route Model Binding In Laravel & Change Default Column id To Another Column
Relationship Table Data With Route Model Binding In Laravel
Resolve 404 Not Found In NGINX
Make Laravel Controllers Slim By Skimming Form Validation Request
Securely SSH Your Server & Push Files With FileZilla
Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)