next/image offset loading

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

Priority

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

This image has priority so it has been preloaded.

Loading

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.

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

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.

This image has lazyBoundary="200px"

This image has lazyBoundary="100px"

This image has lazyBoundary="20px"