今日はウェブのレスポンシブ画像について話します。非常に人気があり、かなり問題のあるトピックです。

このトピックを検索すると、あらゆる種類の説明を含む無数の記事が見つかりますが、私はそれらを繰り返すのではなく、別の方法で教えます。

画像を正しく読み込み、SEOランキングを向上させ、ウェブサイトのユーザーエクスペリエンスを改善しましょう。

レスポンシブ画像とは？

レスポンシブ画像は自動的に画面のサイズに合わせて調整されます（されるべきです）。しかし…それは正しいやり方でしょうか？まあ、はいでもあり、いいえでもあります。これをGoogleで検索したり、Bootstrapのようなモダンなフレームワークを見ると、「レスポンシブ画像」の定義が次のようなシンプルなCSSであることに気づくでしょう：

1max-width: 100%;
2height: auto;

これは「動作します」が、完全に正しいわけではありません。いくつかの理由がありますが、最も重要なのは画像サイズです。画像の「幅/高さ」の話ではなく、キロバイト/メガバイト単位の実際の画像サイズの話です。

ほとんどのウェブサイト（これまで見てきたウェブサイトの約80%）は、信じられないほど大きな画像を使用し、単純にそれを拡大縮小しています。そのような画像は通常1000pxから4000px、さらには8000pxのものさえ見ました！！！（どれだけクレイジーなことか）。

これらの画像は非常に大きく、1MBから10MB、さらには20MBにもなりがちです。画像をエクスポートする際に圧縮する人をほとんど見たことがありません。つまり、5枚、10枚、20枚またはそれ以上の画像で構成された画像の多いウェブサイトがあり、ユーザーがモバイルでアクセスした場合を想像してください。5Gであっても、画像だけでダウンロードするデータ量は膨大で、その他のコンテンツは言うまでもありません。

レスポンシブ画像の作り方は？

ブラウザはimage source set（srcset）のサポートで助けてくれます。この機能により、異なるサイズの画像の複数バージョンを効果的に持つことができ、ブラウザが画面サイズに基づいて適切なものを選択します。これがレスポンシブです！

しかし、ほとんどの人は「わからない」から「理解できない」まで、さまざまな理由でimage source setに対応できません。

技術の進化により、オンラインツールやAPIを使用してこれらのsource setを自動的に作成できるようになりました。しかし、慌てないでください。自動的に作成することは、結果を単純にコピー&ペーストして正しく動作することを期待できるという意味ではありません。

これまでの全ての作業とテストから、「万能の」解決策はなく、常に追加の作業が必要です。

適切なHTML画像タグの選択

これは最初に理解すべき最も重要なことです。従来の<img />タグまたはモダンな<picture>タグを使用できます。

それぞれに落とし穴がありますが、私の経験では<picture>が常に勝ちます。このタグはブラウザで広くサポートされているので、問題にはならないはずです。

動的ウェブサイトの正しいサイズを自動的に生成する方法はありません（私が知る限り）。例えば、よく知られたWordPressを考えてみてください。アップロードする画像と配置場所によって、不規則で間違ったサイズを生成します。

imgタグの使用

img タグはほとんどのウェブサイトにあります。レスポンシブ画像では<img />タグはsrcset属性と組み合わせて使われますが、どれも正しく機能していないと自信を持って言えます。

問題の1つは、<img />タグが一部のブラウザ、例えばChromeで正しく機能しないことです。実際、この件についてstackoverflow.com に質問を投稿していますが、理由の説明はありません。

もう1つの問題は、sizes属性を正しく設定するのが大変だということです。非常に率直で不完全な説明を含む記事がたくさんあり、正直とてもフラストレーションを感じました。

以上のことから、レスポンシブ画像のための<img />の使用については議論しません。私の意見では無意味だからです。

pictureタグの使用

picture タグは私の意見では最高です。ブラウザを操作し、必要な画像を読み込むよう指示することができます。

また、アートディレクションの指定、代替画像フォーマットなど、多くの機能をサポートしています。この優れた機能セットにより、目標を達成できます。

ただし問題ありません。このブラウザが今年死ぬ 時が来たのです。

レスポンシブ画像サイズの生成

上記の通り、多くのオンラインツールを使用して、数クリックで正しい画像のリサイズとソースコードの生成ができます。

出発点としてこれを使うことをお勧めします：https://responsivebreakpoints.com/ 。このツールは画像をリサイズし、レスポンシブ画像のためのブレークポイントを生成します。

例えば、サイトにある犬の画像は、異なるサイズにリサイズされた複数の画像とそれぞれのHTMLコードが生成されます：

 1<picture>
 2
 3<source
 4		media="(max-width: 767px)"
 5		sizes="(max-width: 1534px) 100vw, 1534px"
 6		srcset="
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
16		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
17<source
18		media="(min-width: 768px) and (max-width: 991px)"
19		sizes="(max-width: 1983px) 70vw, 1388px"
20		srcset="
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
27		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
28<source
29		media="(min-width: 992px) and (max-width: 1199px)"
30		sizes="(max-width: 2400px) 60vw, 1440px"
31		srcset="
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
36		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
37<img
38		sizes="(max-width: 7000px) 40vw, 2800px"
39		srcset="
40		dog_c_scale,w_480.jpg 480w,
41		dog_c_scale,w_713.jpg 713w,
42		dog_c_scale,w_1036.jpg 1036w,
43		dog_c_scale,w_1180.jpg 1180w,
44		dog_c_scale,w_1313.jpg 1313w,
45		dog_c_scale,w_1433.jpg 1433w,
46		dog_c_scale,w_1606.jpg 1606w,
47		dog_c_scale,w_1748.jpg 1748w,
48		dog_c_scale,w_1884.jpg 1884w,
49		dog_c_scale,w_2015.jpg 2015w,
50		dog_c_scale,w_2133.jpg 2133w,
51		dog_c_scale,w_2260.jpg 2260w,
52		dog_c_scale,w_2377.jpg 2377w,
53		dog_c_scale,w_2345.jpg 2345w,
54		dog_c_scale,w_1871.jpg 1871w,
55		dog_c_scale,w_2800.jpg 2800w"
56		src="dog_c_scale,w_2800.jpg"
57		alt="">
58</picture>

どれだけ多くの画面サイズをカバーしてくれるか見てください、素晴らしいですよね？でもこれをそのままサイトにコピー&ペーストして十分でしょうか？いいえ。

これらのimage source setの最大の問題はsizesとmedia属性です。理解するのがかなり複雑で、正しく動作させるのはさらに複雑です。

つまり、コードをより短く、わかりやすくする必要があります。私のウェブサイト（今読んでいるもの）では、Bootstrapが提供する一般的なレスポンシブブレークポイントを使用し、独自のセットを作成しました。

レスポンシブ画像サイズを自分で作成する

最善の（そして正直なところ唯一の）解決策は、画像タグを自分で作成することです。

これはカスタムウェブサイトをゼロから開発する場合にうまく機能しますが、WordPressのようなものがある場合はまた別の話で、それについては別の記事があります。

出発点として、デバイスのブレークポイントを理解するための明確で簡単な方法が必要でした。そこでBootstrapが提供する非常に信頼性の高いものを使用しました：

ブレークポイントデバイスサイズ
X-Small小型デバイス（縦向きスマホ、576px未満）<576px
Small小型デバイス（横向きスマホ、576px以上）≥576px
Medium中型デバイス（タブレット、768px以上）≥768px
Large大型デバイス（デスクトップ、992px以上）≥992px
Extra large大型デバイス（大型デスクトップ、1200px以上）≥1200px
Extra extra large大型デバイス（より大型デスクトップ、1400px以上）≥1400px

上記を使って、デバイスサイズに応じて適切な画像を読み込む「独自の」image source setを作成しました：

 1<picture>
 2
 3<source srcset="" media="(min-width: 1400px)">
 4<source srcset="" media="(min-width: 1200px)">
 5<source srcset="" media="(min-width: 992px)">
 6<source srcset="" media="(min-width: 768px)">
 7<source srcset="" media="(min-width: 576px)">
 8<source srcset="" media="(min-width: 320px)">
 9<img src="" width="" height="" class="" alt="" >
10</picture>

これにより、何が起こるべきか、どのように起こるべきかが明確に理解できます。つまり、各デバイスでどの画像が読み込まれるべきかがわかり、そのように動作します。

これは使用準備ができているように見えますが、まだ完全には準備ができていません。特定のデバイスでこれらの画像を読み込むだけでは不十分で、画像がまだ大きすぎる可能性があるからです。

例1：

  • 大型デバイス（大型デスクトップ、1200px以上）で、画像セットを埋め込むコンテナの固定サイズが800px
  • ブラウザはビューポートを見ます。例えば1920pxの場合、1400pxの画像を読み込みます（実際には768pxの画像サイズが必要な場合…）

例2：

  • どのデバイスでも、画像セットを埋め込むコンテナの固定サイズが400px（カードやシンプルなボックスなど）
  • ブラウザはビューポートを見ます。例えば1920pxの場合、1400pxの画像を読み込みます（実際には320pxの画像サイズが必要な場合…）

つまり、間違った画像を読み込んでいることになり、あなたとユーザーにコストがかかります。まず速度を失い（これはSEOランキングにも影響します）、そしてモバイルや低帯域幅のユーザーは画像の読み込みを永遠に待つことになります。

適切な解決策は、画像を埋め込むコンテナを調査し、適切なサイズを決定することです。

これはページを検査し、異なるデバイスをエミュレートすることで非常に簡単にできます。通常、コンテナは多少同じサイズのままです。

そこで上記の例1では、コードを次のように修正しました：

1<picture>
2
3<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
4<source srcset="" media="(min-width: 992px)">
5<source srcset="" media="(min-width: 768px)">
6<source srcset="" media="(min-width: 576px)">
7<source srcset="" media="(min-width: 320px)">
8<img src="" width="" height="" class="" alt="">
9</picture>

これは何を意味するのか？かなり自明ですが、説明します：

  • 最小幅320pxのデバイスでは、320pxの画像を読み込む
  • 最小幅576pxのデバイスでは、576pxの画像を読み込む
  • 最小幅768pxのデバイスでは、768pxの画像を読み込む
  • 最小幅992pxのデバイスでは、992pxの画像を読み込む
  • 最小幅1200pxまたは1400pxまたは2500pxのデバイスでは、1200pxの画像を読み込む

最後の行は、コンテナサイズが800px（または記事を展開した場合の1200px）しかないのに、ブラウザがより大きな画像サイズを読み込まないようにします。

上記は適切な画像サイズを読み込むという点でほぼ完璧だと考えています。Google Pagespeedさえも気に入っており、正しい画像サイズを読み込んでいるため警告を生成しません。

レスポンシブ画像のテスト

上記を読んだ後、画像が正しく読み込まれているかどうかをテストする方法について一般的な考えがあると思いますが、それでも説明します。

テストプロセスは画像が多い場合は大変かもしれませんが、努力する価値は十分にあります。

やるべきことはシンプルで、少し時間がかかるだけです：

  • お好みのブラウザを開いてページを読み込む
  • 開発者ツールを開き、ネットワークタブに行き「画像」フィルターのみを選択
  • 複数のデバイス（モバイル、タブレットなど）でページをリフレッシュし、どの画像が読み込まれるか確認

それだけです、特別なことはありません。

ヒントとコツ

  • 多くの画像がある場合（ヘッダー以上）、loading=lazy属性を使用してください。詳細はこちら で読めます。
  • 画像を自分でエクスポート/リサイズできない場合、オンラインサービスを利用できます。CDNも提供しており、画像を非常に高速で読み込みます。Cloudflare Images をお勧めします。
  • 画像に正しい名前を付けてください、これは非常に重要です。画像に正しい名前を付けないと（例えばimage-small.jpgやimage-320.jpg）、テスト時にどの画像が読み込まれているか簡単に把握できません。

以上です。この記事がお役に立てば幸いです。