Stefanov氏、画像サイズを縮小化する4つの手順を紹介 - 画質劣化一切なし

YSlow開発者であり高速ローディングWebサイト構築テクニック紹介者であるStoyan Stefanov氏による画像最適化解説シリーズの第3弾がImage Optimization, Part 3: Four Steps to File Size Reductionとして公開された。そのまま画像圧縮に使えるテクニックが紹介されている。

画像サイズはWebページの読み込み速度において大きな要因であるだけに、同記事はWebデベロッパとWebデザイナによって有益なものといえる。

第3弾では画質を劣化させることなく画像ファイルサイズを縮小するための4つの方法が紹介されている。簡単にまとめると次のとおり。

［手順1: PNG圧縮 - Pngcrush］

PNGにはチャンクと呼ばれるデータが含まれているが、すべてのチャンクが画像描画に必要とされるわけではなく、透過情報以外のチャンクは削除できる(-rem alla)。可能であればパレットのカラー数を削減したり(-reduce)、そのほか画質を劣化させないでPNGデータを最適化する方法(-brute)がある。

pngcrush -rem alla -brute -reduce src.png dest.png
PngcrushでPNG画像を圧縮 - Image Optimization, Part 3: Four Steps to File Size Reductionより抜粋

［手順2: JPEG圧縮 - jpegtran］

JPEGには、アプリケーションが使う情報やコメント、デジカメが添付するEXIF情報などがあり、これらは削除しても画像に影響はない(-copy none)。またHuffmanテーブルを最適化して圧縮率を改善することもできる(-optimize)。

jpegtran -copy none -optimize src.jpg dest.jpg
jpegtranでJPEG画像を圧縮 - Image Optimization, Part 3: Four Steps to File Size Reductionより抜粋

［手順3: GIF圧縮 - ImageMagick］

第2弾で説明があったようにGIFはPNGに変換することでブラウザの対応状況はそのままにファイルサイズを縮小化できる。ImageMagickのconvertコマンドでPNGに変換してから手順1の方法でさらにサイズの縮小をおこなう。

convert image.gif image.png
ImageMagick convertでGIFをPNGへ変換 - Image Optimization, Part 3: Four Steps to File Size Reductionより抜粋

［手順4: GIFアニメーション圧縮 - Gifsicle］

GIFアニメーションには画像が変化しないにもかかわらず同じデータがフレームに含まれている場合がある。この重複部分を削除することでサイズの縮小化が可能。

gifsicle -O2 src.gif > dest.gif
GIFsicleでGIFアニメーションを圧縮 - Image Optimization, Part 3: Four Steps to File Size Reductionより抜粋

第1弾で調査対象として取り上げられたAlexaのトップ10サイトに手順1から3までを適用した場合、平均で16.05%(手順1)、11.85%(手順2)、20.42%(手順3)の圧縮が実現されたとしている。注意しておきたいのは、これら最適化を実施するのは自分が作成した画像に限るということだ。画像によってはメタデータに著作権データが含まれているため、そういったデータを削除してはいけないからだ。

これらツールはUnix互換OSでもWindowsでも実行できるうえスクリプトで簡単に自動化できる。さらにStoyan Stefanov氏はこれらの処理を自動的におこなうSmush itを提供している。画像圧縮に興味がある場合には試してみるといいだろう。Smush itはブックマークレットとFirefoxエクステンションが用意されており、表示されているページの画像がどの程度圧縮可能か調査できるうえに、圧縮した画像もダウンロードできる。