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.







Image Credits: Google, web.dev


Lazy Load Images In Chrome With This Simple Trick


GOOGLE IMAGE SEO
17th July 2020 2 mins read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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 :)


Lazy Loading Images (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


Normal Images

<img src="image.png" loading="lazy" alt="Alternate name of the image">


Images Inside <Picture>

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Eager Loading Images (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.


Normal Images

<img src="image.png" loading="eager" alt="Alternate name of the image">


Images Inside <Picture>

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="eager">
</picture>

Browsers Support


<img loading=lazy> is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera), Firefox and the implementation for WebKit (Safari) is in progress.


Takes Aways


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.

Conclusion


Hope this trick will help you load your website very faster than earlier with slightest change to your image.


WHATS NEXT?


Accessors And Mutators In PHP Laravel

SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel

@stack @push and @prepend In Laravel Blade

SummerNote WYSIWYG Text Editor

Client-Side DataTable, Adding Super Powers To HTML Table

Multiple File Uploads In Laravel PHP

File Upload In Laravel PHP

How To Create Gmail App Password For SMTP Mails

Free Live Chat Integration Using TAWK.IO

Laravel Custom Maintenance Page


Happy Coding :)








Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing