ウェブサイト用画像の最適化

[ 2013 / 12 / 14 ]

ウェブサイト用画像ファイルの容量を劣化なしで減量します。効果は画像によって変わってきます。

対象の画像ファイル

ウェブサイトにアップロードされた画像ファイルは何度も閲覧されるので、わずかな削減でも時間がたてばたつほど効果があります。JPGの方はこのサイトで数年使用し、PNGの方は1年程度使っていますが特に問題は出ていません。

処理前のファイル総数

制作途中のThinkPad R61のページで使われている画像ファイルの総数と容量です。これらの画像ファイルを最適化して容量を抑えます。

処理前jpg 処理前png

そのページの画像はJPGとPNGの2種類のみです。

JPGの画像情報削除(JPEG Cleaner)

JPGファイルにはどんなカメラで撮ったかなど様々な情報が保存されていますが、それらをまとめて削除します。Vectorのサイトからダウンロードできます。

http://www.vector.co.jp/soft/dl/win95/art/se139930.html

JPEG Cleaner起動

JPEG Cleanerを起動して、メニューの「ファイル」→「バッチ処理」を選びます。

Expert Mode

「Expert Mode」→「設定」を選びます。

Expert Mode設定

全て有効にします。一度設定したら次から設定は不要です。

処理するファイルを投入して実行

処理するファイルを選択してウィンドウにドラッグ&ドロップして、「実行」ボタンを押します。バッチ処理では複数のファイルをまとめて放り込む事ができます。

処理完了

5kBほど削減されました。

処理前後

処理前 処理完了

データ容量の削減よりも、余計な情報の削除的な意味合いが強いです。

JPGの画像圧縮(carmine)

JPG画像を最適化して容量を削減します。Vectorのサイトからダウンロードできます。

http://www.vector.co.jp/soft/win95/art/se279366.html

carmine起動

設定画面を開きます。

carmine設定

画像のような感じで設定を行います。保存場所は上書きか別の場所にするか選べます。

撮影情報の削除機能もありますが、その処理のあとに上のJPEG Cleanerでより削れた事があったので、情報削除は上のソフトだけにしています。

フォルダを投入して実行

処理を行うフォルダをドラッグ&ドロップして、実行ボタンを押します。 処理完了

処理が終わったらウィンドウの一番下にあるステータス欄で削減容量が確認できます。それが済んだら「CTRL+Aキー」を押してファイルを全て選択し、ゴミ箱アイコンをクリックしてリストをクリアします。

リストをクリアしたらまた同じフォルダをドラッグ&ドロップで入れて処理を開始します。

処理2度目

再び処理を行うと若干容量が減りました。もう一度同じ手順で処理を行います。

処理3度目

もう一度行うと値が同じになりました。こんな具合に何度か行うとさらに縮む事があります。

処理前後

処理前 処理後

画像によってはもう少し縮む事もあるのですが、今回の画像はさっぱりでした。

PNGの最適化(PngGauntlet)

PNG画像を最適化して容量を削減します。下記のサイトからダウンロードできます。

http://pnggauntlet.com/

PngGauntlet起動直後

PngGauntletを起動しました。「Tools」→「Option」で設定を開きます。

PngGauntlet設定

設定画面はアップデートのチェックを外し、ファイルの日付保持にチェックを入れておきました。

フォルダをドロップ

設定が済んだら最適化したいフォルダをドラッグ&ドロップして、右上の上書きにチェックを入れ、「Optimize!」ボタンを押して実行します。

処理完了

処理が終わり、270kBほど削減されています。続けて「Optimize!」ボタンを押して処理を開始します。

処理後

処理が終わったら「Original Size」でソートを行い、100%になっているファイルを選択して「Remove」、そのあとに「Optimize!」を実行します。100%だけになれば終了です。

処理前後

処理前 処理後

割合的に結構縮んでいます。

必要な物

.NET Framework

このソフトを動作させるには.NET Framework4.0が必要です。4.0は現行の4.5に含まれているのでそちらをWindows Updateなどで導入すれば使えます。