ImageAlchemyCompression Studio

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.

Related guides

Images & Core Web VitalsResponsive imagesImage optimization guide

Compress your images now — free and private

Drop your files and ImageAlchemy 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

Frequently asked questions

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 <img> tag and the browser handles the rest, no JavaScript required.

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.

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.