next/image offset loading

This example shows how lazy loading works on next/image.


When using the priority prop the image will be considered high priority and preload. Lazy loading is automatically disabled for images using priority.

Vercel logo

This image has priority so it has been preloaded.


Images are lazy loaded by default when using next/image, this means that the image won't be loaded until they are about to enter the viewport.

Vercel logo

This image has loading="eager" so it has been loaded immediately.

Vercel logo

This image has loading="lazy" (default) so it has been lazy loaded.

Lazy boundary

Images will start loading when the lazyBoundary is crossed (defaults to 200px). We will demo this with a few images with different lazyBoundary values. Each image will have a 100vh margin so you will have to scroll.

Blue logo:(200px offset)🕓

Pink logo:(100px offset)🕓

Green logo:(20px offset)🕓

Vercel logo

This image has lazyBoundary="200px"

Vercel logo

This image has lazyBoundary="100px"

Vercel logo

This image has lazyBoundary="20px"