morimi / gatsby-remark-lazysizes

gatsby-remark-lazysizes

Make img tags transformed by gatsby-transformer-remark correspond to lazysizes.
Added support for GIF animation images duplicated by gatsby-remark-copy-linked-files, since gatsby-remark-lazy-load only supported images from gatsby-remark-images.
Also, support for cases where there is more than one image in a paragraph.

Install

lazysizes must also be installed.

yarn add gatsby-remark-lazysizes lazysizes

How to use

Add lazysizes to gatsby-browser.js

import 'lazysizes'

// gatsby-config.js

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-lazysizes`],
    },
  },
]