Element Type

Framework

Implementation

Image Settings

Actions

Generated Code

<img
  src="https://example.com/image.jpg"
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
/>

Browser Support

Chrome77+
Firefox75+
Safari15.4+
Edge79+

Native lazy loading is supported in all modern browsers. Intersection Observer has even better support (93%+ globally).

Lazy Loading Best Practices

  • Always set dimensions: Specify width and height to prevent layout shifts (CLS)
  • Use placeholders: Blur or LQIP placeholders improve perceived performance
  • Don't lazy load above-the-fold: Critical images should load immediately
  • Test on slow connections: Throttle network to verify loading behavior
  • Consider preloading: Use rel="preload" for critical below-fold images
  • Use native when possible: loading="lazy" has best performance and simplicity