レスポンシブな画像を配信する

Katie Hempenius

パソコン用サイズの画像をモバイル デバイスに配信すると、必要なデータの 2 ～ 4 倍のデータを使用する可能性があります。このページのガイドラインに沿って、デバイスごとに異なる画像サイズを配信することで、ユーザー エクスペリエンスを向上させましょう。

レスポンシブ画像と Core Web Vitals

レスポンシブ画像を配信すると、ページはユーザーのデバイスの表示機能を評価し、その基準に基づいて表示に最適な画像候補のセットから 1 つを選択します。これにより、主に画面の小さいデバイスに小さい画像を配信することで、ユーザーのデータが節約されます。

画像の読み込み速度の向上は、ページの Largest Contentful Paint（LCP）にも影響する可能性があります。たとえば、ページの LCP 要素が画像である場合、画像をレスポンシブに配信することで、リソースの読み込み時間を短縮できます。

リソースの読み込み時間が短くなると、LCP 画像の読み込み時間が短縮され、ページの LCP スコアが向上します。LCP が低いほど、サイトの読み込みが速く、特に最も重要なコンテンツ（LCP 要素）の読み込みが速いとユーザーに認識されます。レスポンシブ画像を配信すると、ページ上の他のリソースの帯域幅競合を軽減できるため、ページの読み込み速度が全体的に向上します。

画像のサイズを変更する

最も一般的な画像サイズ変更ツールは、sharp npm パッケージと ImageMagick CLI ツールです。

sharp パッケージは、画像のサイズ変更を自動化する場合（ウェブサイト上のすべての動画に複数サイズのサムネイルを生成するなど）に適しています。高速で、ビルド スクリプトとツールと統合しやすい。ImageMagick は、コマンドラインから完全に実行されるため、1 回限りの画像サイズ変更に便利です。

シャープ

sharp を Node スクリプトとして使用するには、このコードをプロジェクトに別個のスクリプトとして保存し、実行して画像を変換します。

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ImageMagick

画像のサイズを元のサイズの 33% に変更するには、ターミナルで次のコマンドを実行します。

convert -resize 33% flower.jpg flower-small.jpg

幅 300 ピクセル、高さ 200 ピクセルのスペース内に収まるように画像のサイズを変更するには、次のコマンドを実行します。

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

作成する画像のバージョンはいくつにすればよいですか？

この質問に対する「正しい」答えは 1 つではありません。ただし、3 ～ 5 種類の異なるサイズの画像を提供するのが一般的です。より多くの画像サイズを提供する方がパフォーマンスは向上しますが、サーバーの容量が増え、HTML の記述量も若干増えます。

その他のオプション

Thumbor（オープンソース）や Cloudinary などの画像サービスも検討に値します。どちらの方法でも、レスポンシブ画像を簡単に作成でき、オンデマンドで画像操作も可能です。Thumbor を設定するには、サーバーにインストールします。Cloudinary が詳細を処理するため、サーバー設定は不要です。

複数の画像バージョンを提供する

複数の画像バージョンを指定した場合は、ブラウザが最適な画像を選択します。

<img> タグの src、srcset、sizes の各属性が相互作用して、この最終的な結果が得られます。

「src」属性

src 属性を使用すると、srcset 属性と sizes 属性をサポートしていないブラウザでもこのコードを機能させることができます。これらのブラウザは、src 属性で指定されたリソースの読み込みにフォールバックします。

「srcset」属性

srcset 属性は、画像ファイル名とその幅または密度の記述子のカンマ区切りのリストです。

この例では、幅記述子を使用しています。これにより、画像の幅をブラウザに伝えることができるため、画像をダウンロードして確認する必要がなくなります。480w は、flower-small.jpg の幅が 480 ピクセルであることをブラウザに伝える幅記述子です。1080w は、flower-large.jpg の幅が 1,080 ピクセルであることをブラウザに伝える幅記述子です。

ボーナス ポイント: さまざまな画像サイズを提供するのに、密度記述子について知る必要はありません。ただし、密度記述子の仕組みについて詳しくは、解像度切り替えのコードラボをご覧ください。密度記述子は、デバイスのピクセル密度に基づいて異なる画像を提供するのに使用されます。

「sizes」属性

sizes 属性は、画像を表示する際の幅をブラウザに伝えます。ただし、画像の表示サイズには影響しないため、CSS が必要です。

ブラウザは、この情報と、ユーザーのデバイスに関する情報（寸法やピクセル密度など）を使用して、読み込む画像を決定します。

ブラウザが sizes 属性を認識しない場合、src 属性で指定された画像の読み込みにフォールバックします。（sizes と srcset は同時に導入されたため、すべてのブラウザが両方の属性をサポートするか、どちらもサポートしません）。

追加演習: 凝った表現をしたい場合は、sizes 属性を使用して複数のスロットサイズを指定することもできます。これにより、さまざまなビューポート サイズに異なるレイアウトを使用するウェブサイトに対応できます。方法については、複数のスロット コードサンプルをご覧ください。

（さらに）追加演習

すでに記載されている追加のクレジット（画像が複雑）に加えて、これらのコンセプトはアート ディレクションにも使用できます。アートディレクションとは、同じ画像の異なるバージョンではなく、まったく異なる画像を異なるビューポートに提供する手法です。詳しくは、アート ディレクションの Codelab をご覧ください。

確認

レスポンシブ画像を実装したら、Lighthouse を使用して、画像が欠落していないことを確認できます。Lighthouse パフォーマンス診断（[Lighthouse] > [Options] > [Performance]）を実行し、画像のサイズが適切な診断結果を確認します。これらの結果には、サイズ変更が必要な画像が一覧表示されます。