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の警告がなくなりました！
ビルド・配布プロセスに組み込めそうですね！
続くの巻
