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.
lazysizes must also be installed.
yarn add gatsby-remark-lazysizes lazysizes
Add lazysizes to gatsby-browser.js
import 'lazysizes'
// gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-lazysizes`],
},
},
]