サイトのパフォーマンスアップをしたいけど、
作業をする時間がつくれない、作業するにしても影響範囲が大きくて
なかなか実行できない…ということは非常に多いと思います。
そこで、今回は簡単！すぐできるパフォーマンスアップ！
Webサイトに最適な画像形式の書き出し方法をご紹介します。
以下で書き出した画像はFireworks CS5 を使用して書き出しています。
EC studio では基本的に画像はPNG8で切り出しています。
なぜかというと、ほとんどのPNG8画像のファイルサイズがGIFより軽いことと、
可逆圧縮で透過表示もできるからです。
しかし、状況によってはPNG8以外の形式も使用します。
主に写真はJPEG、半透明の画像はPNG8、PNG32、
アニメーションはGIFに書き出します。
PNGとGIFとJPEGがどの画像で使うのが向いているか比べていきましょう。
256色以内の画像の場合
256色以内の画像はほとんどがPNG8の書き出しが適切ですが、
サイズが小さく色数が少ない画像はGIFのほうが軽い場合があります。
この場合はプレビューで選んで軽いほうを書き出してください。
また、透過画像を使う場合はPNG8（インデックス透明カラー）で
書き出すと透過GIFより軽くなることが多いです。
 |
 |
|
| PNG8（3.36KB） | GIF（3.92KB） | |
 |
 |
|
| PNG8（3.57KB） （インデックス透明カラー） |
GIF（3.94KB） （インデックス透明カラー） |
写真やグラデーションなど色数が多い画像の場合
色数が多い画像の場合はJPEGをおすすめします。
PNG24もきれいに表示されますが、ほとんどがJPEGのほうがデータが軽くなります。
 |
 |
|
| JPEG（画質80）（16.4KB） | PNG24（86.1KB） |
写真画像ではJPEGとPNG24で比較してみましょう。
どちらの画像も画質をきれいに書き出しすることができているのですが、
サイズを見るとJPEGのほうが軽量化されています。
半透明の画像の場合
半透明を表示させる場合は
256色以下の色数が少ない画像の場合はPNG8（アルファチャンネル）、
色数が多い場合はPNG32で表示させましょう。
ただし、IE6では半透明情報を表現してくれません。
AlphaImageLoaderやjavascriptで対応することで表示することができます。
AlphaImageLoaderの対応について
Internet Explorer で PNG ファイルの背景が透明にならない
http://support.microsoft.com/kb/294714/ja
IEと透過PNG
http://amenti.usamimi.info/ie6png.html
javascriptの対応について
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/
アニメーション画像
現状アニメーションPNGはすべてのブラウザに対応していないので、
アニメーションを使いたい場合はアニメーションGIFを使いましょう。
参照サイト
最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に
http://journal.mycom.co.jp/news/2008/11/06/046/
画像を最適な形式で書き出すことで、軽量化することでき、
比較的早くパフォーマンスアップをおこなうことができます。
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
この記事へのコメント (0)
コメントはまだありません。
ページの先頭に戻る
コメントを投稿