Webで画像をBase64にするとデータ量が約1.3倍になって転送量が増えるといわれてますが、実際Webでは通信時にgzip圧縮をすることが多いので実際どうなんだろうと思いBase64だけではなくgzip圧縮までしてサイズを比較してみました。
結果
とりあえず結果としては以下です。
| 種類 | サイズ |
|---|---|
| 元のファイル | 118KB |
| BASE64化したファイル | 157KB |
| BASE64化してgzipをしたファイル | 119KB |
実験
元の画像
Base64にしてgzip
Base64にする
cat okonomi.jpg | base64 > okonomi.base64
118KB -> 157KBと1.33倍になりました。Base64にすると約1.3倍になるとよく言われているのでだいたい言われている通りでした。
Base64ファイルをgzip圧縮する
-cオプションで圧縮した結果を標準出力に出力します`
cat okonomi.base64 | gzip -c > base64_okonomi.gzip
この結果119KBとなりました。
元に戻す
ちゃんと思った通りのファイルになっているかもとに戻して確認します。
gzipを解凍
解凍には-dオプションを指定します。
gzip -d -c base64_okonomi.gzip > unzip-okonomi.base64
Base64から元に戻す
base64コマンドの時は-Dオプションを使います。
base64 -D unzip-okonomi.base64 > unbase64-okonomi.jpg
確認
最後画像を開くと元の画像は表示されます。
open unbase64-okonomi.jpg
最後に
結果としてはサイズはgzipすればほぼ元のサイズに戻ったのですが、HTTP/1.1の時と異なりHTTP/2が多く使われる現在ではBase64にして画像を埋め込んでリクエストを減らすメリットより、ファイルとして扱ってキャッシュを効かせたりするメリットの方が大きいと思うのであえてBase64にすることはあまりなさそうです。