ハウステンボス画像( 11 ty )の最適化方法

22561 ワード
webdev tutorial javascript テキストリンク
Originally Published on my blog
イメージを持つサイトを構築するには、最適化する必要があります
任意のコンテンツのシフトを避けるために、良いユーザーエクスペリエンスを提供します.
それを達成するためには、圧縮、サイズ変更、および画像の形式を変換する必要があります.
この記事では、私たちはあなたのイメージを
静的サイト生成ウェブサイトeleventy-img , and sharp .

開始する基本プロジェクトを作成する


新しいディレクトリを作成し、名前を付けます11ty-img-example または何をしたい.
その後、実行
yarn init -y
使えますnpm あなたが好むならば.
今すぐインストールeleventy , インデックスを作成します.日本鋼管
根本的にhtml マークアップ.
yarn add -D @11ty/eleventy
touch index.njk

<!-- index.njk -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11ty img example</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>
オープンユアpackage.json ファイルを追加し、devとbuildスクリプトを追加します.
// package.json

"scripts": {
  "dev": "eleventy --serve",
  "build": "eleventy"
}

ブラウザでプロジェクトを実行する


お気に入りのターミナルを開き、実行
yarn dev
現在オープンlocalhost:8080 あなたのブラウザと
カスタマイズされた11番目の設定なしで動作します.

画像を表示


いくつかのイメージを取得し、それらを配置してみましょうimages ディレクトリ.
内部index.njk テーマを表示してください.
ls images/

518k   0001.jpg
2.6M   0002.jpg
1.7M   0003.jpg
368k   0004.jpg
679k   0005.jpg
556k   0006.jpg
602k   0007.jpg
1.6M   0008.jpg
1.4M   0009.jpg

<!-- index.njk -->
<body>
  <img src="/images/0001.jpg" alt="image no 01" />
  <img src="/images/0002.jpg" alt="image no 02" />
  <!-- ... -->
</body>
ブラウザを開き、任意の画像をレンダリングする必要はありません.
はいそれが正しい😀 だってeleventy 取り扱いません
CSS、JS、またはイメージのような資産
自己によって.
クリエイトア.eleventy.js ルートディレクトリ上のファイル
次に書き込みます.
module.exports = (cfg) => {
  cfg.addPassthroughCopy("images");
}
現在すべての内部images ディレクトリ
はビルドディレクトリにコピーされます.
サーバーを再起動し、ブラウザに戻ってください
そして、すべてが動作する必要があります.

最適化のないテスト画像性能


どんな最適化の前にイメージをするか見ましょう.
devtool内のネットワークタブを開き、fast 3G ネットワークシミュレーションとして.
私の場合は50s すべての画像をレンダリングするには
画像サイズ以上2mb . それで、我々は方法を見つける必要があります
それをより速くするために.

プラグインの追加


それを使う時間ですeleventy-img , からのこのプラグイン
チームからレポを見つけることができますhere .
プロジェクトにインストールします.
yarn add -D @11ty/eleventy-img
オープン.eleventy.js ファイルを作成し、以前に書いた行を削除し、次のコードを追加します.
// .eleventy.js

const Image = require("@11ty/eleventy-img");

module.exports = (cfg) => {
  cfg.addNunjucksAsyncShortcode("Image", async (src, alt) => {
    if (!alt) {
      throw new Error(`Missing \`alt\` on myImage from: ${src}`);
    }

    let stats = await Image(src, {
      widths: [25, 320, 640, 960, 1200, 1800, 2400],
      formats: ["jpeg", "webp"],
      urlPath: "/images/",
      outputDir: "./_site/images/",
    });

    let lowestSrc = stats["jpeg"][0];

    const srcset = Object.keys(stats).reduce(
      (acc, format) => ({
        ...acc,
        [format]: stats[format].reduce(
          (_acc, curr) => `${_acc} ${curr.srcset} ,`,
          ""
        ),
      }),
      {}
    );

    const source = `<source type="image/webp" srcset="${srcset["webp"]}" >`;

    const img = `<img
      loading="lazy"
      alt="${alt}"
      src="${lowestSrc.url}"
      sizes='(min-width: 1024px) 1024px, 100vw'
      srcset="${srcset["jpeg"]}"
      width="${lowestSrc.width}"
      height="${lowestSrc.height}">`;

    return `<div class="image-wrapper"><picture> ${source} ${img} </picture></div>`;
  });
}
コードを壊しましょう
  • addNunjucksAsyncShortcode
    • と呼ばれる機能shortcodes レット
    カスタム関数を書くことでテンプレートエンジンを拡張します.
    我々のケースでは、我々は我々がテンプレートの中で使うことができる新しいショートコードを持っています
    執筆
    {% Image "/images/00.jpg", "this is an alt description" %}
  • stats = new Image(...)
    • SRC URL、フォーマット、および様々な幅をイメージプラグインに渡します.
    それで、我々はよく複数のサイズと各々のイメージのためにフォーマットを持っています.
  • const srcset = ...
    • the stats 結果はそのように見えます
    stats = {
  jpeg: [
    {
      url: '...',
      src: '...',
      srcset: '...'
    }
  ],
  webp: [
    ...
  ]
}
    すべてのサイズsrcsetを1つだけのsrcset文字列をreduce ファンクション
    私たちはコードにそれを注入することができます.
    変数の結果srcset
    srcset = {
  jpeg: '<srcset>'
  webp: '<srcset>'
}
  • const source = ... and const img = ...
    • 用途webp 形式source メインイメージタイプとしてjpg フォールバックimg タグ.
    今、我々は戻って全体に戻るには良いですpicture .

    を使用した後のテスト画像


    オープンindex.njk 置換するimg タグ付き
    <!-- index.njk -->

<!-- ... -->
{% Image "images/0001.jpg", "image no 01" %}
{% Image "images/0002.jpg", "image no 02" %}
{% Image "images/0003.jpg", "image no 03" %}
{% Image "images/0004.jpg", "image no 04" %}
<!-- ... -->

    PS: you have to write image paths include the full path from the root of the project to make it works.


    サーバーを再起動し、ブラウザに移動します.そして再びネットワークタブを開きます.
    ブーム💥 この時点でロードされたすべての画像5s 画像なし
    以上のサイズ120kb .

    遅延読み込みとぼやけ効果を追加


    これは、使用してコンテンツシフトを避けるために余分なステップです
    インラインbase64 画像と使用のためのプレースホルダとしてのイメージ
    JavaScriptがサポートされていないブラウザのフォールバックとして
    ネイティブのlazyloadingvanilla-lazyload .
    シャープなパッケージをインストールして、ぼやけたインラインBase 64イメージを得ます
    yarn add -D sharp
    on .eleventy.js シャープパッケージをインポートし、以下のコードを追加します.
    // .eleventy.js

const sharp = require('sharp');

// ...

const placeholder = await sharp(lowestSrc.outputPath)
  .resize({ fit: sharp.fit.inside })
  .blur()
  .toBuffer();

const base64Placeholder = `data:image/png;base64,${placeholder.toString(
  "base64"
)}`;

// ...
    置換src , srcset , and resize , to data-src , data-srcset , and data-resize .
    また、src 属性<img> へのタグsrc="${base64Placeholder}" .
    変更後の最終コード:
    const source = `<source type="image/webp" data-srcset="${srcset["webp"]}" >`;

const img = `<img
  class="lazy"
  alt="${alt}"
  src="${base64Placeholder}"
  data-src="${lowestSrc.url}"
  data-sizes='(min-width: 1024px) 1024px, 100vw'
  data-srcset="${srcset["jpeg"]}"
  width="${lowestSrc.width}"
  height="${lowestSrc.height}">`;
    そして、この記事の前に述べたように
    テンプレートエンジン、我々は使用するのでscript タグtype="module" 使うvanilla-lazyload パッケージ.
    on index.njk ボディタグ終了前</body> このスクリプトを追加します.
    <script type="module" async>
  import Lazyload from "https://cdn.skypack.dev/vanilla-lazyload";
  const lazyload = new Lazyload();
</script>
    IMGタグのためにこのスタイルを加えてください
    <style>
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
</style>

    Lazyload後のテスト画像


    ベール🎉, 今、私たちはあなたのサイトに良い探して高速画像を持っている.

    結論


    今、どのように統合する方法を知っているeleventy-img プラグインとvanilla-lazyload パッケージ
    あなたがイメージ最適化についてもっと学ぶ必要があるなら、あなたの
    チェックするblog 著者によってvanilla-lazyload .
    Githubの完全な例を見つけることができます

    22マハード / 第193のイメージ例


    これは私のブログ記事の完全な例です




    Promise
    CentOS 7 DockerCEのインストール