はじめてのフロントエンドパフォーマンス改善: 画像ファイル編
この記事に関して
この記事では、画像関連のフォーマンス改善策を紹介します。
React.jsやVue.jsなどのフレームワークにおけるパフォーマンス向上の基礎としても役立つになるかと思われます。
この記事を以下の本を参考にしています。
この記事の対象者
- フロントエンドのパフォーマンスに興味のある
関連記事
レンダリングとは？に関しては下記記事をご覧ください
PNG VS JPEG
写真にはJPEG、色数が多いアイコンや透過が必要な画像にはPNGを使い分けるのがベターです。
- JPEG
- 写真に最適。微細な色の違いをカットして容量を軽する
- PNG
- 色数が多いアイコンや透過が必要な画像に最適ですが、容量が大きくなりがち
詳しくは下記記事が参考になるかなと思われます。
デバイスピクセルごとに読み込む画像を切り替える
img要素やCSSのbackgroundimage属性を使った場合、ユーザーの端末のデバイスピクセル比が変わった時に問題が起きるかもしれません。
デバイスピクセル比とはディスプレイ上のピクセルの密度を示す値で、物理的なピクセルとCSSピクセルの比率を表します。簡単に言うと、画面上の1つのCSSピクセルが、実際には何個の物理的なピクセルで表示されるかを示す値です。
デバイスピクセル比に関しては下記記事がわかりやすく説明されています。
デバイスピクセル比の違いサンプルは下記の通りです。
デバイスピクセル比1
- 画面
- 通常の標準解像度のディスプレイ
- 表示
- 1 CSSピクセル = 1 物理ピクセル
デバイスピクセル比2
- 画面
- 高解像度ディスプレイ
- 表示
- 1 CSSピクセル = 4 物理ピクセル（2x2のグリッド）
200x200ピクセルの画像を下記のようなimgタグで表示させた場合、デバイスピクセル比1の場合はそのまま表示されますが、デバイスピクセル比2の場合は2倍に引き伸ばされて表示されます
<!-- 200x200ピクセルの画像の場合 -->
<!-- デバイスピクセル比が大きい場合は引き伸ばされる -->
<img src="sample.png">
引き伸ばしがされないようにするにはwidthとheightを指定すれば解決します。
しかし、この場合、デバイスピクセル比が低い環境では無意味に高画質な画像を読み込んでしまいます
<!-- 400x400ピクセルの画像 -->
<!-- デバイスピクセル比が小さい場合は無駄に高画質な画像が読み込まれる -->
<img src="sample.png" width="200" height="200">
デバイスピクセル比に応じて画像を最適に表示するためには、srcset 属性を使います。
<img src="sample.png" srcset="sample@2x.png 2x">
- srcset 属性
- 異なるデバイスピクセル比用の画像ファイルのリストを指定します。各リスト項目には画像のアドレスと、その画像が対応するデバイスピクセル比を指定
- src 属性
- srcset属性に対応していない古いブラウザのために、標準解像度（デバイスピクセル比1）用の画像を指定
これによりデバイスピクセル比が1のブラウザでは、sample.png が表示され、デバイスピクセル比が2のブラウザでは、sample@2x.png が表示されます
例えばNext.jsを使う場合は下記記事が参考になると思います。
終わりに
今回は画像ファイルのパフォーマンスについて書きました。
この記事がきっかけでパフォーマンスに興味が持って頂ければ幸いです。
最後までお読みいただきありがとうございます！
Discussion