This is a plugin for Pico CMS which provides a Markdown-like syntax to include lazy loaded images in your pages, powered by aFarkas/lazysizes. You can also include multiple sizes of source image per image element -- the user's browser then chooses the best one to download and display based on the conditions.
It's a convenient way to lazy load your images,
and make use of the HTML5 srcset attribute.
- Download the latest release of this plugin and decompress the folder to your Pico plugins directory.
- This plugin is effectively a nice abstraction within Markdown for
aFarkas/lazysizes, so make sure to include lazysizes in your theme file. The
easiest way to do it is by adding a script tag from cdnjs to your theme file,
just before the closing
<body>tag. - Images won't lazy load when JavaScript is disabled. Instead, they'll fallback onto a standard image using
<noscript>. To hide the non-functioning lazy loading images when the user has JavaScript disabled, add the following code to your theme's<head>.
<noscript>
<style>
// Hide images which should lazy load
.lazyload {
display: none;
}
</style>
</noscript>If you're looking for ways of adding a loading animation to your images, check the lazysizes repo.
All images added with this plugin's syntax have 100% width.
Include an image using the standard Markdown syntax, but swap ! for ?.
?[A cat on a mat](/assets/cat.png)
Include an image using the standard Markdown syntax, but swap ! for ?, and provide a comma-separated list of paths
and sizes or resolutions. The first path provided is the "default" in case the browser doesn't support the src
attribute, or if JavaScript is disabled.
For example:
?[A cat on a mat](/assets/cat-500w.png 500w, /assets/cat-1000w.png 1000w)?[A cat on a mat](/assets/cat-1x.png 1x, /assets/cat-2x.png 2x)