Overview

unlazy provides a number of methods to help you with lazy loading images. The following methods are available:

• lazyLoad – Lazy load images
• autoSizes – Automatically calculate the sizes attribute
• loadImage – Manually load an image

Server-Side Rendering

unlazy supports server-side rendering for BlurHash and ThumbHash strings. This means that you can generate the placeholder images for the src attribute with SSR and avoid the Cumulative Layout Shift (CLS) caused by the images loading after the page has been rendered.

Both the unlazy/blurhash and unlazy/thumbhash exports provide a createPngDataUri function that can be used to generate a PNG data URI for a BlurHash or ThumbHash string, respectively. This function can be used to generate the src attribute for the <img> element.

• createPngDataUri – Generate a PNG data URI for a BlurHash string
• createPngDataUri – Generate a PNG data URI for a ThumbHash string