Eleventy(11ty)のCanaryバージョンのインストール

Eleventy(11ty)公式のImageプラグインを確認したところ、非常に便利そうなので、この日記サイトに導入をしようと思い、早速インストールしました。

npm i -D @11ty/eleventy-img

.eleventy.jsを編集し、buildしたら、エラーが表示されました。

ドキュメントをみると、Canaryバージョンのインストールが必要とのことで、v3.0.0-alpha.5をインストールしました。

npm i @11ty/eleventy@canary --save-exact -D

Calling all courageous canary testers for Eleventy v3.0 — Eleventy

公式のImageプラグインについて

Low level utility to perform build-time image transformations for both vector and raster images.
Output multiple sizes, save multiple formats, cache remote images locally.
Uses the sharp image processor.

Google翻訳
ベクター画像とラスター画像の両方に対してビルド時の画像変換を実行する低レベルのユーティリティ。
複数のサイズを出力し、複数の形式で保存し、リモート画像をローカルにキャッシュします。
シャープ製画像処理エンジンを採用。

Image — Eleventy

どのように便利になったのか？

導入前

<figure>
  <img src="{{ page.url }}2024-04-05_03-51-38.png" alt="Snagit 2024 の新機能" width="2400" height="3138">
  <figcaption>Snagit 2024 の新機能</figcaption>
</figure>

導入後

<figure>
  {% image page , "2024-04-05_03-51-38.png", "Snagit 2024 の新機能" %}
  <figcaption>Snagit 2024 の新機能</figcaption>
</figure>

build後のHTML

<figure>
  <picture>
    <source type="image/webp" srcset="/2024/04/04/1500/2024-04-05_03-51-38-400w.webp 400w, /2024/04/04/1500/2024-04-05_03-51-38-800w.webp 800w, /2024/04/04/1500/2024-04-05_03-51-38-1280w.webp 1280w, /2024/04/04/1500/2024-04-05_03-51-38-1500w.webp 1500w, /2024/04/04/1500/2024-04-05_03-51-38-2000w.webp 2000w, /2024/04/04/1500/2024-04-05_03-51-38-2400w.webp 2400w" sizes="100vw">
    <img alt="Snagit 2024 の新機能" loading="lazy" decoding="async" src="/2024/04/04/1500/2024-04-05_03-51-38-400w.png" width="2400" height="3138" srcset="/2024/04/04/1500/2024-04-05_03-51-38-400w.png 400w, /2024/04/04/1500/2024-04-05_03-51-38-800w.png 800w, /2024/04/04/1500/2024-04-05_03-51-38-1280w.png 1280w, /2024/04/04/1500/2024-04-05_03-51-38-1500w.png 1500w, /2024/04/04/1500/2024-04-05_03-51-38-2000w.png 2000w, /2024/04/04/1500/2024-04-05_03-51-38-2400w.png 2400w" sizes="100vw">
  </picture>
  <figcaption>Snagit 2024 の新機能</figcaption>
</figure>

Shortcodeについては、別で投稿したいと思います。