# Responsively Lazy **Probably the best lazy loading implementation available.** - Perfect for responsive images - Truly lazy (absolutely no unnecessary requests) - **SEO friendly** (valid HTML) - Supports [WebP](https://en.wikipedia.org/wiki/WebP) and [AVIF](https://en.wikipedia.org/wiki/AVIF) - Customizable load threshold - Lazy load background images - Lazy load HTML

You can find a demo at [ivopetkov.github.io/responsively-lazy-v3/](https://ivopetkov.github.io/responsively-lazy-v3/) and learn how the magic works at [ivopetkov.com/responsively-lazy/](https://ivopetkov.com/responsively-lazy/) ## Download and install Download the minified [JS file](https://raw.githubusercontent.com/ivopetkov/responsively-lazy/master/responsively-lazy.min.js) or install via [npm](https://www.npmjs.com/package/responsively-lazy). ``` npm install responsively-lazy ``` The library does not have any dependencies, and it's just 2.5kb when gzipped and minified. ## Usage * Include the JS file in the head of the document ```html ``` * Add the following code for each image ```html

``` Values to customize: **aspect-ratio** The aspect ratio of the image (width/height) to reserve space. Skip if you don't know it. **src** The default (largest) image size. Will be used by very old browsers, search engines, social networks, etc. **data-responsively-lazy** (the star of the show) Must contain a list of image versions separated by commas. Each version must contain a path to the image and its size. Optionaly you can specify the file type (webp or avif). The first supported format for the selected width is used. ```html data-responsively-lazy="images/400.avif 400w avif, images/400.webp 400w webp, images/400.jpg 400w, ..." ``` The paths may be encoded if there are special characters like commas, spaces, etc. Example: https%3A%2F%2Fexample.com%2Fimage.jpg **data-responsively-lazy-threshold** Specify how close to the viewport an image should be to start loading. ```html data-responsively-lazy-threshold="500px" // can use percents too ``` **data-responsively-lazy-type=html** Lazy load HTML. Can contain JavaScript. ```html

``` **data-responsively-lazy-type=background** Lazy load image as a background image. ```html

``` **data-on-responsively-lazy-load** Run JavaScript code when the image is loaded. ```html data-on-responsively-lazy-load="..." ``` ## A new concept Responsively Lazy is very different from the other lazy loading libraries. Others make you break your HTML by removing the `src` attribute, or make you put some tiny version there, or make you use `

responsively-lazy

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past