Implementing lazy loading for images with loading="lazy"for Drupal 11 , 10 , 9 , and 8

Home » Performance Optimization » Implementing lazy loading for images with loading="lazy"
Last updated :  
11.x , 10.x , 9.x , 8.x

A page with thirty images loads noticeably faster if only the five actually visible above the fold are fetched immediately, and the other twenty-five load only as the visitor scrolls toward them. That's lazy loading, and modern browsers support it natively through a single HTML attribute — no JavaScript library required.

What you'll learn in this lesson

  • The native loading="lazy" attribute, and why it needs no JS library in modern browsers
  • How Drupal's image field formatters expose this setting
  • Why you should never lazy-load your hero/above-the-fold image

The native attribute

<img src="https://drupalzone.azizengsol.com/sites/default/files/photo.jpg" loading="lazy" alt="A description" width="800" height="600">

Setting loading="lazy" tells the browser to defer fetching that image until it's within a rough scrolling distance of the viewport. This is native browser behavior (supported in all current major browsers), not a Drupal-specific feature — Drupal's job is simply making sure this attribute ends up on the right <img> tags.

Where Drupal exposes this

The core Image field formatter includes a "Image loading" setting in Manage display for any content type with an image field, with options for Eager (load immediately — the default, correct choice for above-the-fold images) and Lazy (defer — correct for anything further down the page, like a related-articles gallery). If you're rendering an image manually in a Twig template rather than through a field formatter, set the attribute yourself:

<img src="{{ image_url }}" loading="lazy" alt="{{ image_alt }}" width="{{ image_width }}" height="{{ image_height }}">
Never lazy-load your Largest Contentful Paint image (usually a hero banner or the first image in your main content) — doing so actively delays it, working against the Core Web Vital it's measured by. Lazy loading is for images the visitor hasn't scrolled to yet, not for the first thing they see.

See it for yourself

On a content type's Manage display page, open an image field's format settings and switch "Image loading" to Lazy, save, then inspect the rendered <img> tag's source — you'll see loading="lazy" added automatically.

Quick check: your homepage's large hero image is set to lazy-load, and your Lighthouse Performance score dropped. Why, and what's the fix? (Lazy loading an above-the-fold image delays its fetch until the browser thinks it's needed — but it's needed immediately, since it's visible on load. Set that specific image's loading behavior to Eager instead.)

Key takeaways

  • loading="lazy" is a native HTML attribute, not a Drupal-specific mechanism or JS library.
  • Drupal's core Image field formatter exposes it directly via a per-field "Image loading" setting in Manage display.
  • Always keep above-the-fold/LCP images set to Eager — lazy loading them hurts perceived performance rather than helping it.

Coming up next

Lazy loading controls when an image loads; the next lesson covers making sure each visitor downloads an appropriately-sized version of it in the first place — Using Responsive Image Styles.