画像を最適化してページ表示速度を高速化する方法を知りたいなら

Webページの表示を高速化するのはWebプログラマにとって直近の課題だ。これまでいくつもWebページを高速化するためのツールや技術が開発され紹介されてきた。もっとも有益なツールのひとつはYSlowだ。YSlow高速化技術の根底になっている調査結果(高速化技術6テクニック、高速化規則34ヶ条、高速化規則20ヶ条)も見逃せない。YSlowにしたがってページを計測し種々の手法を適用するだけでそれ相当の効果があげられる。

YSlowよりも突っ込んだ詳細計測と開発においてはNetflix流計測手法や、同手法を実装したJiffy FirebugエクステンションBill Scott氏版がある。NetflixのテクニックはYSlow適用後さらに高速化を狙う場合に活用できるものだ。YSlowの開発者が発表した技術はほかにもページ読込時間ツールHammerheadがあったり、JavaScript読み込みブロック回避でページ表示を高速化する手法がある。名前の規則を工夫することでキャッシュを効果的に活用する方法もある。

しかし画像についてはどうだろうか。HTMLやJavaScript、CSSを最適化して画像を最適化しないと意味がないかもしれない。コンテンツが増えればそれだけページは重くなる。画像の品質を下げることなく、画像に対しても最適化を実施できるだろうか。こうした疑問に答えるためStoyan Stefanov氏がYahoo! User Interface BlogでImage Optimization Part 1: The Importance of Imagesという興味深い連載を開始した。以後数回で画像を最適化する方法を紹介するという。氏はYSlowの開発者でもあり、JavaScriptブロック回避テクニック記事の執筆者でもある。書籍"Object-Oriented JavaScript"の著者でもある。

Stoyan Stefanov氏はAlexa Top 500 Sitesにランクインしているトップ10のサイトをピックアップし、ページにおける画像容量の割合を調査。平均で46.6%が画像で占められていることを示し、画像を高速に表示することがページのユーザエクスペリエンス向上に欠かせないことを説明している。

Part 1で示されているのは画像への取り組みが欠かせないことと、今後の連載で適切な画像フォーマットを選択する方法、クオリティを低下させることなく画像サイズを縮小させる方法、最適化された画像を生成する方法、AlphaImageLoader活用による効果、CSS sprites、画像の高速な配信などを説明していくと示すに止まっている。Photoshopのような専門のアプリケーションがなくても適用できる内容を取り上げていくとしており、WebプログラマやWebデザイナは氏の連載に注目しておきたい。