エクストリームオフライン

前回の記事のとおり、GoogleがWebページの読み込み速度をサイトの評価項目として採用したことで、画像のファイルサイズの縮小は有効なSEOとなりました。

前回の記事では、画質を落とすことなく GIF や JPEG よりもファイルサイズを小さくできる PNG に画像形式を替えることを紹介しましたが、単に画像編集ソフトでPNG形式で保存するだけでは、あまりファイルサイズを縮小させることができません。

今回は、PNG形式の画像のファイルサイズを極限まで縮小させる方法を紹介します。

Fireworksより、Photoshopの方がファイルサイズを縮小できる

写真以外の画像を作成する際に Fireworks を使っている方も多いと思いますが、PNGに限れば（他は検証したことがありません）、Photoshopの方が画質を落とすことなくファイルサイズを縮小させて書き出すことができます。

例えば、エクストリームオンラインのロゴ画像は、以前は Fireworks でPNG-8（すべての色を割り付け）の設定（グラデーションを劣化させずに書き出すための設定）で書き出しており、この時のファイルサイズは 3.09KB でした。

このFireworksで作成した元ファイルをPhotoshopで開いて、PNG-8（特定, カラー:64）の設定で書き出したところ、ファイルサイズが 1.49KB と画質を劣化させることなくファイルサイズを半分以下にすることができました。

Firefoxアドオンの Page Speed でさらに縮小

Googleが配布するFirefoxアドオンの Page Speed を使うと、さらにこの画像のファイルサイズを縮小させることができます。

Page Speed は、これ以上のものはないと言えるほどのサイト分析ツールで、前回紹介した書籍と同様に、フロントエンドエンジニアの方はもちろん、ウェブデザイナーの方にも、是非使って頂きたいツールです。

Page Speedを使うには、ウェブブラウザのFirefoxと、FirefoxアドオンのFirebugが必要です。Page SpeedはFirebug上で動作します。Firefox、Firebugのインストール方法や基本的な使い方は、Googleで検索して調べてください。

様々なことができるのですが、今回は画像のファイルサイズ縮小機能に限定して紹介します。

Page Speedをインストールすると、Firebug上に「Page Speed」というメニューが追加されます。Page Speedを選択すると、メニュー下のウインドウに「Analyze Performance」というボタンが表示されるのでこれを押します。

サイト分析の結果がたくさん表示されますが、この中の「Optimize images」を選択してください。そうすると、この画像は縮小できますよということで以下のメッセージが表示されます。

Optimizing 対象画像のアドレス could save ファイルサイズ (xx% reduction). See optimized version or Save as.

このメッセージの「Save as」の部分がリンクになっているのでクリックすると、対象画像のファイルサイズを縮小したバージョンをダウンロードすることができます。

ちなみに前述したロゴ画像は、1.49KBから1.44KBになりました。

先日、GoogleがWebページの読み込み速度をサイトの評価項目として採用したことを発表しました。

単に速ければ速いほど評価が高いというわけではなく、現在で1ページの平均読み込み速度が1.4秒以内に収まるかどうかが評価基準になるようです。

ページの読み込み速度については、Google ウェブマスターツールやGoogleが配布するFirefoxアドオン「Page Speed」で確認できます。

この発表を受けて、Webページの読み込み速度を高めるために自社サイト「エクストリームオンライン」を以下のとおり更新しました。

読み込み頻度の高い画像を PNG に変更

ロゴや見出しの背景など、読み込み頻度の高い画像を、画質を落とすことなく GIF や JPEG よりもファイルサイズを小さくできる PNG に置き換えました。

これまでは互換性の問題から PNG の利用を控えていましたが、PNG が正しく表示できないブラウザを使っている人はほぼ皆無になったこと（携帯電話のブラウザはいまだに多いので注意）と、ページ読み込み速度がサイトの評価項目として採用されたことで、画像のファイルサイズの縮小を優先することにしました。

Adobe Spry のスクリプトを packed に変更

Adobe Spry のスクリプトを組み替えることも、コードを読むこともないので、可読性を無視してファイルサイズを小さくした packed に置き換えました。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

今回は上記二点のみの対応となりましたが、これまでにも様々な高速化の取り組みを行ってきました。

その時に参考にしたのが、ウェブサイトの高速化についてフロントエンドの処理を中心にまとめた「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」という書籍です。

インターネット上でも様々な情報を探せますが、どうでもいいような小技の羅列が多いので、本質的なウェブサイトの高速化を学び、実践するまでにはかなりの時間がかかるため、この書籍で勉強することをお勧めします。

フロントエンドエンジニアの方はもちろん、ウェブデザイナーの方にも、是非読んでほしい一冊です。

また、続編として、「続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス」が出版されています。