srcset を使用して、適切な画像サイズを自動的に選択する。
HTTP Archive によると、 典型的なモバイル ウェブページのサイズは 2.6 MB を超え、その 3 分の 2 以上は 画像です。これは最適化の絶好の機会です。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">概要
- 表示サイズを超える画像を保存しないでください。
- 各画像に複数のサイズを保存し、
srcset属性を使用して、ブラウザが最小サイズを選択できるようにします。w値はブラウザに対して各バージョンの幅を示します。
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
適切なサイズの画像を保存する
次の要素を含む画像を使用すると、ウェブサイトの処理速度を上げ、データを空ににくくすることができます。 表示サイズに合ったサイズを選択します言い換えると、画像に適切な 変更することもできます。
下の画像をご覧ください。
ほとんど同じに見えますが、ファイルサイズが 10 倍を超えています 大きくなります
最初の画像は、寸法を指定して保存されるため、ファイルサイズが大幅に大きくなります ディスプレイサイズよりかなり大きくなりますどちらの画像も固定の 300 ピクセル幅であるため、同じ場所で保存された画像を使用しても 指定します。
固定幅の場合は、 ディスプレイ サイズ。
しかし、表示サイズが異なる場合はどうなるでしょうか。
マルチデバイス環境では、画像が常に単一の固定サイズで表示されるとは限りません。
画像要素の幅がパーセンテージになっているか、レスポンシブ レイアウトの一部になっている可能性があります 画面のサイズに合わせて画像の表示サイズが変わります
Retina ディスプレイのようなピクセルを大量に消費するデバイスは？
ブラウザが適切な画像サイズを選択できるようにする
各画像サイズをさまざまに変えられるとしたら、 デバイスとディスプレイ サイズに最適なサイズをブラウザが選択できるようにする 残念ながら、 catch-22 を 最適な画像を判断できますブラウザは可能な限り小さいサイズの 画像をダウンロードして確認しない限り、画像の幅はわかりません。
このような場合に役立つのが srcset です。さまざまなサイズで画像を保存してから、
各バージョンの幅をブラウザに伝えます。
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 値は、各画像の幅をピクセル単位で示します。たとえば
small.jpg 500w は、small.jpg が 500 であることをブラウザに伝えます。
ピクセル幅。これにより、ブラウザは可能な限り小さい画像を選択し、
画面サイズやビューポートのサイズに応じて
画像をダウンロードすることもできます。
下の画像で srcset の実際の動作を確認できます。ノートパソコンや
ブラウザ ウィンドウ サイズを変更して、このページを再度開きます。
次に、ブラウザ ツールの [ネットワーク] パネルを使用して、使用されている画像を確認します。
（この操作は、シークレット ウィンドウまたはプライベート ウィンドウで行う必要があります）。
元の画像ファイルはキャッシュに保存されます）。
複数の画像サイズを作成するにはどうすればよいですか？
使用する画像ごとに複数のサイズを用意する必要がある
srcset で。
ヒーロー画像などの 1 回限りの画像については、異なるサイズを手動で保存できます。条件 商品の写真など画像が大量にある場合は 自動化が必要になります そのためのアプローチは 2 つあります。
ビルドプロセスに画像処理を組み込む
ビルドプロセスの一環として、さまざまなサイズのファイルを作成するためのステップを 使用できます。「Imagemin を使用して画像を圧縮する」をご覧ください。 をご覧ください。
画像サービスを使用する
画像の作成と配信は、次のような商用サービスを使用して自動化できます。 Cloudinary、または 自分でインストールして実行する Thumbor。
高解像度画像をアップロードすると、画像サービスが自動的に
URL に応じてさまざまな形式とサイズの画像を作成、配信
あります。たとえば、Cloudinary でこのサンプル画像を開き、URL バーの w 値またはファイル拡張子を変更してみてください。
画像サービスには、画像処理の自動化、 "スマート トリミング"WebP 画像を自動的に配信します。 ファイルを変更せずに、JPEG ではなく、その形式をサポートするブラウザに あります。
異なるサイズで画像が正しく表示されない場合
その場合は、「アート ディレクション」に <picture> 要素を使用する必要があります。
さまざまなサイズで異なる画像または画像の切り抜きを提供します。関連資料
「アート ディレクション」Codelab をご覧ください。
ピクセル密度についてはどうでしょうか。
ハイエンド デバイスは物理ピクセルが小さい（高密度）ため、たとえば、 ハイエンドのスマートフォンでは 各行のピクセル数が 2 ～ 3 倍 低価格デバイスだと思われます
これにより、画像を保存するために必要なサイズに影響することがあります。残虐な行為には をご覧ください。詳しくは、 Codelab「密度記述子を使用する」をご覧ください。
画像の表示サイズはどうでしょうか。
sizes を使用すると srcset がさらに便利になります。
指定しない場合、ブラウザは表示領域を選択する際にビューポートの全幅を使用します
srcset から取得した画像。sizes 属性は、ブラウザに表示するコンテンツの幅を
表示されるため、ブラウザは可能な限り小さいものを選択します。
レイアウト計算を行う前に、このファイルを定義します。
以下の例では、sizes="50vw" は、この画像がアップロードされることをブラウザに伝えます。
ビューポートの幅の 50% で表示されます
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
実際の動作は simpl.info/sizes と「複数のスロット幅の指定」Codelab
ブラウザ サポートについてはどうですか？
srcset と sizes は、
。
ブラウザで srcset または sizes がサポートされていない場合は、代わりに src 属性のみを使用します。
これにより、srcset と sizes のプログレッシブな機能強化が実現します。
その他の情報
[画像を最適化する] セクションを確認します。 をご覧ください。詳細については、 無料のレスポンシブ ディスプレイ広告をお試しください。 画像」コースを Udacity.