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

レスポンシブ画像

1 枚の写真は 1, 000 語にも匹敵する内容を伝えます。また、画像はすべてのページにおいて非常に重要な役割を果たします。一方で、ダウンロードされるデータ量のほとんどを画像が占めることも少なくありません。レスポンシブウェブデザインでは、レイアウトだけでなく画像もデバイス特性に応じて変えることができます。

Pete LePage

レスポンシブウェブデザインでは、レイアウトだけでなくコンテンツもデバイスの特性に応じて変えることができます。たとえば、高解像度（2x）のディスプレイでは、高解像度のグラフィックを使用することで鮮明に表示されます。幅が 50% の画像は、ブラウザの幅が 800px の場合は適切に表示されますが、画面幅が狭い携帯端末では画像が占めるスペースが大きすぎるほか、狭い画面に合わせてスケールダウンしても送信されるデータ量は変わりません。

アートディレクション

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

レスポンシブ画像

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

このコースでは、あらゆるデバイスで画像を適切に表示してすばやく読み込めるように、最新のウェブで画像を操作する方法について説明します。

また、レスポンシブ画像を開発ワークフローにスムーズに取り入れることができるよう、幅広いスキルとテクニックをご紹介します。コースの終わりまでに、さまざまなビューポートサイズと使用シナリオに適応して応答する画像を開発できるようになります。

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

コースを受講する

マークアップ内の画像

img 要素はコンテンツのダウンロード、デコード、レンダリングをする際に非常に便利です。また、最新のブラウザでは幅広い画像形式がサポートされています。複数の端末に対応した画像を使用するとデスクトップの表示との差がなくなり、わずかな調整だけで快適なエクスペリエンスを実現できます。

概要

相対サイズを使用すると、意図せず画像がコンテナからはみ出るのを防止できます。
デバイス特性に応じて異なる画像を指定（アートディレクション）する場合は、picture 要素を使用します。
img 要素で srcset と x 記述子を使用して、ブラウザがさまざまな密度の中から最適な画像を選択できるようにします。
ページ上に画像が 1 つか 2 つしかなく、その画像がサイト上の別の場所では使用されていない場合は、インライン画像を使用してファイルのリクエストを削減することを検討します。

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

意図せず画像がビューポートからはみ出ることを防ぐために、画像の幅の指定では必ず相対的な単位を使用してください。たとえば、width: 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 がサポートされている場合は、カンマ区切りで指定された複数の画像と条件のリストの解析後にリクエストが送信され、最適な画像のみがダウンロードされて表示されます。

この条件にはピクセル密度から幅や高さまでのあらゆる項目を指定できますが、現時点で十分にサポートされているのはピクセル密度のみです。現在の動作と将来的な機能のバランスを考慮し、この属性は 2x の画像の提供にのみ利用してください。

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

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

注: picture 要素は、ブラウザで定着しつつあります。まだ対応していないブラウザもありますが、強力な下位互換性があり、Picturefill polyfill を使用できる場合もあるため、使用することをおすすめします。詳しくは、ResponsiveImages.org のサイトをご覧ください。

picture 要素は、1 つの画像のソースに対して密度の異なる画像が複数存在する場合、またはレスポンシブデザインで一部のタイプの画面に別の画像を表示するよう指定する場合に使用します。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 px 以上の場合、デバイスの解像度に応じて head.jpg または head-2x.jpg が使用されます。ブラウザが 450 px ～ 800 px の場合は、デバイスの解像度に応じて 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 属性では、複数のメディアクエリを使用して画像のサイズを指定しています。ブラウザ幅が 600px より広い場合は画像をビューポート幅の 25% に、ブラウザ幅が 500px ～ 600px の場合はビューポート幅の 50% に、ブラウザ幅が 500px 未満の場合はビューポート幅と同じになるように、それぞれ指定しています。

商品の画像を拡大できるようにする

J.商品画像を拡大できる J. Crews のウェブサイト — J. 商品画像を拡大できる J. Crew のウェブサイト。

ユーザーは購入しようとしている商品を見たいと考えます。ショッピングサイトでは商品画像を高解像度で拡大して詳細を確認できることを期待します。これができないと、調査の参加者は不満を感じるとの研究結果が出ています。

画像をタップして拡大できる適切な例として、J. クルーのサイト。一定時間後に非表示になるオーバーレイで画像をタップできることを説明し、画像をズームインして適切な詳細を見ることができるようにしています。

その他の画像テクニック

圧縮画像

圧縮画像技術を使用すると、デバイスの実際の性能に関係なく、高圧縮の 2x 画像をあらゆるデバイスで表示できます。画像の種類や圧縮レベルによっては、画像の品質に変化がないように見える場合もありますが、ファイルサイズは大幅に削減されます。

試してみる

JavaScript で画像を置き換える

JavaScript による画像の置き換えでは、デバイスの機能をチェックして「適切な処理」を行います。window.devicePixelRatio によるデバイスピクセル比の判別や、画面の幅と高さの取得のほか、navigator.connection によるネットワーク接続状況の取得や疑似リクエストの発行も可能です。これらの情報をすべて収集すると、読み込む画像を決定できます。

この方法の大きな欠点として、JavaScript を使用するため、少なくとも先行するパーサーの処理が完了するまで画像が読み込まれないという問題があります。つまり、画像のダウンロードは、pageload イベントが発生するまで開始されません。また、ブラウザは 1x と 2x の両方の画像をダウンロードする可能性が高いため、ページの容量が増加します。

ラスター画像とベクター画像をインライン化する

画像の作成および保存方法は基本的に 2 種類あり、画像をレスポンシブに配信する方法に影響します。

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

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

SVG

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

以下に、同じ画像を 2 種類の形式で示します。左が PNG、右が SVG です。SVG はどのサイズでも適切に表示されますが、左の PNG は大画面では不鮮明になります。

ページが発行するファイルリクエスト数を削減したい場合は、SVG や Data URI 形式を使用してインラインで画像のコードを記述できます。このページのソースを表示すると、以下のロゴが Data URI と SVG を使用してインラインで宣言されていることがわかります。

SVG はモバイルとデスクトップで幅広くサポートされており、最適化ツールによって SVG のサイズを大幅に削減できます。次のインライン SVG ロゴは一見同じようですが、一方は約 3 KB、他方はわずか 2 KB です。

Data URI

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

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

上記の HTML5 ロゴのコードの開始部分は次のようになります。

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

（完全なコードの長さは 5000 文字に及びます！）

jpillora.com/base64-encoder などのドラッグアンドドロップツールを使用して、画像などのバイナリファイルを Data URI に変換することができます。SVG と同様に、Data URI はモバイルおよびデスクトップのブラウザで幅広くサポートされています。

CSS でのインライン化

Data URI と SVG は CSS でインライン化することもできます。これはモバイルとデスクトップの両方でサポートされています。以下に示すのは、CSS で背景画像として実装された 2 つの画像です。どちらも同じように見えますが、片方は Data URI でもう片方は SVG です。

インライン化の長所と短所

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

短所:

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

他のあらゆるレスポンシブ対応と同様に、テストによって最適な方法を見つける必要があります。デベロッパーツールを使用して、ダウンロードファイルのサイズ、リクエスト数、合計レイテンシを測定します。Data URI はラスター画像に役立つ場合があります。たとえば、他の場所で使用されていない写真が 1 ～ 2 枚だけあるホームページなどで使用します。ベクター画像をインライン化する必要がある場合は、SVG の使用をお勧めします。

CSS での画像処理

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

概要

画面サイズ、端末の解像度、ページレイアウトを考慮して、ディスプレイ特性に合った最適な画像を使用します。
min-resolution と -webkit-min-device-pixel-ratio を使用してメディアクエリを実行し、高 DPI ディスプレイの場合は CSS の background-image プロパティを変更します。
マークアップで 1x の画像に加えて srcset を使用し、高解像度の画像を提供します。
JavaScript の画像置換を利用する場合や、低解像度の端末に高圧縮かつ高解像度の画像を表示する場合は、パフォーマンスへの影響を考慮します。

メディアクエリを使用して画像の選択的な読み込みやアートディレクションを行う

メディアクエリはページレイアウトの変更だけでなく、ビューポート幅に応じた画像の条件付き読み込みやアートディレクションにも利用できます。

たとえば、以下の例では、小さい画面の場合は small.png のみがダウンロードされてコンテンツの div に適用されるのに対し、大きい画面の場合は background-image: url(body.png) が body に、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 でスケールダウンして、ページ上で同じサイズに見えるようにします。

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 はブラウザの幅が 500px 以上ある場合にのみダウンロードされて body に適用されます。

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

アイコンに SVG を使用する

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

概要

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

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

多くのフォントではさまざまな Unicode グリフをサポートしており、画像の代わりにこれらのグリフを利用できます。画像とは異なり、Unicode フォントは劣化なしでスケーリングできるため、画面上でのフォントサイズにかかわらず鮮明に表示されます。

Unicode には通常の文字セット以外にも、矢印（←）、数学記号（√）、幾何学模様（★）、制御機能用記号（▶）、音楽記号（♬）、ギリシャ文字（Ω）、チェスの駒（♞）などの記号が含まれています。

Unicode 文字は、HTML エンティティと同じように「&#XXXX」の形式で入力できます。「XXXX」には Unicode 文字の番号を指定します。次に例を示します。

You're a super &#9733;

あなたはスーパー ★

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

複雑なアイコンを使う必要がある場合は、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">.

試してみる

アイコンフォント使用時の注意点

フォントアイコンに Font Awesome を使用するページの例。 — フォントアイコンに Font Awesome を使用するページの例

アイコンフォントは使いやすく、広く利用されていますが、SVG アイコンと比較するといくつかの欠点があります。

ベクターグラフィックであるため無限にスケーリングできますが、アンチエイリアス処理のためアイコンの輪郭が不鮮明になる場合があります。
CSS によるスタイル設定に制限があります。
line-height や letter-spacing などの設定によっては、ピクセル単位での完全な位置指定が難しい場合があります。
セマンティックではないため、スクリーンリーダーなどのユーザー補助機能で利用しづらい場合があります。
使用範囲を適切に指定しないと、一部のアイコンを使用するためだけにファイルサイズが大きくなる場合があります。

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 リクエストやファイルサイズの増加分とアイコンの必要性のバランスを必ず考慮してください。たとえば、必要なアイコンの数が少なければ、画像や画像スプライトを使用したほうが良い場合もあります。

画像を最適化してパフォーマンスを向上させる

ダウンロード容量の大半を画像が占めることはよくあり、ページ上の表示スペースのかなりの部分を画像が占有することも少なくありません。そのため、画像を最適化することでウェブサイトの容量の大幅な削減とパフォーマンスの改善につながることがよくあります。ブラウザでダウンロードする必要がある容量が少ないほど、クライアントの帯域幅における競合は減り、ブラウザですべてのアセットをダウンロードして画面に表示するまでの時間も短縮されます。

概要

画像形式は無作為に選択せず、利用可能な各形式を理解したうえで最適なものを使用します。
ワークフローの中で画像最適化ツールと圧縮ツールを使用し、ファイルのサイズを縮小します。
利用頻度の高い画像を image sprites にまとめて、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>

これらの手法はレンダリングサイクルを必要とするため、モバイルではパフォーマンスに影響する可能性があります。使用しすぎると、CSS 化で得られるメリットが失われるほか、パフォーマンスが低下するおそれもあります。

レスポンシブ画像

アート ディレクション

レスポンシブ画像

マークアップ内の画像

概要

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

高 DPI デバイス向けに srcset で img を拡張する

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

画像サイズを相対値で指定する

レスポンシブ画像におけるブレークポイントの効果

商品の画像を拡大できるようにする

その他の画像テクニック

圧縮画像

JavaScript で画像を置き換える

ラスター画像とベクター画像をインライン化する

SVG

Data URI

CSS でのインライン化

インライン化の長所と短所

CSS での画像処理

概要

メディアクエリを使用して画像の選択的な読み込みやアート ディレクションを行う

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

メディアクエリを使用して高解像度の画像の表示やアート ディレクションを行う

アイコンに SVG を使用する

概要

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

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

アイコン フォント使用時の注意点

画像を最適化してパフォーマンスを向上させる

概要

適切な形式を選択する

ファイルサイズを小さくする

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

遅延読み込みの使用を検討する

画像は極力使用しない

テキストは画像に埋め込まずにマークアップに含める

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

アートディレクション

高 DPI デバイス向けに `srcset` で `img` を拡張する

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

メディアクエリを使用して画像の選択的な読み込みやアートディレクションを行う

メディアクエリを使用して高解像度の画像の表示やアートディレクションを行う

アイコンフォント使用時の注意点