SnippetPerformance

Image Lazy Loading

Native lazy loading plus progressive enhancement with IntersectionObserver and LQIP pattern notes.

Explanation

Start with loading="lazy" and correct width/height (or aspect-ratio) to avoid CLS. For older browsers or blur-up, enhance with IntersectionObserver.

html

<img
  src="/images/hero.jpg"
  alt="Team collaborating at a whiteboard"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

javascript

export function lazyImages(selector = 'img[data-src]') {
  const imgs = [...document.querySelectorAll(selector)];
  if (!('IntersectionObserver' in window)) {
    imgs.forEach(reveal);
    return;
  }
  const io = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        reveal(entry.target);
        io.unobserve(entry.target);
      }
    },
    { rootMargin: '200px' }
  );
  imgs.forEach((img) => io.observe(img));

  function reveal(img) {
    const src = img.getAttribute('data-src');
    const srcset = img.getAttribute('data-srcset');
    if (src) img.setAttribute('src', src);
    if (srcset) img.setAttribute('srcset', srcset);
    img.removeAttribute('data-src');
    img.removeAttribute('data-srcset');
  }
}

typescript

export function lazyImages(selector = 'img[data-src]') {
  const imgs = [...document.querySelectorAll<HTMLImageElement>(selector)];
  if (!('IntersectionObserver' in window)) {
    imgs.forEach(reveal);
    return;
  }
  const io = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        reveal(entry.target as HTMLImageElement);
        io.unobserve(entry.target);
      }
    },
    { rootMargin: '200px' }
  );
  imgs.forEach((img) => io.observe(img));

  function reveal(img: HTMLImageElement) {
    const src = img.getAttribute('data-src');
    const srcset = img.getAttribute('data-srcset');
    if (src) img.src = src;
    if (srcset) img.srcset = srcset;
    img.removeAttribute('data-src');
    img.removeAttribute('data-srcset');
  }
}

Usage example

html

<img data-src="/photo.jpg" alt="..." width="400" height="300" />
<script>lazyImages();</script>

// Prefer native when possible:
// <img src="..." loading="lazy" decoding="async" width height alt>

Interview tips

✓Always set dimensions or aspect-ratio to prevent CLS.
✓loading="lazy" is ignored for images in the initial viewport in most browsers — that’s good.

Performance talking points

← All snippets

Explanation

Usage example

Interview tips

Related