lazyimg
Lazy image loading made easy. With automatic image resizing and LQIP support.
- Lazy loading for images via
lazySizes - No-Script-safe: Fallback to browser's native method
- ...
Used by the Osprey Delight theme, which directly benefits from this module!
Go get it
Initialize Hugo's mod system on your site:
hugo mod init github.com/{username}/{repo}
Add module to site's config (e.g. config.yaml):
module:
imports:
- path: github.com/hugo-mods/lazyimg
Get the module (also upgrades existing one):
hugo mod get -u
Quickstart
- Put the images which you want to use in the
assetsdirectory of your project. They should be in a high resolution and will be resized automatically. - Add the following boilerplate setup code to your site's
<head>:
{{ partial "lazyimg-setup" }}
- Load the image by calling the
lazyimgpartial where you would usually use animgtag:
{{ partial "lazyimg" "my-awesome-image.jpeg" }}
For more advanced usage, please refer to the exampleSite for a practical approach or continue reading the theory as described in the next section.
Configuration
Resizers
| Name | Description |
|---|---|
simple |
Produces default image with maxSize, LQIP with lqipSize. |
responsive |
Produces default image with maxSize, LQIP with lqipSize and responsive images based on responsiveSizes. |
auto |
Produces default image with maxSize, LQIP with lqipSize and guesses responsive sizes based on an algorithm. Highly experimental. |
Renderers
| Name | Description |
|---|---|
lqip |
All-around responsive lazy-loading with LQIP blur-up preview. Recommended: lazyimg.css. |
lqip-webp |
lqip with additional WebP support. TODO(kdevo): not implemented yet. |
CSS
The lazyimg.css is the recommended boilderplate CSS.
It contains rules for blur-up animation, hiding "broken image icon" on lazy-loading and no-js selector.
Disabled JS
Support for disabled JS can be accomplished by adding a "no-js" class to your html root tag, e.g.:
<html lang="en" class="no-js"> <!-- ... --> </html>
Then, to remove the class when the client indeed supports JS, add the following script:
<script>document.documentElement.className = "js"</script>
Alternatively, use lazyimg-setup-nojs instead of lazyimg-setup which will do the replacement for you.
In this case, you only need to add the no-js class to your html root tag.