> For the complete documentation index, see [llms.txt](https://jsoverflow.gitbook.io/books/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jsoverflow.gitbook.io/books/lazy-loading-images-and-video.md).
# Lazy Loading Images and Video
## **What is lazy loading ?**
Lazy loading is technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need.
## **Why lazy load images, video instead of just loading them?**
1. Because it’s possible you’re loading stuff the user may never see:
* It wastes data. Be a waste of their money.
* It wastes processing time, battery, and other system resources.
2. When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.
## **Lazy loading images.**
### Inline Images
* The most common lazy loading candidates are images as used in \![]()
elements.
* When we lazy load \![]()
elements, we use JavaScript to check if they're in the viewport.
* If they are, their src (and sometimes srcset) attributes are populated with URLs to the desired image content.
#### **Using intersection observer:**
* If you've written lazy loading code before, you may have accomplished your task by using event handlers such as scroll or resize.
* Modern browsers offer a more performant and efficient way to do the work of checking element visibility via [the intersection observer API](https://developers.google.com/web/updates/2016/04/intersectionobserver).
* Intersection observer is easier to user and read but it’s not [universal](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility).
#### Example
#### **Using event handlers (the most compatible way):**
Best way to use lazy loading with Inline images is: **Intersection + event handlers**.
### Image in CSS
* The url is declared in css: background-image.
* When resource in screen we’ll add image to contents by add css class.
## **Lazy Loading Video**
### Does not autoplay
1.For videos where playback is initiated by the user (i.e., videos that don't autoplay). Use [preload attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload).
2\. Use poster attribute which lets you specify a placeholder.
### Like animated GIF
**For video acting as an animated GIF replacement.**
1. They play automatically when loaded.
2. They loop continuously.
3. They don't have an audio track.
## **Lazy Loading libraries**
* [Lazysizes](https://github.com/aFarkas/lazysizes)
* [Lozad.js](https://github.com/ApoorvSaxena/lozad.js)
* [Blazy](https://github.com/dinbror/blazy)
* [Yall.js](https://github.com/malchata/yall.js)
* [React-lazyload](https://github.com/jasonslyvia/react-lazyload) (only react)
## **What can go wrong ?**
* So much benefits but not easy.
* If you get it wrong, there could be unintended consequences.
* I will show you some note.
**Some note:**
* Layout shifting and placeholders.
* Image decoding delays.
* When stuff doesn't load.
* JavaScript availability.
* [Mind the fold.](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#mind_the_fold)
**Layout shifting and placeholders:**
What happen if shifting in the layout if placeholders aren't used ?
* Trigger expensive DOM layout operations that consume system resources.
For **\![]()
** tags, **src** should initially **point** to a **placeholder** until that attribute is updated with the final image URL.\
The **poster** attribute in a **\