What is lazy loading of images?

It's deferring an image's download until it's about to enter the viewport. In modern browsers it's built in: add loading="lazy" to an tag and the browser handles the rest, no JavaScript required.

Should I lazy-load the hero image?

No. The hero image is usually the Largest Contentful Paint element, and lazy loading it delays the single most important render on the page. Load it eagerly with fetchpriority="high" and a preload hint. Lazy-load only below-the-fold images.

Does lazy loading help SEO?

Indirectly, yes. It reduces initial page weight and main-thread work, which improves LCP, INP and CLS — all Core Web Vitals metrics Google uses as ranking signals.

Lazy loading

Deferring image downloads until they're actually needed, cutting initial page weight and improving load times.

Definition

Lazy loading means an image is only fetched when it approaches the viewport. In modern browsers it needs no JavaScript: add loading="lazy" to the <img> tag. The browser estimates each image's position and loads off-screen images just before they scroll into view.

In practice

Lazy-load everything below the fold — never the hero image, which is usually the LCP element and should load eagerly with fetchpriority="high". Without lazy loading, a long page with 40 images downloads all of them immediately; with it, a visitor who reads two paragraphs never downloads most of them.

Images & Core Web Vitals Responsive images Image optimization guide

Compress your images now — free and private

Drop your files and ImageForge compresses them in your browser. No uploads, no accounts, no limits. Batch process hundreds at once and download a ZIP.

Open the compressor

100% private No signup