Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

レスポンシブ画像

「百聞は一見にしかず」という言葉があるように、画像はすべてのページで重要な役割を果たします。しかし、ダウンロードされたバイト数の大部分を占めることもよくあります。レスポンシブウェブデザインでは、デバイスの特性に基づいてレイアウトだけでなく画像も変更できます。

Pete LePage

レスポンシブウェブデザインでは、デバイスの特性に応じてレイアウトだけでなく、コンテンツも変更できます。たとえば、高解像度（2x）ディスプレイでは、高解像度のグラフィックを使用することで鮮明さが確保されます。幅 50% の画像は、ブラウザの幅が 800 ピクセルの場合は問題なく機能しますが、幅の狭いスマートフォンではスペースを使いすぎ、小さな画面に合わせて縮小すると同じ帯域幅のオーバーヘッドが必要になります。

アートディレクション

また、比率の変更、切り抜き、画像全体の置き換えなど、画像を大幅に変更する必要がある場合もあります。この場合、画像の変更は通常、アートディレクションと呼ばれます。その他の例については、responsiveimages.org/demos/ をご覧ください。

レスポンシブ画像

ウェブページの読み込みに必要なバイト数の平均 60% 以上を画像が占めていることをご存じですか？

このコースでは、最新のウェブで画像を操作する方法を学びます。これにより、画像がどのデバイスでも見栄えよく、すばやく読み込まれるようになります。

その過程で、レスポンシブ画像を開発ワークフローにスムーズに統合するためのさまざまなスキルとテクニックを習得できます。このコースを修了すると、さまざまなビューポートサイズや使用シナリオに適応して応答する画像を使用して開発できるようになります。

これは Udacity が提供する無料のコースです。

コースを受講する

マークアップ内の画像

img 要素は、コンテンツのダウンロード、デコード、レンダリングを行う強力な要素であり、最新のブラウザはさまざまな画像形式をサポートしています。デバイス間で動作する画像を含めることは、パソコンの場合と変わりません。優れたエクスペリエンスを実現するには、いくつかの微調整を行うだけで済みます。

概要

画像には相対サイズを使用して、コンテナから誤ってあふれないようにします。
デバイスの特性（アートディレクション）に応じて異なる画像を指定する場合は、picture 要素を使用します。
img 要素で srcset と x 記述子を使用して、異なる密度から選択する際に使用する最適な画像に関するヒントをブラウザに提供します。
ページに画像が 1 つか 2 つしかなく、サイトの他の場所で使用されていない場合は、インライン画像を使用してファイルリクエストを減らすことを検討してください。

画像に相対サイズを使用する

画像の幅を指定する際は、画像がビューポートからはみ出さないように、相対単位を使用してください。たとえば、width: 50%; を指定すると、画像の幅は、ビューポートの 50% や実際のピクセルサイズの 50% ではなく、それを含む要素の 50% になります。

CSS ではコンテンツがコンテナからはみ出すことが許可されているため、画像などのコンテンツがはみ出さないようにするには、max-width: 100% を使用する必要があります。次に例を示します。

img, embed, object, video {
    max-width: 100%;
}

img 要素の alt 属性を使用して、意味のある説明を提供してください。これにより、スクリーンリーダーやその他の支援技術にコンテキストが提供され、サイトのアクセシビリティが向上します。

高 DPI デバイス向けに `srcset` を使用して `img` を強化する

srcset 属性は img 要素の動作を強化し、デバイスの特性に応じて複数の画像ファイルを簡単に提供できるようにします。CSS ネイティブの image-set CSS 関数と同様に、srcset を使用すると、ブラウザはデバイスの特性に応じて最適な画像を選択できます。たとえば、2x ディスプレイでは 2x 画像を使用し、将来的には、帯域幅が制限されたネットワークでは 2x デバイスで 1x 画像を使用する可能性があります。

<img src="photo.png" srcset="photo@2x.png 2x" ...>

srcset をサポートしていないブラウザでは、src 属性で指定されたデフォルトの画像ファイルが使用されます。そのため、機能に関係なく、どのデバイスでも表示できる 1x 画像を常に含めることが重要です。srcset がサポートされている場合、リクエストを行う前に、カンマ区切りの画像 / 条件のリストが解析され、最も適切な画像のみがダウンロードされて表示されます。

条件には、ピクセル密度から幅、高さまで、あらゆるものが含まれますが、現在十分にサポートされているのはピクセル密度のみです。現在の動作と将来の機能のバランスを取るには、属性に 2 倍の画像を指定するだけにしてください。

`picture` を使用したレスポンシブ画像のアートディレクション

デバイスの特性に基づいて画像を変更する（アートディレクションとも呼ばれます）には、picture 要素を使用します。picture 要素は、デバイスのサイズ、デバイスの解像度、向きなど、さまざまな特性に基づいて複数のバージョンの画像を提供するための宣言型ソリューションを定義します。

注: picture 要素はブラウザに導入され始めています。まだすべてのブラウザで利用できるわけではありませんが、下位互換性が高く、Picturefill polyfill を使用できる可能性があるため、この方法をおすすめします。詳しくは、ResponsiveImages.org のサイトをご覧ください。

picture 要素は、画像ソースが複数の密度で存在する場合や、レスポンシブデザインによって一部のタイプの画面で多少異なる画像が指定されている場合に使用します。video 要素と同様に、複数の source 要素を含めることができるため、メディアクエリや画像形式に応じて異なる画像ファイルを指定できます。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

試してみる

上記の例では、ブラウザの幅が 800 ピクセル以上の場合、デバイスの解像度に応じて head.jpg または head-2x.jpg のいずれかが使用されます。ブラウザが 450 ピクセルから 800 ピクセルの間にある場合は、デバイスの解像度に応じて head-small.jpg または head-small- 2x.jpg が使用されます。画面幅が 450 ピクセル未満の場合や、picture 要素がサポートされていない下位互換性の場合、ブラウザは代わりに img 要素をレンダリングします。この要素は常に含める必要があります。

相対サイズの画像

画像の最終的なサイズが不明な場合、画像ソースの密度記述子を指定するのが難しいことがあります。これは、ブラウザの幅に比例して広がり、ブラウザのサイズに応じて流動的に変化する画像に特に当てはまります。

固定の画像サイズと密度を指定する代わりに、画像要素のサイズとともに幅記述子を追加して、提供される各画像のサイズを指定できます。これにより、ブラウザは有効なピクセル密度を自動的に計算し、ダウンロードする最適な画像を選択できます。

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

試してみる

上記の例では、ビューポート幅の半分（sizes="50vw"）の画像がレンダリングされます。ブラウザの幅とデバイスのピクセル比に応じて、ブラウザウィンドウのサイズに関係なく、ブラウザが適切な画像を選択できます。たとえば、次の表は、ブラウザが選択する画像を示しています。

ブラウザの幅	デバイスのピクセル比	使用した画像	効果的な解決
400px	1	`200.jpg`	1x
400px	2	`400.jpg`	2 倍
320px	2	`400.jpg`	2.5 倍
600px	2	`800.jpg`	2.67 倍
640px	3	`1000.jpg`	3.125 倍
1100px	1	`800.png`	1.45 倍

レスポンシブ画像のブレークポイントを考慮する

多くの場合、画像のサイズはサイトのレイアウトのブレークポイントに応じて変化します。たとえば、小さな画面では画像をビューポートの全幅に表示し、大きな画面では小さな割合のみを占めるようにします。

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

試してみる

上記の例の sizes 属性では、複数のメディアクエリを使用して画像のサイズを指定しています。ブラウザの幅が 600 ピクセルを超える場合、画像はビューポート幅の 25% になります。500 ピクセルから 600 ピクセルの間の場合、画像はビューポート幅の 50% になります。500 ピクセル未満の場合、全幅になります。

商品画像を拡大可能にする

J. 拡大可能な商品画像が表示された Crews のウェブサイト — J. Crew のウェブサイト。商品画像を拡大表示できる。

お客様は、購入する商品を確認したいと考えています。小売サイトでは、ユーザーは商品の高解像度のクローズアップを表示して詳細を確認できることを期待しており、それができないと調査参加者は不満を感じていました。

タップ可能で展開可能な画像の好例は、J. クルーサイト。消えるオーバーレイは、画像をタップできることを示し、細部まで見える拡大画像を提供します。

その他の画像手法

圧縮画像

圧縮画像手法では、デバイスの実際の機能に関係なく、高度に圧縮された 2 倍の画像がすべてのデバイスに提供されます。画像のタイプと圧縮レベルによっては、画質は変わらないように見えても、ファイルサイズが大幅に小さくなることがあります。

試してみる

JavaScript による画像の置換

JavaScript による画像の置換では、デバイスの機能を確認して「適切な処理」を行います。window.devicePixelRatio を介してデバイスのピクセル比を特定し、画面の幅と高さを取得できます。また、navigator.connection を介して、または偽のリクエストを発行して、ネットワーク接続のスニッフィングを行うこともできます。この情報をすべて収集したら、読み込む画像を決定できます。

このアプローチの大きな欠点は、JavaScript を使用すると、少なくともルックアヘッドパーサーが終了するまで画像の読み込みが遅れることです。つまり、pageload イベントが発生するまで、画像のダウンロードは開始されません。また、ブラウザは 1x と 2x の両方の画像をダウンロードする可能性が高く、ページの重さが増加します。

画像のインライン化: ラスターとベクター

画像の作成と保存には、根本的に異なる 2 つの方法があります。これは、画像のレスポンシブなデプロイ方法に影響します。

ラスター画像 - 写真などの画像は、個々の色のドットのグリッドとして表されます。ラスター画像は、カメラやスキャナから取得されるか、HTML キャンバス要素で作成されます。PNG、JPEG、WebP などの形式は、ラスター画像を保存するために使用されます。

ロゴや線画などのベクター画像は、曲線、線、形状、塗りつぶしの色、グラデーションのセットとして定義されます。ベクター画像は、Adobe Illustrator や Inkscape などのプログラムで作成することも、SVG などのベクター形式を使用してコードで手書きすることもできます。

SVG

SVG を使用すると、レスポンシブベクターグラフィックをウェブページに含めることができます。ラスターファイル形式に対するベクターファイル形式の利点は、ブラウザでベクター画像を任意のサイズでレンダリングできることです。ベクター形式は、画像のジオメトリ（線、曲線、色などからどのように構成されているか）を記述します。一方、ラスター形式には個々の色のドットに関する情報しか含まれていないため、ブラウザはスケーリング時に空白を埋める方法を推測する必要があります。

以下に、同じ画像の 2 つのバージョンを示します。左側が PNG 画像、右側が SVG 画像です。SVG はどのサイズでもきれいに表示されますが、その横の PNG は表示サイズが大きくなるとぼやけて表示されます。

ページで行うファイルリクエストの数を減らすには、SVG または Data URI 形式を使用して画像をインラインでコーディングします。このページのソースを表示すると、以下の両方のロゴがインラインで宣言されていることがわかります。データ URI と SVG です。

SVG はモバイルとパソコンで優れたサポートを提供しており、最適化ツールを使用すると SVG のサイズを大幅に削減できます。次の 2 つのインライン SVG ロゴは同じように見えますが、一方は約 3 KB、もう一方はわずか 2 KB です。

データ URI

データ URI を利用すると、画像などのファイルをインラインに埋め込めます。次の形式を使用して、img 要素の src を Base64 エンコード形式の文字列で設定します。

<img src="data:image/svg+xml;base64,[data]">

上記の HTML5 ロゴのコードの先頭は次のようになります。

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

（完全版は 5,000 文字を超えています）。

jpillora.com/base64-encoder などのドラッグ＆ドロップツールを使用して、画像などのバイナリファイルをデータ URI に変換できます。SVG と同様に、データ URI はモバイルブラウザとパソコンのブラウザで十分にサポートされています。

CSS でのインライン化

データ URI と SVG は CSS にインライン化することもできます。これはモバイルとパソコンの両方でサポートされています。以下は、CSS で背景画像として実装された、見た目が同じ 2 つの画像です。1 つはデータ URI、もう 1 つは SVG です。

インライン化のメリットとデメリット

画像のインラインコード（特にデータ URI）は冗長になる可能性があります。では、なぜそれを使用するのでしょうか。HTTP リクエストを減らすためです。SVG とデータ URI を使用すると、画像、CSS、JavaScript を含むウェブページ全体を 1 つのリクエストで取得できます。

デメリット:

モバイルでは、データ URI の表示速度が外部の src の画像よりも大幅に遅くなることがあります。
データ URI を使用すると、HTML リクエストのサイズが大幅に増加する可能性があります。
マークアップとワークフローが複雑になります。
Data URI 形式はバイナリよりもかなり大きく（最大 30%）、合計ダウンロードサイズを削減できません。
データ URI はキャッシュに保存できないため、使用されるページごとにダウンロードする必要があります。
IE 6 と 7 ではサポートされておらず、IE8 では不完全なサポートとなっています。
HTTP/2 では、アセットリクエストの数を減らすことの優先度は低くなります。

レスポンシブな要素すべてに言えることですが、何が最適かをテストする必要があります。デベロッパーツールを使用して、ダウンロードファイルのサイズ、リクエスト数、合計レイテンシを測定します。データ URI は、ラスター画像に役立つ場合があります。たとえば、ホームページに 1 枚か 2 枚の写真しかなく、他の場所では使用されていない場合などです。ベクター画像をインライン化する必要がある場合は、SVG の方がはるかに適しています。

CSS の画像

CSS の background プロパティは、要素に複雑な画像を追加するための強力なツールです。複数の画像を簡単に追加したり、画像を繰り返したりできます。メディアクエリと組み合わせると、background プロパティはさらに強力になり、画面解像度やビューポートサイズなどに基づいて条件付きで画像を読み込むことができます。

概要

ディスプレイの特性に最適な画像を使用し、画面サイズ、デバイスの解像度、ページレイアウトを考慮します。
min-resolution と -webkit-min-device-pixel-ratio でメディアクエリを使用して、高 DPI ディスプレイの CSS の background-image プロパティを変更します。
srcset を使用して、マークアップの 1x 画像に加えて高解像度の画像を提供します。
JavaScript の画像置換手法を使用する場合や、高圧縮の高解像度画像を低解像度のデバイスに提供する場合は、パフォーマンスコストを考慮してください。

条件付きの画像読み込みやアートディレクションにメディアクエリを使用する

メディアクエリは、ページレイアウトに影響するだけでなく、ビューポートの幅に応じて画像を条件付きで読み込んだり、アートディレクションを提供したりするためにも使用できます。

たとえば、以下のサンプルでは、画面が小さい場合は small.png のみがダウンロードされてコンテンツ div に適用されますが、画面が大きい場合は background-image: url(body.png) が本文に適用され、background-image: url(large.png) がコンテンツ div に適用されます。

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

試してみる

image-set を使用して高解像度の画像を提供する

CSS の image-set() 関数は background プロパティの動作を強化し、さまざまなデバイス特性に対応する複数の画像ファイルを簡単に提供できるようにします。これにより、ブラウザはデバイスの特性に応じて最適な画像を選択できます。たとえば、2x ディスプレイでは 2x 画像を使用し、帯域幅が制限されたネットワーク上の 2x デバイスでは 1x 画像を使用します。

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

ブラウザは、適切な画像を読み込むだけでなく、それに応じて画像をスケーリングします。つまり、ブラウザは 2x の画像が 1x の画像の 2 倍の大きさであると想定し、2x の画像を 2 分の 1 に縮小して、ページ上で同じサイズに見えるようにします。

image-set() のサポートはまだ新しく、Chrome と Safari でのみ -webkit ベンダープレフィックス付きでサポートされています。image-set() がサポートされていない場合に備えて、代替画像を含めるようにしてください。次に例を示します。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

試してみる

上記のコードは、image-set をサポートするブラウザで適切なアセットを読み込みます。それ以外の場合は、1x アセットにフォールバックします。image-set() をサポートするブラウザは少ないため、ほとんどのブラウザは 1x アセットを取得します。

メディアクエリを使用して高解像度の画像やアートディレクションを提供する

メディアクエリでは、デバイスのピクセル比に基づいてルールを作成できるため、2x ディスプレイと 1x ディスプレイに異なる画像を指定できます。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome、Firefox、Opera はすべて標準の (min-resolution: 2dppx) をサポートしていますが、Safari と Android のブラウザはどちらも、dppx 単位のない古いベンダー接頭辞付きの構文を必要とします。これらのスタイルは、デバイスがメディアクエリに一致する場合にのみ読み込まれます。基本ケースのスタイルを指定する必要があります。また、ブラウザが解像度固有のメディアクエリをサポートしていない場合でも、何かがレンダリングされるというメリットもあります。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

試してみる

min-width 構文を使用して、ビューポートのサイズに応じて代替画像を表示することもできます。この手法の利点は、メディアクエリが一致しない場合に画像がダウンロードされないことです。たとえば、bg.png は、ブラウザの幅が 500 ピクセル以上の場合にのみダウンロードされ、body に適用されます。

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

アイコンに SVG を使用する

ページにアイコンを追加する場合は、可能な限り SVG アイコンを使用するか、場合によっては Unicode 文字を使用します。

概要

アイコンには、ラスター画像ではなく SVG または Unicode を使用します。

シンプルなアイコンを Unicode に置き換える

多くのフォントは、画像の代わりに使用できる無数の Unicode グリフをサポートしています。画像とは異なり、Unicode フォントは画面上で拡大縮小しても見栄えが良く、

Unicode には、通常の文字セット以外に、矢印（←）、数学演算子（√）、幾何学図形（★）、制御文字（▶）、楽譜記号（♬）、ギリシャ文字（Ω）、チェスの駒（♞）などの記号が含まれる場合があります。

Unicode 文字を含めるには、名前付きエンティティと同じ方法で行います。&#XXXX（XXXX は Unicode 文字番号を表します）。次に例を示します。

You're a super &#9733;

あなたはスーパー ★

複雑なアイコンを SVG に置き換える

より複雑なアイコン要件の場合、SVG アイコンは一般的に軽量で使いやすく、CSS でスタイルを設定できます。SVG には、ラスター画像に比べて次のような利点があります。

ベクターグラフィックであるため、無限にスケーリングできます。
色、シャドウ、透明度、アニメーションなどの CSS 効果は簡単です。
SVG 画像はドキュメントに直接インライン化できます。
セマンティックである。
適切な属性を使用して、ユーザー補助機能を改善します。

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

試してみる

アイコンフォントは慎重に使用する

アイコンフォントは人気があり、使いやすいですが、SVG アイコンと比較すると、次のような欠点があります。

ベクターグラフィックは無限にスケーリングできますが、アンチエイリアス処理により、アイコンが期待どおりにシャープにならない場合があります。
CSS によるスタイル設定は制限されています。
行の高さや文字間隔などによっては、ピクセル単位で完璧に配置することが難しい場合があります。
これらはセマンティックではなく、スクリーンリーダーなどの支援技術で使用するのが難しい場合があります。
適切にスコープを設定しないと、使用可能なアイコンの小さなサブセットのみを使用する場合でも、ファイルサイズが大きくなる可能性があります。

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

試してみる

Font Awesome、Pictos、Glyphicons など、無料および有料のアイコンフォントが数百種類あります。

追加の HTTP リクエストとファイルサイズの重みと、アイコンの必要性のバランスを取るようにしてください。たとえば、必要なアイコンが数個だけの場合は、画像または画像スプライトを使用する方がよいでしょう。

パフォーマンスを重視して画像を最適化する

画像は、ダウンロードされるバイト数の大部分を占めることが多く、ページ上の視覚的なスペースの大部分を占めることもよくあります。そのため、画像を最適化すると、ウェブサイトのバイト数を大幅に削減し、パフォーマンスを大幅に向上させることができます。ブラウザがダウンロードする必要があるバイト数が少ないほど、クライアントの帯域幅の競合が少なくなり、ブラウザはすべてのアセットをより速くダウンロードして表示できます。

概要

画像形式をランダムに選択するのではなく、利用可能なさまざまな形式を理解し、最適な形式を使用します。
画像の最適化ツールと圧縮ツールをワークフローに組み込んで、ファイルサイズを縮小します。
よく使用する画像を画像スプライトに配置して、HTTP リクエストの数を減らします。
最初のページの読み込み時間を短縮し、最初のページの重さを軽減するには、画像がスクロールされて表示された後にのみ画像を読み込むことを検討してください。

適切なフォーマットを選択する

考慮すべき画像には、ベクター画像とラスター画像の 2 種類があります。ラスター画像の場合は、適切な圧縮形式（GIF、PNG、JPG など）を選択する必要もあります。

ラスター画像（写真やその他の画像など）は、個々のドットまたはピクセルのグリッドとして表されます。通常、ラスター画像はカメラやスキャナから取得されますが、canvas 要素を使用してブラウザで作成することもできます。画像サイズが大きくなると、ファイルサイズも大きくなります。ラスタ画像は、元のサイズよりも拡大すると、ブラウザが欠落したピクセルを埋める方法を推測する必要があるため、ぼやけてしまいます。

ベクター画像（ロゴや線画など）は、曲線、線、形状、塗りつぶしの色のセットで定義されます。ベクター画像は、Adobe Illustrator や Inkscape などのプログラムで作成され、SVG などのベクター形式で保存されます。ベクター画像は単純なプリミティブをベースにしているため、画質を損なうことなく、ファイルサイズを変更せずにスケーリングできます。

適切な形式を選択する際は、画像のソース（ラスターまたはベクター）とコンテンツ（色、アニメーション、テキストなど）の両方を考慮することが重要です。すべての画像タイプに適合する形式はなく、それぞれに長所と短所があります。

適切なフォーマットを選択する際は、まず次のガイドラインを参考にしてください。

写真画像には JPG を使用します。
SVG は、ロゴや線画などのベクターアートや単色グラフィックに使用します。ベクターアートが利用できない場合は、WebP または PNG を試してください。
GIF ではなく PNG を使用します。PNG は、より多くの色を使用でき、圧縮率も高くなります。
長いアニメーションの場合は、<video> の使用を検討してください。は画質が良く、ユーザーが再生を制御できます。

ファイルサイズを縮小する

保存後に画像を「後処理」することで、画像ファイルのサイズを大幅に縮小できます。画像圧縮には、非可逆圧縮、可逆圧縮、オンライン、GUI、コマンドラインなど、さまざまなツールがあります。可能であれば、画像の最適化を自動化してワークフローに組み込むことをおすすめします。

JPG ファイルと PNG ファイルをさらに可逆圧縮するツールがいくつかあり、画質に影響を与えることなく圧縮できます。JPG の場合は、jpegtran または jpegoptim を試してください（Linux でのみ使用可能。--strip-all オプションを指定して実行します）。PNG の場合は、OptiPNG または PNGOUT をお試しください。

画像スプライトを使用する

CSS スプライトは、複数の画像を 1 つの「スプライトシート」画像に結合する手法です。その後、要素の背景画像（スプライトシート）と、正しい部分を表示するためのオフセットを指定することで、個々の画像を使用できます。

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

試してみる

スプライト化には、複数の画像を取得するために必要なダウンロード数を減らしながら、キャッシュを有効にできるという利点があります。

遅延読み込みを検討する

遅延読み込みを使用すると、スクロールしなければ見えない範囲に多くの画像が含まれる長いページで、必要に応じて、またはメインコンテンツの読み込みとレンダリングが完了したときに画像を読み込むことで、読み込みを大幅に高速化できます。遅延読み込みを使用すると、パフォーマンスの向上に加えて、無限スクロールのエクスペリエンスを実現できます。

無限スクロールページを作成する際は注意が必要です。コンテンツは表示されるときに読み込まれるため、検索エンジンがそのコンテンツを認識できない可能性があります。また、フッターに表示される情報を探しているユーザーは、新しいコンテンツが常に読み込まれるため、フッターを表示できません。

画像は一切使用しない

最適な画像が、実際には画像ではないこともあります。可能な限り、ブラウザのネイティブ機能を使用して、同じまたは同様の機能を提供してください。ブラウザは、以前は画像を必要としていたビジュアルを生成します。これにより、ブラウザで個別の画像ファイルをダウンロードする必要がなくなり、不自然に拡大縮小された画像が表示されるのを防ぐことができます。Unicode または特別なアイコンフォントを使用してアイコンをレンダリングできます。

テキストは画像に埋め込むのではなく、マークアップに配置する

可能な限り、テキストは画像に埋め込まず、テキストとして表示してください。たとえば、見出しに画像を使用したり、電話番号や住所などの連絡先情報を画像に直接配置したりすると、ユーザーが情報をコピーして貼り付けることができなくなります。また、スクリーンリーダーで情報にアクセスできなくなり、レスポンシブではなくなります。代わりに、マークアップにテキストを配置し、必要に応じてウェブフォントを使用して必要なスタイルを実現します。

CSS を使用して画像を置き換える

最新のブラウザでは、CSS 機能を使用して、以前は画像が必要だったスタイルを作成できます。たとえば、background プロパティを使用して複雑なグラデーションを作成したり、box-shadow を使用してシャドウを作成したり、border-radius プロパティを使用して角を丸くしたりできます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

これらの手法を使用するにはレンダリングサイクルが必要であり、モバイルでは大きな負荷になる可能性があることに注意してください。過度に使用すると、得られるはずのメリットが失われ、パフォーマンスが低下する可能性があります。

レスポンシブ画像 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

アート ディレクション

レスポンシブ画像

マークアップ内の画像

概要

画像に相対サイズを使用する

高 DPI デバイス向けに srcset を使用して img を強化する

picture を使用したレスポンシブ画像のアート ディレクション

相対サイズの画像

レスポンシブ画像のブレークポイントを考慮する

商品画像を拡大可能にする

その他の画像手法

圧縮画像

JavaScript による画像の置換

画像のインライン化: ラスターとベクター

SVG

データ URI

CSS でのインライン化

インライン化のメリットとデメリット

CSS の画像

概要

条件付きの画像読み込みやアート ディレクションにメディアクエリを使用する

image-set を使用して高解像度の画像を提供する

メディアクエリを使用して高解像度の画像やアート ディレクションを提供する

アイコンに SVG を使用する

概要

シンプルなアイコンを Unicode に置き換える

複雑なアイコンを SVG に置き換える

アイコン フォントは慎重に使用する

パフォーマンスを重視して画像を最適化する

概要

適切なフォーマットを選択する

ファイルサイズを縮小する

画像スプライトを使用する

遅延読み込みを検討する

画像は一切使用しない

テキストは画像に埋め込むのではなく、マークアップに配置する

CSS を使用して画像を置き換える

レスポンシブ画像

アートディレクション

高 DPI デバイス向けに `srcset` を使用して `img` を強化する

`picture` を使用したレスポンシブ画像のアートディレクション

条件付きの画像読み込みやアートディレクションにメディアクエリを使用する

メディアクエリを使用して高解像度の画像やアートディレクションを提供する

アイコンフォントは慎重に使用する