レスポンシブ画像を提供する
デスクトップサイズの画像をモバイルデバイスに配信すると、実際に必要なデータの2〜4倍以上のデータが必要になる場合があります。汎用的なやり方ではなく、それぞれのデバイスに合った異なる画像サイズを提供します。
画像のサイズを変更する #
画像サイズ変更ツールとして最も人気が高いのは、sharp npmパッケージとImageMagickCLIツールの2つです。
sharp パッケージは、画像のサイズ変更を自動化するのに適しています（ウェブサイト上のすべてのビデオに対して複数のサイズのサムネイルを生成するといったことができます）。高速で、ビルドスクリプトやツールと簡単に統合できます。一方のImageMagickは、完全にコマンドラインから使用されるため、1回限りの画像サイズ変更に便利です。
sharp #
sharpをノードスクリプトとして使用するには、こちらのコードをプロジェクトに別のスクリプトとして保存し、それを実行して画像を変換します。
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幅300px、高さ200pxの範囲内に収まるように画像のサイズを変更するには、次のコマンドを実行します。
# 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幅が480pxであることをブラウザに知らせます。 1080wは幅記述子であり、flower-large.jpg幅が1080pxであることをブラウザに知らせます。
「幅記述子」という言葉は格好良く聞こえますが、ブラウザに画像の幅を知らせる方法にすぎません。これにより、ブラウザが画像のサイズを決定するために、わざわざその画像をダウンロードする必要がなくなります。
追加情報： 密度記述子について知らなくても、さまざまな画像サイズを提供することができます。ただし、密度記述子の仕組みについて興味がある方は、Resolution Switching code lab (解像度切り替えコードラボ)をご覧ください。密度記述子は、デバイスのピクセル密度に基づいてさまざまな画像を提供する際に使用されます。
「sizes」属性 #
「sizes」属性は、画像が表示された時に持つ幅をブラウザに指定するものです。ただし、sizes属性は表示サイズには影響しません。それには、CSSが必要になります。
ブラウザは、この情報とユーザーのデバイスについて分かっている情報（つまり、そのサイズとピクセル密度）を使用して、読み込む画像を決定します。
ブラウザは、「sizes 」属性を認識できない場合は、src 」属性で指定された画像の読み込みにフォールバックします。(ブラウザは、「sizes 」属性と「 srcset 」属性のサポートを同時にリリースしているため、両方の属性をサポートする可能性とどちらもサポートしない可能性があります。
追加情報格好良くやりたい場合は、sizes属性を使用して複数のスロットサイズを指定することもできます。これは、さまざまなビューポートのサイズに応じてさまざまなレイアウトを使用するウェブサイトに対応します。このやり方については、複数のスロットコードサンプルを確認してください。
(さらなる) 追加情報 #
上述した追加情報に加えて（そう、画像は複雑なんです！）、 アートディレクションにもこれらと同じ概念を使用できます。アートディレクションとは、（同じ画像の異なるバージョンではなく）外観が完全に異なる画像を異なるビューポートに提供することを言います。詳細は、アートディレクションコードラボでご確認いただけます。
確認 #
レスポンシブ画像を実装したら、Lighthouseを使用して、すべての画像が使用されていることを確認できます。Lighthouseのパフォーマンス監査（Lighthouse > Options > Performance）を実行し、Properly size images (適切にサイズ調整された画像) 監査の結果を探します。結果には、サイズ変更が必要な画像が一覧表示されます。