netlify-plugin-lazy-load-images

Netlify lazy load images plugin

Once site is built, this plugin replaces src and srcsets with inline placeholders and appends a script to lazy load the real sources when the images intersect with the viewport.

Most useful where large image content is added by a site admin through a wysiwyg, a richtext editor, or markdown.

An example of the plugin in action lives here: https://lazy-load-plugin-test.netlify.app/

Installation

To install, add the following lines to your netlify.toml file:

[[plugins]]
package = "netlify-plugin-lazy-load-images"

Note: The [[plugins]] line is required for each plugin, even if you have other plugins in your netlify.toml file already.

Configuration

# netlify.toml
[[plugins]]
  package = "."
    [plugins.inputs]
      excludeFiles = []
      applyContainer = "body"
      excludeElements = '[data-src], .lazy-load'
      replaceThreshold = 0

excludeFiles

Array. Array of glob patterns to exclude from processing by this plugin. Defaults to [].

excludeElements

String. CSS selector to match on elements to be excluded from lazy-loading. Defaults to selectors used in popular lazy-loading libraries. '.lazy, .lazy-load, [data-src]'

replaceThreshold

Number. Miniumum size in bytes for an image to be replaced by placeholder