Google PageSpeed Insights – jpeg画像を最適化する

Google PageSpeed Insightsでウェブサイトのパフォーマンスを計測したあとの、「画像の最適化」に対応してみます。

「画像を最適化する　画像を適切にフォーマット化して圧縮すると、データサイズを大きく削減できます。」という項目です。

Googleによると、画像の最適化には「基本的な圧縮」と「高度な圧縮」があります。

基本的な圧縮（最低限の画像圧縮）

PhotoshopやJpegminiを利用した非可逆圧縮です。画像の解像度やJPEGの圧縮レベルを適切に選択し、容量を削減しましょう。

高度な圧縮（ロスレス圧縮）

画像の品質に影響を与えることなく、JPEGやPNGファイルに対して高度なロスレス圧縮を実行するツールがいくつか提供されています。Googleの推奨ツールとして、JPEGでは、jpegtranまたは jpegoptimがあります。PNGではOptiPNGまたはPNGOUTが利用できるようです。gifはちょっとよくわからなかった。

適切な画像の選択

Googleによると以下のように画像を選択するとよいそうです。

• 小さく(1×1や数色程度の画像）単純な画像にはgifを利用する
• BMP, TIFFは利用しない
• 写真にはJPEGを利用する

JPEGをロスレス圧縮する

さて、高度な画像圧縮ツールを試してみます。

まず、PageSpeed Insightsで警告が表示されていることを確認します。

jpegtranをインストールしようと思いましたが、最初から入っていました。

[tomo@devserver ~]# jpegtran --man
usage: jpegtran [switches] [inputfile]
Switches (names may be abbreviated):
  -copy none     Copy no extra markers from source file
  -copy comments Copy only comment markers (default)
  -copy all      Copy all extra markers
  -optimize      Optimize Huffman table (smaller file, but slow compression)
  -progressive   Create progressive JPEG file
Switches for modifying the image:
  -crop WxH+X+Y  Crop to a rectangular subarea
 （略）

ちょっとやってみる

jpegtran -copy none -optimize -outfile result.jpg base.jpg

重要そうなオプション
-copy none：JPEGの拡張マーカーをコピーしない
-optimize：ハフマンテーブル符号テーブルの最適化を実行

他のオプションについては、jpegtran –man でずらーっと出てきます。

バッチで一括実行してみる
stackoverflowのこの記事を参考に。

#! /bin/sh

EXTENSIONS="jpe?g"

if [ $# -ne 1 ]; then
    echo "Usage: ./jpegtran-optimize.sh /home/user/"
    exit 1
fi

find $DIR -regextype posix-egrep -regex ".*\.($EXTENSIONS)\$" -type f | xargs -I
{} jpegtran -optimize -progressive -outfile "{}.optimized" "{}"

for file in $(find $DIR -name '*.optimized'); do
    chown $(stat -c "%U:%G" "${file%.optimized}") "$file"
    chmod $(stat -c "%a" "${file%.optimized}") "$file"
    mv -f "$file" "${file%.optimized}";
done

作成したシェルに実行権限を与えた後、実行してみます。

[tomo@devserver ~]# ./jpegtran-optimize.sh /var/www/corporate/images/
[tomo@devserver ~]# 

ふたたび、PageSpeed Insightsを実行してみます。
JPEGの警告がなくなりました！

ビルド・配布プロセスに組み込めそうですね！
続くの巻