Lazy Loading Images and Videos: How It Works and How to Do It Right

A long article or product page can contain dozens of images, but a visitor only sees the first few when the page opens. Lazy loading means waiting to download the rest until the visitor scrolls near them. Done well, pages open faster and use less data. Done badly, the most important image arrives late and the page feels slower. Here is how to get it right.

Native lazy loading: one attribute

All modern browsers support lazy loading built in:

<img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">

The browser starts the download shortly before the image scrolls into view. The exact distance depends on the browser and the connection speed, so images are usually ready by the time they appear. The same attribute works on <iframe>, which is very useful for embedded YouTube or map players.

Always include width and height. They let the browser reserve the right amount of space, so the page doesn't jump when the image arrives.

JavaScript lazy loading (data-src)

Before the native attribute existed, sites used scripts. The HTML contains a placeholder in src and the real address in an attribute such as data-src, data-lazy-src or data-original. A script swaps them when the image nears the screen. Many themes and plugins still do this.

The downside is that nothing loads until the script runs. If it fails or is delayed, images stay blank. Native lazy loading is simpler and more robust, so prefer it for new work.

The most common mistake: lazy-loading the hero

Largest Contentful Paint (LCP), one of Google's Core Web Vitals, measures how quickly the biggest element at the top of the page appears. That element is often an image. If it has loading="lazy", the browser waits until it has worked out the layout before requesting it, which can noticeably delay LCP.

Never lazy-load images that are visible without scrolling.
For the main image, add fetchpriority="high" so the browser fetches it first.
Lazy-load everything below the first screen.

Lazy loading video

The <video> element doesn't support loading="lazy", but you can get the same effect:

Use preload="none" and a poster image, so nothing heavy downloads until the visitor presses play.
For autoplaying background videos, add the src with a small script when the video scrolls into view, or replace the video with its poster on slow connections.
For YouTube and other embeds, loading="lazy" on the iframe is enough, or show a thumbnail that loads the player only when clicked (a “facade”).

Does lazy loading hurt SEO?

Not when you use native lazy loading or a well-behaved script. Google's crawler renders pages and can see lazy-loaded images, but it doesn't scroll like a person, so content that only loads on scroll or click events might be missed. Two safe rules: keep the real image address in the HTML (in src or srcset), and don't make images depend on user interaction to load. Our image SEO guide covers the rest.

Why lazy images seem “missing” when you save a page

If you save a page or use a simple downloader, lazy images may be missing or appear as grey placeholders, because they were never loaded. Our extractor handles this in two ways: it reads common lazy attributes such as data-src and data-srcset straight from the HTML, and its bookmarklet collects what the live page has loaded after you scroll. If something is still missing, scroll to the bottom of the page first, then run the bookmarklet.

Checklist

Add loading="lazy" to images and iframes below the first screen.
Remove it from the hero image and add fetchpriority="high".
Always set width and height.
Use preload="none" plus a poster for videos.
Check the result with PageSpeed Insights and the Network tab.