読者です 読者をやめる 読者になる 読者になる

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

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

PageSpeedInsights

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

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

圧縮ツール

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

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ファイルを複数指定することで一括で圧縮可能です。

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

>jpegoptim.exe -h

Web上でお手軽圧縮「optimizilla」

「optimizilla」は画像ファイルをドロップしてアップロード、あとは品質を決めて適用をクリックし圧縮後のファイルをダウンロードするだけです。複数ファイルを圧縮可能です。

20151019193330

今後は、

ブログ表示が少しでも早くなるように画像を圧縮後に「はてなフォトライフ」にアップロードしてブログで使用したいと思います。

参考サイト

jpegoptim 無劣化でjpeg画像を圧縮できるコマンドラインツール | Ubuntuアプリのいいところ

広告を非表示にする