このページは Cloud Translation API によって翻訳されました。

レスポンシブ画像

1 枚の画像は 1, 000 語の価値があり、画像はすべてのページで重要な要素です。しかし多くの場合、ダウンロードされたバイト数のほとんどを占めています。レスポンシブウェブデザインでは、デバイスの特性に応じてレイアウトだけでなく、画像も変化させることができます。

Pete LePage

Twitter GitHub Glitch Mastodon ホームページ

レスポンシブウェブデザインでは、デバイスの特性に応じてレイアウトが変化するだけでなく、コンテンツも変化する可能性があります。たとえば、高解像度（2 倍）のディスプレイでは、高解像度のグラフィックによって鮮明になります。幅が 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 を使用すると、ブラウザはデバイスの特性に応じて最適な画像を選択できます。たとえば、2 倍のディスプレイで 2 倍の画像を使用し、将来的には、帯域幅が限られているネットワークであれば 2 倍のデバイスで 1 倍の画像を使用します。

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

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

条件にはピクセル密度から幅と高さまで、あらゆるものを含めることができますが、現時点で適切にサポートされているのはピクセル密度のみです。現在の動作と今後の機能のバランスを取るため、この属性には 2 倍の画像のみを指定します。

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

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

注: picture 要素はブラウザに対応し始めています。すべてのブラウザではまだご利用いただけませんが、下位互換性が高く、Picturefill ポリフィルを使用できる可能性があるため、この機能の使用をおすすめします。詳しくは、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"）の画像をレンダリングし、ブラウザの幅とそのデバイスのピクセル比に応じて、ブラウザウィンドウのサイズに関係なくブラウザが正しい画像を選択できます。たとえば、以下の表はブラウザが選択する画像を示しています。

ブラウザの幅	デバイスのピクセル比	画像を使用	効果的な解決
400 ピクセル	1	`200.jpg`	1x
400 ピクセル	2	`400.jpg`	2 倍
320px	2	`400.jpg`	2.5 倍
600px	2	`800.jpg`	2.67 倍
640 ピクセル	3	`1000.jpg`	3.125 倍
1,100 ピクセル	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 のウェブサイト。

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

タップ可能で展開可能な画像の好例は、クルーのサイト。非表示のオーバーレイは、画像がタップ可能であり、画像が拡大されて細かい部分まで表示されることを示します。

その他の画像手法

圧縮画像

圧縮画像技術は、デバイスの実際の機能に関係なく、高圧縮の 2 倍の画像をすべてのデバイスに配信します。画像の種類と圧縮レベルによっては、画質は変わらないように見えますが、ファイルサイズは大幅に減少します。

試してみる

JavaScript による画像置換

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

この方法の大きな欠点の一つは、JavaScript を使用すると、少なくとも先読みパーサーが終了するまで画像の読み込みが遅れることです。つまり、pageload イベントが発生するまで画像のダウンロードは開始されません。また、ブラウザは 1 倍と 2 倍の両方の画像をダウンロードする可能性が高いため、ページのサイズが大きくなります。

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

イメージを作成して保存する方法は 2 つあります。これは、イメージをレスポンシブにデプロイする方法に影響します。

ラスター画像（写真やその他の画像など）は、個々のカラードットのグリッドとして表示されます。ラスター画像は、カメラやスキャナから取得する場合や、HTML キャンバス要素を使用して作成する場合があります。ラスター画像の保存には、PNG、JPEG、WebP などの形式が使用されます。

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

SVG

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

以下に示すのは、同じ画像の 2 つのバージョンです。左側は PNG 画像、右側は SVG です。SVG はどのサイズでも見栄えが良くなりますが、ディスプレイサイズが大きいと、その横の PNG は不鮮明になります。

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

SVG はモバイルとパソコンで優れたサポートを提供し、最適化ツールにより SVG のサイズを大幅に削減できます。次の 2 つのインライン SVG ロゴは同じように見えますが、1 つは約 3 KB、もう 1 つはわずか 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 リクエストのサイズを大幅に増やすことができます。
これにより、マークアップとワークフローが複雑になります。
データ URI 形式はバイナリよりかなり大きい（最大 30%）ため、合計ダウンロードサイズは削減されません。
データ URI はキャッシュできないため、その 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 プロパティを変更します。
マークアップで 1 倍の画像に加えて、srcset を使用して高解像度の画像を提供します。
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);
  }
}

試してみる

画像セットを使用して高解像度の画像を提供する

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

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

ブラウザは、正しい画像を読み込むだけでなく、それに応じて画像の拡大縮小も行います。つまり、ブラウザは 2 倍の画像は 1 倍の画像の 2 倍のサイズであると想定し、ページ上では同じサイズのものとして見えるように 2 倍の画像を 2 倍に縮小します。

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
  );
}

試してみる

上記のコードは、画像セットがサポートされているブラウザで適切なアセットを読み込みます。それ以外の場合は、1x のアセットにフォールバックします。明らかな注意点は、image-set() ブラウザのサポートは少ないものの、ほとんどのブラウザでは 1 倍のアセットを取得することです。

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

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

@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 構文を使用すると、ビューポートのサイズに応じた代替画像を表示できます。この手法には、メディアクエリが一致しない場合、画像がダウンロードされないという利点があります。たとえば、ブラウザの幅が 500 ピクセル以上の場合にのみ、bg.png がダウンロードされ、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 などのベクター形式で保存されます。ベクター画像は単純なプリミティブに基づいて構築されているため、品質を損なったりファイルサイズを変えたりすることなく、スケーリングできます。

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

適切な形式を選ぶ際は、まず以下のガイドラインを参考にしてください。

写真画像には JPG を使用します。
ベクターアートやソリッドカラーのグラフィック（ロゴやラインアートなど）には、SVG を使用します。ベクターアートを使用できない場合は、WebP または PNG をお試しください。
GIF ではなく 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 platform a 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 の画像

概要

メディアクエリを使用して、条件付きの画像読み込みやアート ディレクションを行う

画像セットを使用して高解像度の画像を提供する

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

アイコンに SVG を使用する

概要

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

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

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

画像を最適化してパフォーマンスを高める

概要

適切な形式を選択する

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

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

遅延読み込みを検討する

画像を完全に避ける

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

CSS を使用して画像を置換する

アートディレクション

高 DPI デバイス向けに `srcset` で `img` を強化

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

メディアクエリを使用して、条件付きの画像読み込みやアートディレクションを行う

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

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