画像は 1, 000 語にも相当し、画像はすべてのページにおいて重要な役割を果たします。一方で、ダウンロードバイト数の大部分を占めることもよくあります。レスポンシブ ウェブ デザインでは、レイアウトだけでなく画像もデバイスの特性に応じて変更できます。
レスポンシブ ウェブ デザインでは、デバイスの特性に応じてレイアウトが変化するだけでなく、コンテンツも変化する可能性があります。たとえば、高解像度（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 要素は、画像ソースが複数の密度で存在する場合や、レスポンシブ デザインで一部のタイプの画面で若干異なる画像を表示する場合に使用します。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 倍 |
| 600 ピクセル | 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. 乗務員のサイト。非表示のオーバーレイは、画像をタップ可能であることを示し、画像が拡大されて細部まで確認できます。
その他の画像手法
圧縮画像
圧縮イメージ手法では、デバイスの実際の機能に関係なく、高度に圧縮された 2 倍のイメージをすべてのデバイスに配信します。画像の種類と圧縮レベルによっては、画質は変わらないように見えても、ファイルサイズは大幅に減少します。
JavaScript による画像の置換
JavaScript による画像置換は、デバイスの機能を確認して「正しい処理」を行います。デバイスのピクセル比は window.devicePixelRatio で判断でき、画面の幅と高さを取得できます。また、navigator.connection でネットワーク接続をスニッフィングしたり、疑似リクエストを発行したりすることもできます。これらの情報をすべて収集したら、読み込む画像を決定できます。
この方法の大きな欠点の 1 つは、JavaScript を使用すると、少なくとも先読みパーサーが終了するまで画像の読み込みが遅れることです。つまり、pageload イベントが発生するまで、画像のダウンロードは開始されません。また、ブラウザが 1x と 2x の両方の画像をダウンロードする可能性が高くなるため、ページのデータ量が増加します。
画像のインライン化: ラスターとベクター
画像を作成して保存する方法は根本的に 2 種類あり、画像をレスポンシブにデプロイする方法に影響します。
ラスター画像: 写真やその他の画像など、個々のカラードットのグリッドとして表示されます。ラスター画像は、カメラやスキャナから取得する場合もあれば、HTML キャンバス要素を使用して作成された場合もあります。ラスター画像の保存には、PNG、JPEG、WebP などの形式が使用されます。
ロゴやラインアートなどのベクター画像は、曲線、線、図形、塗りつぶしの色、グラデーションのセットとして定義されます。ベクター画像は、Adobe Illustrator や Inkscape などのプログラムで作成したり、SVG などのベクター形式を使用してコードで手書きしたりできます。
SVG
SVG を使用すると、ウェブページにレスポンシブなベクター グラフィックを含めることができます。ラスター ファイル形式に対するベクター ファイル形式の利点は、ブラウザが任意のサイズでベクター画像をレンダリングできることです。ベクター形式では、画像のジオメトリ（線、曲線、色など）を記述します。一方、ラスター形式には個々の色のドットに関する情報しかないため、ブラウザはスケーリング時に空白をどのように埋めるかを推測する必要があります。
以下に、同じ画像の 2 つのバージョンを示します。左側は PNG 画像、右側は SVG です。SVG はどのサイズでも適切に表示されますが、大きい表示サイズでは、その横にある PNG は不鮮明になります。
ページで行われるファイル リクエストの数を減らしたい場合は、SVG 形式またはデータ URI 形式を使用してインラインで画像をコーディングできます。このページのソースを見ると、以下のロゴがデータ 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）です。
インライン化の長所と短所
画像のインライン コード、特に Data URI は冗長になる可能性があります。では、この機能を使用する理由は何でしょうか。HTTP リクエストを減らすため、SVG とデータ URI を使用すると、ウェブページ全体（画像、CSS、JavaScript を含む）を 1 回のリクエストで取得できます。
欠点:
- モバイルでのデータ URI の表示は、外部の
srcの画像よりも大幅に遅くなることがあります。 - データ URI を使用すると、HTML リクエストのサイズが大幅に増えることがあります。
- マークアップとワークフローが複雑になります。
- データ URI 形式はバイナリよりかなり大きい（最大 30%）ため、合計ダウンロード サイズは削減されません。
- データ URI はキャッシュできないため、使用するすべてのページでダウンロードする必要があります。
- IE 6 と 7 ではサポートされておらず、IE8 ではサポートが不十分です。
- HTTP/2 では、アセット リクエストの数を減らすことの優先度は低くなります。
応答性が高い他のものと同様に、何が最適かをテストする必要があります。デベロッパー ツールを使用して、ダウンロード ファイルサイズ、リクエスト数、合計レイテンシを測定します。Data URI はラスター画像に役立つ場合があります。たとえば、他の場所で使用されていない写真が 1 枚か 2 枚だけホームページにある場合などです。ベクター画像をインライン化する必要がある場合は、SVG が適しています。
CSS の画像
CSS の 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);
}
}
image-set を使用して高解像度の画像を使用する
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() のサポートはまだ新しく、ベンダー プレフィックス -webkit が付いた Chrome と Safari でのみサポートされています。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() ブラウザのサポートは低いものの、ほとんどのブラウザでは 1x のアセットが取得されます。
メディアクエリを使用して高解像度の画像やアート ディレクションを行う
メディアクエリでは、デバイス ピクセル比に基づいてルールを作成し、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 ★
あなたはスーパー ★ です
複雑なアイコンを 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"></span>)
or by adding special classes to an <i> 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を使用すると、より多くの色を表現でき、優れた圧縮率を実現できます。- 長いアニメーションの場合は、
<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 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 platforma dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus puus.
<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>
ただし、こうした手法を使用するにはレンダリング サイクルが必要であり、モバイルではこれが顕著になる可能性があります。過度に使用すると、得られたメリットが失われ、パフォーマンスが低下する可能性があります。