画像

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

アート ディレクション

アート ディレクションの例

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

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

マークアップを用いた画像処理

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

TL;DR

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

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

意図せず画像がビューポートからはみ出ることを防ぐために、画像の幅の指定では必ず相対的な単位を使用してください。 たとえば width: 50%; と指定すると、親要素に対して画像幅が 50% になります(ビューポートや実際のピクセルサイズの 50% ではない)。

CSS ではコンテンツをコンテナからオーバーフローさせることができるため、画像やほかのコンテンツのオーバーフローを避けるため、最大幅 100% の使用が必要となります。次に例を示します。

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

img 要素の alt 属性を使用して、画像についてのわかりやすい説明を必ず追加してください。これらの情報をスクリーン リーダーなどのユーザー補助機能に提供することで、サイトのアクセシビリティを向上させることができます。

高 DPI のデバイス向けに srcsetimg を拡張する

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>

サンプルを見る

上の例では、ブラウザの幅が 800px 以上の場合に、デバイスの解像度に応じて head.jpg または head-2x.jpg が使用されます。ブラウザの幅が 450px ~ 800px の場合も同様に、デバイスの解像度に応じて head-small.jpg または head-small-2x.jpg が使用されます。画面の幅が 450px より狭い場合や、picture 要素がサポートされていない下位互換の場合は、ブラウザは代わりに img 要素をレンダリングします。このため、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.png 1x
400px 2 400.png 2x
320px 2 400.png 2.5x
600px 2 800.png 2.67x
640px 3 1000.png 3.125x
1100px 1 1400.png 1.27x

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

多くの場合、画像サイズはサイトのレイアウトのブレークポイントによって変わる可能性があります。 たとえば、狭い画面では画像をビューポートの幅全体に広げたほうがよいのに対し、広い画面では画像の占める部分を抑える必要があります。

<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. Crew のウェブサイト
商品画像を拡大できる J. Crew のウェブサイト

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

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

その他の画像テクニック

圧縮画像

圧縮画像技術 を使用すると、デバイスの実際の性能に関係なく、高圧縮の 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 は大画面では不鮮明になります。

PNG 形式の HTML5 ロゴ SVG 形式の HTML5 ロゴ

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

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

Data URI

Data 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 プロパティをメディアクエリと併用すると、より高度な処理が可能になり、画面の解像度やビューポートのサイズなどの条件に応じて適切な画像を読み込むことができます。

TL;DR

  • 画面サイズ、端末の解像度、ページ レイアウトを考慮して、ディスプレイ特性に合った最適な画像を使用します。
  • メディアクエリで 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 文字を使います。

TL;DR

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

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

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

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

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

You're a super &#9733;

You're a super ★

複雑なアイコンを 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 AwesomePictosGlyphicons など、有料および無料のアイコン フォントが数多く提供されています。

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

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

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

TL;DR

  • 画像形式は無作為に選択せず、利用可能な各形式を理解したうえで最適なものを使用します。
  • ワークフローの中で画像最適化ツールと圧縮ツールを使用し、ファイルのサイズを縮小します。
  • 利用頻度の高い画像を image sprites にまとめて、HTTP リクエストの回数を減らします。
  • 最初に読み込むページ容量を減らし、読み込み時間を短縮するために、画面をスクロールして画像がビューに表示されてからデータを読み込むようにします。

適切な形式を選ぶ

画像については、ベクター画像ラスター画像 の 2 種類を検討する必要があります。ラスター画像の場合は、適切な圧縮形式(GIFPNGJPG など)の選択も必要です。

ラスター画像とは、個々のドットやピクセルのグリッドで表現される写真などの画像です。 ラスター画像は通常、カメラやスキャナで作成されますが、ブラウザ内で canvas 要素を使用して作成することもできます。 画像サイズが大きくなると、ファイルのサイズも大きくなります。 ラスター画像は元のサイズよりも大きくスケーリングすると、ブラウザ側で欠落しているピクセルを推測して補間する必要があるため、画像が不鮮明になります。

ベクター画像(ロゴやラインアートなど)は、曲線、直線、形状、塗りつぶし色の集合として定義されます。ベクター画像は、Adobe Illustrator や Inkscape などのプログラムを使用して作成され、SVG などのベクター形式で保存されます。ベクター画像は基本的な要素で構成されているため、ファイルサイズを変えずに、品質を保ったままスケーリングが可能です。

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

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

  • 写真画像には JPG を使用します。
  • ベクターアートや無地のグラフィック(ロゴやラインアートなど)には SVG を使用します。 ベクターアートを利用できない場合は、WebPPNG を使用します。
  • GIF ではなく PNG を使用します。これは、PNG のほうが使用できる色数が多く、圧縮率も優れているためです。
  • 長いアニメーションには、画質が良く、ユーザー側での再生操作が可能な <video> を使用することを検討します。

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

画像ファイルのサイズは、保存後に「後処理」を行うことで大幅に削減できます。 画像圧縮用のツールには、可逆および非可逆圧縮ツールや、オンライン、GUI、コマンドライン タイプのツールなど、さまざまな種類があります。 可能であれば、ワークフローにおける画像の最適化作業を自動化することをおすすめします。

また、JPG および PNG ファイルを、画質を下げずに可逆圧縮できるツールもいくつかあります。JPG の場合は、jpegtran または jpegoptim(Linux でのみ利用可能、–strip-all オプションを付けて実行)を利用できます。PNG の場合は、OptiPNG または PNGOUT を利用できます。

image sprites を使用する

例で使用されている image sprites シート

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 のメリットが失われるだけでなく、パフォーマンスが低下するおそれもあります。