ハマログ

株式会社イーツー・インフォの社員ブログ

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

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

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

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

基本的な圧縮(最低限の画像圧縮)

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

高度な圧縮(ロスレス圧縮)

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

適切な画像の選択

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

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

JPEGをロスレス圧縮する

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

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

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の警告がなくなりました!
20140515 104458

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

GoogleInsightsJPEGjpegtranPageSpeedPerformanceグーグルパフォーマンス

  kaneko tomo   2014年5月15日


関連記事

WordPressプラグインWP to Twitterでツイッター連携

こんにちは。S.Iです。 桜が綺麗に咲いてますね。 今回はWordPress(3…

AWS Systems Managerを利用して複数のEC2インスタンスで一括コマンド実行する

AWS Systems Managerの管理下にEC2を置くと、複数のインスタン…


← 前の投稿

次の投稿 →