# 8 FAQs About Lazy Loading Images Answered

March 21, 2024
Posted by
Andrew Pottruff
# 8 FAQs About Lazy Loading Images Answered

What is lazy loading images?

Lazy loading images means that images on a web page are not loaded until they become visible in the user's viewport. This is done by adding a small script to the page that checks when each image becomes visible as the user scrolls down the page.

The actual image files are replaced with small placeholder or blank images in the HTML code. Once the user has scrolled down and the image is just about to become visible, the script loads the full image file from the server.

Why should you use lazy loading?

There are two main benefits of lazy loading images on your website:

  • Improves page load speed - Images can account for 60-65% of a web page's total size. Lazy loading prevents dozens or hundreds of images from slowing down the initial page load.
  • Saves bandwidth - Lazily loaded images are only requested from the server when needed, reducing unnecessary bandwidth usage.

Both of these lead to a faster, more optimized user experience.

How does lazy loading work?

Lazy loading works by running a script on each page that checks when an image appears in the user's viewport as they scroll.

  • The <img> element is given a loading="lazy" attribute.
  • The true image source is specified in a data-src attribute instead of src.
  • A small placeholder image is shown using the src attribute.

When the image is scrolled near, the script sets the src to the data-src to load the full image file.

What are the browser requirements for lazy loading?

Native lazy loading is supported in:

  • Chrome 76+
  • Firefox 75+
  • Safari 13.1+

For full cross-browser support, a JavaScript lazy loading library can be used like Lazysizes or Lozad.js.

How do you implement lazy loading in WordPress?

There are a few ways to lazy load images in WordPress:

What are the downsides to lazy loading images?

A few potential downsides include:

  • Sudden loading of images may briefly alter page layout and be jarring.
  • Lazy loading libraries add a bit more weight to the page.
  • Users quickly scrolling may notice images visibly loading in.
  • SEO crawler bots may not process lazily loaded images.

Proper implementation can avoid most of these drawbacks.

Does lazy loading work for mobile?

Yes, lazy loading can improve mobile site speed and data savings. The same loading="lazy" attribute and JavaScript works for mobile browsers.

Reduced image loading is especially impactful on mobile due to slower connections and data costs. Testing is key to ensure a smooth loading experience.

What types of images should you not lazy load?

Avoid lazy loading images above the fold or critical to the user experience, like:

  • Your logo
  • Hero images
  • Featured product images
  • Any image in the initial viewport

Ideally, users shouldn't notice or be impacted by lazy loading. Load critical images normally while leveraging lazy loading lower down the page.


Lazy loading defers offscreen image loading until users scroll near them. This technique can significantly improve page speed and mobile experience.

When properly implemented, lazy loading provides a smoother, more optimized browsing experience. Be mindful of critical above-the-fold images that should be loaded normally.