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

Katie Hempenius

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

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

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

画像の読み込みが高速になるという効果は、ページの Largest Contentful Paint（LCP）にも及びます。たとえば、ページの LCP 要素が画像の場合、それをレスポンシブに提供するとリソースの読み込み時間を短縮できます。

リソースの読み込み時間が短いと、LCP 画像の読み込み時間が短縮され、ページの LCP スコアが改善されます。LCP が低いと、サイトの読み込みが速くなり、特に重要なコンテンツ（LCP 要素）の読み込みが速くなります。レスポンシブな画像を提供すると、ページ上の他のリソースとの帯域幅の競合も減るため、ページの読み込み速度全般を改善できます。

画像のサイズを変更

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

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 を設定するには、サーバーに Thumbor をインストールします。Cloudinary がお客様に代わって細かな処理を行い、サーバーの設定は必要ありません。

複数のイメージ バージョンを提供する

複数のイメージ バージョンを指定すると、ブラウザにより最適なものが選択されます。

この最終結果を得るため、<img> タグの src、srcset、sizes 属性は、すべて相互作用します。

「src」属性

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

「srcset」属性

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

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

追加の実習: さまざまな画像サイズを提供するための密度記述子について知る必要はありません。 密度記述子の仕組みについては、解像度の切り替えに関する Codelab をご覧ください。 密度記述子は、デバイスのピクセル密度に応じて異なる画像を表示するために使用されます。

「sizes」属性

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

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

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

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

（その他の）追加の実習

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

確認

レスポンシブ画像を実装したら、Lighthouse を使用して、画像を見逃さないようにすることができます。Lighthouse のパフォーマンス監査（[Lighthouse] > [Options] > [Performance]）を実行し、[Properly size images] の監査結果を確認します。結果には、サイズ変更が必要な画像が一覧表示されます。