Skip to content
Get packs

lazysizes

A lightweight JavaScript lazy loader for images, responsive images, and iframes that needs little or no config

GitHub Download 5.3.1
Stars
17.7k
Forks
1.7k
Licence
MIT
Language
JavaScript
Last update
2.6 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

lazysizes is a small JavaScript script that delays loading images and iframes until they are about to appear on screen, so pages load faster. It works with ordinary HTML: you add a class and a data attribute, and it handles the rest. It also helps with responsive images by calculating the sizes attribute automatically and supporting picture and srcset markup.

  • Add lazy loading to a photo gallery by adding the lazyload class and a data-src attribute to each image
  • Serve responsive images with data-sizes="auto" and data-srcset so the browser picks an appropriately sized file
  • Lazy load embedded videos by setting data-src on an iframe with the lazyload class
  • Delay loading of images inside carousels or hidden menus that appear through user interaction

Great for

  • Websites with many images, such as photo galleries or long article pages
  • Developers who want lazy loading without writing much JavaScript configuration
  • Sites that show content in carousels, sliders, or infinite scroll and need visibility changes detected
  • Teams building responsive image markup who want automatic sizes calculation

Not ideal for

  • Projects that need full cross-browser responsive image support without polyfills: the README says a polyfill such as picturefill or one of its plugins is needed for full support
  • Pages where images must have an exact, pre-known width, because automatic sizes depends on the display width being calculable before loading
  • Users looking for a no-code website builder plugin: this is a script that web developers include in their pages
Step-by-step guide: how to use lazysizesInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install via npm

    npm install lazysizes --save

    Install via bower

    bower install lazysizes --save
  2. 2

    Run it

    • Install lazysizes with npm, or download lazysizes.min.js from the project site
    • Include the script in your page with a script tag that has the async attribute, or import it in your JavaScript
    • Add the class lazyload to an img or iframe and replace src with data-src
    • Open the page in a browser and scroll to confirm images load as they come into view
  3. 3

    Get the most out of it

    • Use data-sizes="auto" together with data-srcset that uses width descriptors so the browser can choose the best image
    • Apply the CSS rule img[data-sizes="auto"] { display: block; width: 100%; } to help automatic sizes calculation
    • Use the parent-fit plugin when images must fit a container, including use of object-fit
    • Add the attrchange or re-initialization extension when integrating with frameworks that change the DOM after load
    • Use the respimg or rias plugins if you need responsive image fallback support in older browsers

Downloads

Source code (.zip)gh-pages branch · straight from GitHubRelease 5.3.1Release notes and source

Strengths

  • Detects images that become visible through scrolling, CSS hover effects, or JavaScript, without manual setup, according to the README
  • Needs no JavaScript configuration for basic use, as the README describes markup-based usage
  • MIT licensed and has a long track record, with about 17.7k GitHub stars

Trade-offs

  • Full responsive image support across all browsers requires an additional polyfill, per the README
  • Automatic sizes only works when images have a calculable display width, which may need extra CSS such as display block and width 100%
  • The latest push shown is from April 2024, so recent maintenance activity may be limited

How it compares

ProjectStarsTypeLevelUpdatedBest for
lazysizes (this)17.7kLibrarybeginner2.6 years agoWebsites with many images, such as photo galleries or long article pages
fiber40.2kLibraryintermediate4 days agoGo developers building REST APIs or web backends
fastify37.3kLibrarybeginner4 days agoNode.js developers building JSON APIs or backend services
solid36.2kLibraryintermediate4 days agoDevelopers who want fine-grained control over what re-renders in a web UI
react-virtualized27.1kLibraryintermediate5 days agoReact developers who need to display long lists of items
million17.7kLibraryintermediate6 months agoReact developers whose apps have many elements that update often

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.