デザイン

公開日：2020-03-22 / 更新日：2020-01-18

【ウェブ開発者向け】効果的な画像を作るために必要な事

KeyCDN

We are a Swiss registered company headquartered in Winterthur, Switzerland. We’re a passionate team operating a high-performance content delivery network (CDN).

本記事は、Responsive Images - Serve Scaled Imagesを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

944 views

読了時間 : 約9分54秒

srcset、sizes、media HTMLのような画像に関するテクニックは、違うサイズのイメージを一緒にするためのものです。これを使うと、あなたのウェブサイトやアプリの機能が全体的に向上し、イメージの表示が速くなります。

画像を１つ撮って、それをCSSを使って効果的にするだけでなく、元の画像とは全く違ったものを作り出す事ができます。これは、パフォーマンスを改善するのに役立ちます。私達が作ったImage CDNのまとめによると、平均的に画像はウェブページ全体の５１％を占めており、画像を縮小するのはページのサイズを小さくする事につながります。

srcset、sizes、mediaとは何か?

srcset、sizes、media は<img>と <source>を加えれば、サイズや環境が違う画像を取り入れられるようになります。これは、指定した画像を表示させるためのものです。srcsetは画像を表示させるものです。画像と絶対パスか相対パスを組み合わせる事で画像を取り込む事ができるようになります。 (例. 1x, 2x、3x）これは、 and で使えるようになります。

sizesとmedia はよく似ています。どちらも違うサイズの画像をいろいろな所に表示させるためのものです。 sizesで画像のサイズを指定していても、サイズの違う連携しているメディアで表示することができます。sizesは <img> と<source>で使えるようになりますが、 mediaは<img>では使えません。

画像に関するすべては<source>が必要になります。

srcset、sizes、 mediaの使い方

基本的に、画像を挿入する時は<img> と <src>を使います。例えばこういう感じです。

<src>は、画像をブラウザのどこに表示させるか指定するものです。上のように絶対値が指定されると、指定した場所に画像を表示させる事ができます。

サーチエンジンやスクリーンリーダーに反映させるには、<alt>を入れることが重要です。幅や高さは <img>< src>< size>で指定する事ができますが、これだけだと画像がデバイスより大きくなってしまいます。なので、よく<class>が使われます。例えばこのような形です。

<img>を使うときに注意しなければいけないのは、画像を表示させる全てのデバイスに影響があるということです。CSSで、画像の大きさを全てのデバイスに合うようにすると、画像が効果的になります。この時はimg-fluidで使ってください。これで、重要なデータが強調されるようになります。画像の大きさを指定しないと、速度が遅くなり、画像がページサイズより大きくなり、幅をとります。この時は、< srcset>、<sizes>、<media>を使うと解決します。

srcset

srcsetは attribute can be used in the <img>と <source>と一緒に使います。ファイル名の後に「730w」「 610w」「350w」のように画像の大きさを指定します。これの問題点は、画像１つ１つに設定しなければいけません。たとえばこういう形です。

<sizes>と<media>は playの中で使用できるので便利です。

sizes

sizesは、あなたが画像を表示させようとしているメディアで、最適な大きさを指定するものです。これは<srcset>と一緒に使います。たとえば、こういう形です。

<sizes>は <img>と一緒に使うと役に立ちます。<source>も一緒に使うと、より画像を表示させている媒体にあった画像になります。

media

<media>は、画像を表示するメディアを最適にするためのものです。これは<source>の中に入れるだけで使えるようになります。設定が正しければ正常に表示され、間違っていれば表示されません。たとえばこのような形です。

追加で、画像を表示させる場所の大きさを指定する事ができます。表示する画像の質を設定することもできます。

Pixel Density Descriptors

pixel density descriptorsも、画像の質をディスプレイやスクリーンにあわせるためのものです。これらは1x、2x、3xと一緒に使います。元の画像よりも２・３倍大きく表示させることができます。たとえばこのような形です。

pixel density descriptorsを使うときは、<sizes>や <media>は必要ありません。しかし、実際に2xや3xの大きさがある画像は、２・３倍大きく表示されます。なので、 WebPを使ってサイズを調整する必要があります。

WebP Format

最後に、WebP formatを忘れてはいけません。. WebPで編集した画像は、平均でPNGより26%、 JPEGより 25－34%小さくなります。あなたの画像をWebPに変えるだけで、大きさが25%小さくなります。しかし、WebPはすべてのブラウザに有効ではありません。その時は、<source>の中で< type>で設定してください。例えば、こういう形です。

すでに述べたように、As we already know, the <source>は環境が整っていないと動きません。上のサンプルでは、 will only be used if the condition is true, which means in our example above WebPの画像が表示されます。 WebPが動かない環境では <PNG>で表示されます。どちらも動かない時は、<img>で表示されます。 <img>の中で、最適なものが選ばれます。

Browser Support

web browsers support で<srcset>は except Internet ExplorerとOpera Mini以外のほとんどのブラウザで使えます。しかし、マイクロソフトは. Edgeで使えるようにしています。もし使っているブラウザが対応していなければ、オリジナルの画像が表示されます。<img>を使うときは、 <src> が必要です。 <picture>を使うときは、 <img>が必要です。ブラウザで画像を表示するには、何も問題ありません。

なぜ影響力のある画像が必要なのか？

画像において重要なのはファイルの大きさです。小さいデバイスでは、1460 x 730ピクセルが最適です。画像は容量を消費します。では、そのくらい消費するのでしょうか？上の例で使った画像はこのくらいの容量です。

File Name	Size
responsive-images.jpg	30.7 KB
responsive-images-lg.jpg	24.1 KB
responsive-images-md.jpg	19.7 KB
responsive-images-sm.jpg	10.6 KB

電話のような小さいデバイスのディスプレイは、375ピクセルです。そこで最適な画像は、<images-sm.jpg>で10.6 KBです。何も設定しないと、画像は (CSS でサイズが小さくなって) 30.7 KBになります。これは65.47%も大きいです。ページの大きさに関係なく、画像は容量を取ります。

容量を減らすのは複雑と思っているかも知れません。しかし、あなたのプロバイダーを少し調整するだけで、容量を減らす事ができます。