【速度改善】OptiPNGとJpegoptimを使ってユーザの待ち時間を減らす

ページ表示速度を改善させ、よりストレスを感じにくいサイトにするため、画面を圧縮する方法を紹介します。対象とする画像形式はPNGとJPEGで、それぞれOptiPNGJpegoptimを使用します。

2015年6月5日現在、これら画像圧縮ツールはGoogleのPageSpeed Insightsにおすすめとして掲載されています。

この記事では、OptiPNGとJpegoptimのインストール方法と、使い方をまとめてあります。なお、インストールは、EC2インスタンス(Amazon Linux)で実施しました。

準備

OptiPNG・Jpegoptimをインストールする前に、yumgccを入れておきます。

$ sudo yum install -y gcc

OptiPNGでPNG画像を圧縮

OptiPNGをインストール

OptiPNGをソースからインストールします。バージョンは2015年6月5日時点の最新(0.7.5)を使っています。

# インストール
$ cd /tmp/
$ wget http://prdownloads.sourceforge.net/optipng/optipng-0.7.5.tar.gz
$ tar zvxf optipng-0.7.5.tar.gz
$ cd optipng-0.7.5
$ ./configure
$ make
$ sudo make install

# 確認
$ optipng -V
OptiPNG version 0.7.5
...

OptiPNGを使ってみる

以下のコマンドで、指定したPNG画像を圧縮することができます。

$ optipng -o7 <画像のパス>

オプションの「-o7」は、最適化のレベルを示しています。optipng -hと打つとヘルプを参照できます。

圧縮結果例

下記画像を圧縮したら、サイズが約40%削減できました。(249,703→147,970バイト)

圧縮サンプルPNG

JpegoptimでJPEG画像を圧縮

Jpegoptimをインストール

Jpegoptimをソースからインストールします。バージョンは2015年6月5日時点の最新(1.4.3)を使っています。

# インストール
$ sudo yum install -y libjpeg-turbo-devel
$ cd /tmp
$ wget https://github.com/tjko/jpegoptim/archive/RELEASE.1.4.3.tar.gz -O jpegoptim.tar.gz
$ tar zvxf jpegoptim.tar.gz
$ cd jpegoptim-RELEASE.1.4.3/
$ ./configure
$ make
$ make strip
$ sudo make install

# 確認
$ jpegoptim -V
jpegoptim v1.4.3  x86_64-unknown-linux-gnu
Copyright (c) 1996-2015, Timo Kokkonen
...

Jpegoptimを使ってみる

以下のコマンドで、指定したJPEG画像を圧縮することができます。

$ jpegoptim --strip-all <画像のパス>

オプションの「--strip-all」で、Exifなどを除去するように指定しています。jpegoptim -hでヘルプを見れます。

圧縮結果例

下記画像を圧縮したら、サイズが約19%削減できました。(607,293→490,816バイト)

圧縮サンプルJPEG

この記事が役に立った場合、シェアしていただけると励みになります!!