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/
To install, add the following lines to your
[[plugins]]package = "netlify-plugin-lazy-load-images"
[[plugins]] line is required for each plugin, even if you have other plugins in your
netlify.toml file already.
# netlify.toml[[plugins]]package = "."[plugins.inputs]excludeFiles = applyContainer = "body"excludeElements = '[data-src], .lazy-load'replaceThreshold = 0
Array. Array of glob patterns to exclude from processing by this plugin. Defaults to .
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]'
Number. Miniumum size in bytes for an image to be replaced by placeholder