a-blog cmsで画像のロスレス圧縮をする

ロスレス圧縮

画像を最適化（可逆圧縮＝ロスレス圧縮）する事により、データサイズを小さくすることができ、ページスピードが早くなることに役立ちます。 しかし、a-blog cmsでは静的なものは、製作者が適切に圧縮してサーバに配置すればいいのですが、動的なコンテンツ（CMSからあげた画像）はCMSが様々なサイズの画像をPHPで生成する為、圧縮がされません。

画像の圧縮は全体のデータサイズにとってもバカにならないので、今回はこの問題を解決する為、CMSからあげた画像を自動的にロスレス圧縮してみたいと思います。

圧縮ツール

圧縮ツールはGoogleのPageSpeed Insightsで推奨されている以下２つを選択。

• jpegoptim : JPGE画像
• optiPNG : PNG画像

インストール

jpegoptim

jpegoptim のインストールを参考

$ sudo yum -y install libjpeg
$ sudo yum install libjpeg-turbo-devel

$ cd /tmp
$ mkdir jpegoptim
$ cd jpegoptim
$ wget http://www.kokkonen.net/tjko/src/jpegoptim-1.4.1.tar.gz
$ tar zxvf jpegoptim-1.4.1.tar.gz
$ cd jpegoptim-1.4.1
$ ./configure
$ make
$ sudo make install

$ jpegoptim --version
jpegoptim v1.4.1  x86_64-unknown-linux-gnu

optiPNGのインストール

$ sudo yum install optipng

$ optipng -v
OptiPNG version 0.7.5

a-blog cmsと連携

ツールがインストール出来たらa-blog cmsと連携します。 連携の方法は画像生成時のフックポイントが用意されているのでそれを利用。

config.server.phpでフックを有効化 /php/ACMS/User/Hook.phpで画像生成をフックし圧縮を実行

これでCMSから画像をアップロードしても自動で圧縮されるようになりました。

# config.server.php
define('HOOK_ENABLE', 1);

# /php/ACMS/User/Hook.php
public function mediaCreate($path)
{
    exec("/usr/local/bin/jpegoptim -m90 -o -p --strip-all ".$path); // -m 品質 -o 上書き -p timestampを保持
    exec("/usr/local/bin/optipng ".$path);
}

結果

圧縮なし 970 × 728File size188  KB

970 × 728File size188  KB

圧縮あり 970 × 728 File size138 KB

970 × 728 File size138 KB

上が従来の圧縮なし画像で、下が圧縮した画像になります。(73.4%に圧縮)

この場合はロスレス圧縮ではなく90%で圧縮してますが、劣化なく表示できてると思います。 写真によっては60,70%でも大丈夫です。

次は他のパフォーマンスについても書きたいと思います。では！