Lazy Load Images In Chrome With This Simple Trick

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.

Random Articles For You

Cache Static Files With NGINX Server

Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench

Create Zip File On The Fly With Streaming Download In PHP Laravel

Install Packages Parallel For Faster Development In Composer

Increase Session Timeout In Laravel

TRUNCATE vs DELETE In MySQL

Laravel Clear Cache Of Route, View, Config Command

Make Laravel Controllers Slim By Skimming Form Validation Request

Multiple File Uploads In Laravel PHP

Why You Should Run Cronjobs In Laravel?

Client-Side DataTable, Adding Super Powers To HTML Table

Securely SSH Your Server & Push Files With FileZilla

Website Speed and Performance Optimizations

Add Google ADS In AMP (Accelerated Mobile Pages) Website

Google, Twitter, GitHub, Facebook & Many Other Social Generic Logins With PHP Laravel Socialite