Top-ads

Powered by Blogger.

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

By | 火曜日, 4月 27, 2010 Leave a Comment
前回の記事「Webページの読み込み速度を高める」のとおり、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になりました。
次の投稿 前の投稿 ホーム