SEOのため、PNGのファイルサイズを極限まで縮小させる

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

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になりました。