サイト生成ツール、フレームワーク、CMS

WordPress などの CMS やその他のサイト生成ツールを活用して実現する方法を紹介します。 レスポンシブ画像を簡単に使用できます

一方で、各画像の交互の切り取りを手動で保存し、 開発プロセスの一ステップとして画像圧縮を自動化する Squoosh.app には、いくつかの制限があります。まず サイト全体で使用される画像を常に完全に制御でき、ウェブ上でユーザーに表示される画像のほとんどはコンテンツの問題である やはり、開発用アセットと一緒にリポジトリに保存するのではなく、ユーザーや編集者がアップロードします。 JavaScript とスタイルシート。

通常、この場合、画像管理に複数のプロセスが必要になります。具体的には、使用される画像アセットの開発レベルのタスクです。 サイト(背景、アイコン、ロゴなど)の構築と管理のほか、使用によって生成された画像アセットに関する担当者 編集チームが投稿した写真やユーザーがアップロードしたアバターなどコンテキストは 最終目標は同じです。開発チームが定義した設定に基づいて自動的にエンコードと圧縮を行います。

幸いなことに、ローカルの開発ワークフローで理解してきた画像処理ライブラリは、任意の数で使用できます 説明します。レスポンシブ画像のマークアップには万能のアプローチはあり得ませんが、これらのシステムは デフォルト、構成オプション、API フックが用意されているため、簡単に実装できます。

静的サイト生成ツール

タスクランナーと比較して、Jekyll や Eleventy などの静的サイト生成ツールが画像にアプローチする方法にいくつかの類似点があります。使用 デプロイ可能なウェブサイトを作成するためにこれらのツールを使用するには、CSS の圧縮、トランスパイル、バンドルなどのアセット管理が必要です。 使用できます。ご想像のとおり、これらのツールでは、多くのライブラリを使用して画像アセットを同じように処理できます。 学びました。

公式の Eleventy 用画像プラグインでは、Sharp を使用して、サイズ変更、複数のソースサイズの生成、再エンコード、圧縮を行います。これまで学習したタスクのいくつかと同様です。

タスクランナーとは異なり、静的サイト生成ツールは、これらのライブラリの設定と使用法の両方を直接分析できます。 本番環境サイト用に生成されるマークアップです。つまり、レスポンシブな画像を マークアップを追加します。たとえば、画像を表示するためのショートコードの一部として呼び出された場合、 渡される構成オプションに関連します。


const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {

async function imageShortcode(src, alt, sizes="100vw") {
  let metadata = await Image(src, {
  formats: ["avif", "webp", "jpeg"],
  widths: [1000, 800, 400],
  outputDir: "_dist/img/",
  filenameFormat: function( id, src, width, format, options ) {
      const ext = path.extname( src ),
        name = path.basename( src, ext );

      return `${name}-${width}.${format}`
  }
  });

  let imageAttributes = {
  alt,
  sizes,
  loading: "lazy"
  };

  return Image.generateHTML(metadata, imageAttributes);
}

eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};

このショートコードは、デフォルトの画像構文の代わりに使用できます。

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

上記のように、複数のエンコードを出力するように設定した場合、生成されるマークアップは、次の要素を含む <picture> 要素になります。 対応する <source> 要素、type 属性、srcset 属性に、 生成された候補サイズです。

<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>

もちろん、このプラグインでは最終的なサイズや位置がわからないため、有効な sizes 属性を生成することはできません。 が、マークアップを生成する際に入力として受け入れます。これは RespImageLint の別のジョブです。

フレームワーク

クライアントサイドのレンダリング フレームワークで、画像アセットを編集、エンコード、圧縮するには、Webpack などのタスクランナーやバンドラが必要 できます。たとえば、レスポンシブ ローダでも、Sharp ライブラリを使用して画像アセットを再保存します。その後、 次に、画像をオブジェクトとして import します。

  import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
  import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
  import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';

これらのインポートされた画像は、React の Image コンポーネントなどの抽象化を通じて使用したり、レスポンシブ ディスプレイ広告に 直接画像マークアップに対応しています。

<picture>
  <source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
  <source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
  <img
    src={imageDefault.src}
    srcSet={imageDefault.srcSet}
    width={imageDefault.width}
    height={imageDefault.height}
    sizes='…'
    loading="lazy"
  />

クライアントサイド レンダリングを行うフレームワークは、Lazysizessizes="auto" が有力候補です。 画像が生成されます。

コンテンツ マネジメント システム

WordPress は、ネイティブのレスポンシブ画像マークアップをいち早く取り入れた企業の 1 つで、API は WordPress 4.4 で導入され、WebP をサポートし、出力 MIME タイプの制御を可能にします。WordPress Core は ImageMagick PHP 拡張機能を使用するように設計されている (ない場合は GD ライブラリを使用します)。

WordPress の管理インターフェースからイメージをアップロードすると、そのソースイメージを使用して、ユーザー向けファイルが生成されます。 ローカルのマシンとほぼ同じ方法でサーバーを構成できます。デフォルトでは、WordPress が出力するイメージはすべて テーマで設定した画像サイズに基づいて生成された srcset 属性を使用します。

生成された画像で構成できる主な設定は、圧縮品質出力 MIME タイプの 2 つです。

たとえば、生成されるすべての画像のデフォルトの圧縮品質を 70 に設定するには、次のように指定します。

add_filter( 'wp_editor_set_quality', function() { return 70; } );

圧縮率をさらに高めるには、アップロードされた JPEG 画像の出力形式を、次のように WebP に切り替えます。

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

WordPress はすべての代替カットを完全に把握しているため 画像から生成してエンコードを行うほか、次のようなヘルパー関数を wp_get_attachment_image_srcset()~ 画像添付ファイルの、生成された完全な srcset 値を取得します。

ここから推測できるように、sizes 属性の操作はもう少し複雑になります。情報が不足している WordPress では現在、デフォルトで「この画像」という意味の sizes 値が設定されています。 最大ソースの本質的サイズまで、利用可能なビューポートの 100% を占有します。これは予測可能なデフォルト値ですが、正しい値ではありません。 実世界で応用できます必ず wp_calculate_image_sizes() を使用してください。 を使用すると、状況に応じた sizes 属性をテンプレートに設定できます。

もちろん、開発チームとユーザーにとっても、最新のイメージ ワークフローを高速化するための WordPress プラグインは数え切れないほどあります。 おそらく最も興味深いのは、Jetpack の Site Accelerator(旧称「Photon」)などのプラグインです。 はエンコードのサーバーサイド ネゴシエーションを提供します。これにより、ユーザーは最小かつ最も効率的なエンコードが ブラウザは、<picture>type のマークアップ パターンがなくてもサポートできます。これは、画像コンテンツを使用して行われます。 配信ネットワーク(CMS)とは無関係に活用できるテクノロジーです。

これはすべて、Shopify のようなホスト型 CMS ソリューションにも当てはまりますが、仕組み自体は若干異なります。 代替画像ソースと対応する srcset 属性を生成するためのフック および <picture> 要素を使用したアート ディレクション