https://github.com/enjikaka/lume_plugin_squoosh
Plugin for static site generator Lume to resize and encode images with Squoosh.
https://github.com/enjikaka/lume_plugin_squoosh
deno lume squoosh static-site-generator
Last synced: 2 months ago
JSON representation
Plugin for static site generator Lume to resize and encode images with Squoosh.
- Host: GitHub
- URL: https://github.com/enjikaka/lume_plugin_squoosh
- Owner: enjikaka
- Created: 2021-05-10T17:59:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-14T11:31:19.000Z (about 4 years ago)
- Last Synced: 2025-02-19T05:47:13.281Z (over 1 year ago)
- Topics: deno, lume, squoosh, static-site-generator
- Language: TypeScript
- Homepage: https://deno.land/x/lume_plugin_squoosh
- Size: 57.6 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lume_plugin_squoosh
A plugin for Lume to use Squoosh CLI for handling images for your static site.
Requires that you have Node installed for running Squoosh CLI via npx.
## Usage
In your Lume `_config.js` file import and add this plugin like so:
```js
import squoosh from "https://deno.land/x/lume_plugin_squoosh@v0.0.9/index.ts";
const site = lume();
site.use(squoosh());
```
The squoosh method takes an optional parameter than is an array of formats to generate. If not set, it default to generating WEBP and AVIF.
Example of editing output formats:
```js
import squoosh from "https://deno.land/x/lume_plugin_squoosh@v0.0.9/index.ts";
const site = lume();
site.use(squoosh(['jxl', 'wp2']));
```
Put your images like normal in the img directory and reference them in your post with an HTML-image tag and specify desired sizes with the `width` and `data-srcset` attribute.
```html
```
Make sure that `width` is the same as the actual final element with on your page, for loading performance reasons. `width="600"` and `data-srcset="1x, 1.5x, 2x"` above instructs the plugin to render sizes at 600px, 900px and 1200px.
The plugin will transform the `![]()
` tag into a `` tag with the desired formats from _config.js (or the default ones if not set) and with all the sizes:
```html
```
## Real world use case
If you want a real world use-case example this plugin is used for my farm blog.
Live site: https://barlingshult.se
Source: https://github.com/enjikaka/barlingshult