画像のファイルサイズを圧縮する方法
WEBページを表示する際に、一番読み込みに時間がかかるのは動画や画像などです。読み込みに時間がかかるとユーザーが離脱してしまいますし、スマホでは無駄なパケットをユーザーに使用させることにもつながります。この為デザイン性は生かしつつも、できるだけ画像のサイズは小さく圧縮するべきです。ここでは画像の圧縮方法とbase64エンコードについても併せてまとめたいと思います。
PhotoshopやIllustratorで画像を作成する際の注意
多くの現場ではPhotoshopやIllustratorを用いてpng、gif、jpgいずれかの形式でWEB用の画像ファイルを作成すると思います。他にもtiff、bmpといった画像形式がありますが、これらは高解像度向けの画像規格でファイルサイズを小さくする目的でWEB上で利用する画像規格は主にpng、gif、jpgを利用します。
| 画像形式 | 最大色数 | 透過 | 圧縮形式 | 説明 |
| jpg(jpeg) | 1670万色 | × | 非可逆 | 主に写真に利用する画像形式です。PhotoshopやIllustratorでjpgを出力する場合、画質を0(低画質)～100(高画質)で指定でき、画質とファイルサイズがトレードオフの関係になりますが調整することができます。 |
| png24 | 1670万色 | 〇 | 可逆 | 主に256色以上の色数の少ないデザインに利用する画像形式です。PhotoshopやIllustratorでpng24を出力する場合に圧縮率を指定することはできません。 |
| png8 | 256色 | 〇 | 可逆 | 主に256色以下の色数の少ないデザインに利用する画像形式です。PhotoshopやIllustratorでpng8を出力する場合、色数を2～256で指定でき、画質とファイルサイズがトレードオフの関係になりますが調整することができます。 |
| gif | 256色 | 〇 | 可逆 | png8と同じく主に256色以下の色数の少ないデザインに利用する画像形式です。この画像形式はIBMが開発し一時有料になったためpng形式が誕生した経緯があります。現在は無償になっています。PhotoshopやIllustratorでgifを出力する場合、色数を2～256、劣化度を0(低劣化)～100(高劣化)で指定でき、画質とファイルサイズがトレードオフの関係になりますが調整することができます。 |
～ 参考：各形式ファイルサイズ比較 ～
100px×100px、色数:1色のみ(青)
| 最小 | 画像形式 | 設定 | ファイルサイズ |
| jpg(jpeg) | 画質100(色数が少ないので0でも100でも同じ) | 435B | |
| png24 | - | 1,182B | |
| png8 | 色数2色 | 588B | |
| 〇 | gif | 色数2色、劣化なし | 156B |
100px×100px、色数:16色
| 最小 | 画像形式 | 設定 | ファイルサイズ |
| jpg(jpeg) | 画質によってファイルサイズは大きく変わる。画質0ではモアレがひどく、実質30程度から実務的に利用できるレベル | 1,165B(画質30) 3,101B(画質100) |
|
| png24 | - | 1,422B | |
| 〇 | png8 | 色数16色 | 729B |
| gif | 色数16色、劣化なし | 955B |
100px×100px、色数:256色以上
| 最小 | 画像形式 | 設定 | ファイルサイズ |
| 〇 | jpg(jpeg) | 画質によってファイルサイズは大きく変わる。画質0ではモアレがひどく、実質30程度から実務的に利用できるレベル | 2,188B(画質30) 12,760B(画質100) |
| png24 | - | 25,820B | |
| png8 | 色数16色 | 9,841B | |
| gif | 色数16色、劣化なし | 9,863B |
結論として256色以上の写真はjpg、256色以下の画像はpng8、単色の画像はgifが適していると言えます。
png24は透過も利用でき写真も高画質で扱えるオールマイティさはありますが、ファイルサイズ的には一番大きくなってしまいます。
画像圧縮サイトを利用してさらに圧縮
以下のサイトを利用してPhotoshopやIllustratorで出力したpng、gif、jpgをさらに圧縮することができます。
～ TinyPNG ～
アムステルダムのIT企業voormediaが運営する画像圧縮サイトです。画像圧縮サイトとして昔からよく利用されています。最大20のjpg、pngファイルを同時に圧縮できます。ユーザー登録も何も必要なく利用できます。
～ Optimizilla ～
最大20のjpg、pngファイルを同時に圧縮できます。ユーザー登録も何も必要なく利用できます。個人運営のサイトのようでWHOIS情報は公開されていません。
Optimizilla（https://imagecompressor.com/ja/）
その他画像ファイルの読み込み時間を短縮する方法
data URI
jpg、png、gif等の外部の画像ファイルを読み込むためのネットワーク時間を省くためURI文字列としてHTML内に画像を埋め込む方法です。特にモバイル端末からのアクセスの場合はHTTPリクエストが減るためパケットの節約にもなります。詳しくはこちらでまとめています。
SVG形式ファイル
SVG形式のファイルとはjpg、png、gifと違いベクターデータと呼ばれる画像を拡大しても劣化しない形式の画像ファイルのことです。ラスターデータを扱うPhotoshopでは出力できませんが、Illustratorでは簡単に出力することができます。SVG形式のファイルの使いどころとしては背景など大きなサイズの画像を利用する際、jpg、png、gifではどうしても画像の解像度(画角)に応じてファイルサイズが大きくなってしまいますが、SVG形式の場合ファイルサイズは解像度(画角)に左右されず。概ねjpg、png、gifよりも小さいファイルサイズになります。
ただし注意点が一点。ブラウザによって表示できない場合があります。
CSSスプライト
CSSスプライトとはhover前後の画像を1画像で作成し、その表示位置をCSSでずらすことにより画像を切り替える方法です。複数の画像ファイルを1つの画像ファイルに統合するため、外部画像ファイルの読み込み回数を減らすことができます。
問題はCSS側の記述が多くなる為、ソースコードの視認性が悪くなることです。