Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Lazyloads images processed by gatsby-remark-images with using lazysizes

The plugin makes lazyload possible by:

  • Move src and srcset to data-src and data-srcset respectively.
  • Add class lazyload to img tag.

lazysizes has to be installed to make this plugin work.


npm install --save gatsby-remark-lazy-load

npm install --save lazysizes

How to use

// In your gatsby-config.js
plugins: [
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
          resolve: `gatsby-remark-images`,
// In your gatsby-browser.js
import 'lazysizes'


This is a minimum plugin. Please make an issue when you need more functionalities or code doesn’t work!

© 2023 Gatsby, Inc.