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

Katie Hempenius
Katie Hempenius
X

モバイル デバイスにパソコンサイズの画像を配信すると、使用できるデータ量が 2 ～ 4 倍になる 必要ありません。このページのガイドラインに沿って操作することで、 デバイスに応じて異なる画像サイズを 配信できます

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

レスポンシブ画像を提供すると、ページでディスプレイ機能が評価されます 画像の候補リストの中から 1 つを 基準に基づいて最適な広告が配信されますユーザーのデータを節約できます 主に画面の小さいデバイスに小さい画像を配信します。

画像の読み込みが速くなると、ページの読み込みが Largest Contentful Paint（LCP）。たとえばページの LCP 要素は、画像、テキスト、画像、 リソースの読み込み時間を短縮できます。

リソースの読み込み時間が短いほど、LCP イメージの読み込み時間が短くなり、 LCP スコアが表示されますLCP を低くすると、サイトの読み込みが速くなり、 特に重要なコンテンツ（LCP 要素）の読み込みが速くなるためです。 応答性の高い画像を配信すると、他の Google Cloud リソースの これにより、ページの読み込み全般を高速化できます。

画像のサイズ変更

最も一般的な 2 つの画像サイズ変更ツールは、シャープ 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 つのサイズの画像を配信しましょう配信する画像サイズを増やす ただし、サーバー上でより多くのスペースを占めるため、 少しだけ多くします

その他のオプション

Thumbor（オープンソース）などの画像サービス および Cloudinary も確認することをおすすめします。どちらも 画像を提供するレスポンシブな画像を簡単に作成できます。 オンデマンドで実行できます。Thumbor をセットアップするには、サーバーにインストールします。Cloudinary 細かい処理は自動で行われるため、サーバーの設定は必要ありません。

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

複数の画像バージョンを指定すると、ブラウザが最適なバージョンを 次のコマンドを使用します。

変更前 変更後
<img src="flower-large.jpg"> <img src="flower-large.jpg"srcset="flower-small.jpg 480w" flower-large.jpg 1080w"size="50vw">

<img> タグの src, srcset, および sizes すべての属性が相互に作用してこの最終結果を達成します。

「src」属性

src 属性があると、このコードは srcset と sizes をサポート 属性です。これらのブラウザは、代わりに URL で指定されたリソースを src 属性。

「srcset」属性

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

この例では、 幅記述子、 ブラウザは画像の幅を指定して わかります。480w は幅記述子です。ブラウザに対して以下を示します。 flower-small.jpg の幅は 480 ピクセルです。1080w は幅の記述子です。 flower-large.jpg の幅は 1,080 ピクセルです。

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

「サイズ」属性

サイズ属性はブラウザに対して、画像の横幅を ただし、画像の表示サイズには影響しないため、 作成します

ブラウザは、この情報と、ユーザーの情報について （寸法やピクセル密度を含む）によって、表示する画像を 負荷を軽減できます。

ブラウザで「sizes」が認識されない場合場合によって、元の Pod に 「src」で指定された画像を読み込んでいます属性です。（sizes、srcset は同時に導入されたため、すべてのブラウザは 指定しないか、どちらも指定しないかのどちらかです）

追加の実習: 設定するには、size [サイズ] 属性を使用して 複数のスロットサイズを使用できますこれにより、ウェブサイトのレイアウトが異なる ビューポートのサイズを変えて表示できます。複数スロットのコードサンプルをご覧ください。 ご覧ください。

（その他）追加の実習

これまでに説明したすべての追加クレジット（画像は複雑です）に加えて、 同じ概念を アート ディレクション。 アート ディレクションとは、見た目がまったく異なる画像を提供する手法 （同じ画像のバージョンが異なるのではなく）異なるビューポートに配置されます。マイページ 詳しくは、アート ディレクションの Codelab をご覧ください。

確認

レスポンシブ画像を実装したら、Lighthouse を使用して、 画像を見落とすことがありませんでしたLighthouse のパフォーマンス監査を実行する （[Lighthouse] > [Options] > [Performance]）に移動し、 適切なサイズの画像の監査。結果には、引き続き実行する必要があるイメージが クリックします。