PNG画像ファイルを圧縮してブログを高速化した
May 23, 2020 17:00 · 1315 words · 3 minute read
先日公開した下記の記事を見ると、表示が非常に遅くなっていました。
子供が自由に落書きして遊べる筆のおもちゃをペットボトルで作ってみた
画像がじわじわと表示されています。
Chromeのデベロッパーツールで速度を計測したところ、読み込みが完了するまでに15秒近くもかかっていました。遅すぎる。。。
遅い原因は画像の読み込みのようです。
画像サイズが大きいものは「917kb」もありました。これは大きすぎますね。
スマホやモバイルWiFiルータなど、月々の通信量に上限がある環境の人に優しくないです。また、昨今では世界的に通信量が増大しているらしいので、通信量と回線速度を健全に保つ意味でもよくありません。
ということで、画像サイズを圧縮してブログの高速化を図りました。
目次
環境
Ubuntu 20.04
比較したツール
下記の4つのツールを試しました。
比較に使う画像
こちらの画像を使って圧縮能力の比較をします。
圧縮前の画像サイズは約600kbです。
圧縮能力比較
それぞれのツールで画像を圧縮し、圧縮後の画像サイズを比較してみます。
TinyPNG
実行
TinyPNG にアクセスし、PNGファイルをドラッグ＆ドロップして実行します。
結果
600kb → 240kbになりました。
圧縮前後で若干色味が変わったような気もしますが、全く支障がないレベルです。
pngquant
インストール
$ sudo apt install pngquant
実行
$ pngquant udon-pngquant.png
結果
600kb → 257kbになりました。
optipng
インストール
$ sudo apt install optipng
実行
$ optipng udon-optipng.png
** Processing: udon-optipng.png
608x458 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 599427 bytes
Input file size = 600476 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 523169
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 523169
Output IDAT size = 523169 bytes (76258 bytes decrease)
Output file size = 523341 bytes (77135 bytes = 12.85% decrease)
結果
600kb → 599kbになりました。
ほとんど変わっていませんね。
E-Mage
インストール
公式サイトからダウンロードして、実行します。
E-Mage
実行
アプリを起動後、ドラッグ＆ドロップして実行します。
複数のアルゴリズムの中から、最適な手法を探してくれているらしく、実行に少々時間がかかります。
Electron製であることも、処理速度に影響しているのかもしれません。
結果
600kb → 490kbになりました。
比較結果
今回の比較では、TinyPNGとpngquantが画像圧縮能力に優れていました。
どのツールも、圧縮後は画像の色味が若干変わったように見えますが、気にならないレベルだと思います。
コマンドで実行できる方が便利なので、今後のブログではpngquantを使って画像を圧縮してから、ブログを公開しようと思います。
コマンドサンプル
$ pngquant --ext .png -f *.png
画像圧縮後のブログ表示速度
画像を圧縮後、どれだけ表示速度が改善されたのか確認しました。
結果は5秒。画像サイズと同じく、表示にかかる時間も丁度1/3くらいになりました。
これだけ違うと、早くなったことが体感できます。
最後に
画像を圧縮することで、ブログの表示にかかる時間が1/3になりました。
「阿部 寛のホームページ」と比較するとまだまだ遅いですが、画像の多い記事の表示速度としては、とりあえず及第点かなと思います。