ブログ表示高速化のために画像圧縮してみる

Google Analyticsを眺めていて、「行動」→「サイトの速度」の「PageSpeed の提案」のところが気になり対処できないかと考えたのですが、はてなブログを間借りしているので対応できる項目は少なく、出来ることからということでブログに貼り付ける画像をもっと軽くするために画像圧縮について調べて試してみました。

PageSpeedInsights

画像のデータ容量は画像本体データの他に撮影時にカメラによって撮影日時やISO速度、絞り、露出時間、GPS情報などのexif 情報が付加されている場合があります。これらの情報は画像の整理時など後々便利な情報ではありますが、必要ない場合はデータ圧縮もかねて削除します。

PageSpeed Insights「画像を最適化する」
Optimize Images | PageSpeed Insights | Google Developers

圧縮ツール

今回、JPEG形式の画像に対応した圧縮ツールとしてWindowsデスクトップ上で使用するものとWeb上に画像ファイルをアップロードして圧縮後にダウンロードし直す２つのタイプを使ってみます。

Googleもおすすめする「jpegoptim」

Google デベロッパーのページでも紹介されている画像圧縮ツール「jpegoptim」はコマンドラインで操作します。フォルダ内のJPEGファイルを一括で圧縮でき、exif 情報も同時に削除可能です。

一つの画像ファイルを指定する場合

>jpegoptim.exe  --max=80 --strip-all 画像ファイル名.jpg

複数ファイルを指定する場合

>jpegoptim.exe  --max=80 --strip-all ./testdir/*.jpg

./testdir/gtmetrix.com.JPG 1232x455 24bit N JFIF [OK] 74753 --> 63518 bytes (15.03%), optimized.
./testdir/optimizilla.com-jp.JPG 940x682 24bit N JFIF [OK] 90587 --> 78721 bytes (13.10%), optimized.
./testdir/optimizilla.com.JPG 946x670 24bit N JFIF [OK] 78511 --> 66317 bytes (15.53%), optimized.
./testdir/PageSpeed Insights.JPG 703x737 24bit N JFIF [OK] 56033 --> 44699 bytes (20.23%), optimized.
./testdir/site-speed.JPG 129x155 24bit N JFIF [OK] 11064 --> 3496 bytes (68.40%), optimized.

「--max=80」このオプションで品質80％の範囲で最大限圧縮（だと思う）
「--strip-all」このオプションで付属情報をすべて削除
「画像ファイル名.jpg」の部分をディレクトリ名とJPEGファイルを複数指定することで一括で圧縮可能です。

詳しくはヘルプオプションで確認してください。