スマート プレゼンター®でセミナー撮影

Web用画像の使いわけ

今回は、Web用画像の使わけの話をします。

Creative SuiteでWebページを制作していると、Photoshopファイルのままダイレクトに、
Dreamweaverで作成中のWebページに画像を追加できます。

もちろん、PSDファイルのまま貼りつくのではなく、
DreamweaverがJPEGなどのWebに適した形式へ変換して、貼り付けを行います。

Webで利用できる画像形式は、JPEG、GIF、PNGの3種類です。
それらの特徴を説明すると、以下のようなことになります。

WebデザイナーのためのHTMLアニメーション作成入門

JPEG形式:
フルカラーをサポートしている。グラデーションの表現に適しているので写真などのデータに使用することが多い。圧縮率を設定できるため、ファイル容量を極端に低くすることも可能だが、圧縮率を高くすると画質は低くなる。透過は使用できない。

GIF形式:
256色のカラーをサポートしている。色数が少ないため写真などのデータには適さず、ベタ塗り要素の多い、文字やイラストなどの表現に適している。色数の制限と圧縮によってファイル容量を低くすることができる。透過やアニメーションをサポート。

PNG形式:
フルカラーをサポート。透明度を指定できるアルファチャンネルをサポートしている。

と言うことになります。
これを見ると、PNGは、JPEGのようにフルカラーをサポートし、かつ、GIFのようにアルファチャンネルをサポートしていることが分かります。
ですから、一見、Webの画像はすべてPNGで保存を行えばよいように思えます。

ですが、現状そうはなっていません。
なぜでしょうか?

ファイルサイズが大きくなってしまうからです。
こちらは、PhotoshopのWeb用に保存ダイアログボックスです。

まず、オリジナル画像ですが、38.1MBあります。
注目していただきたいのは、透過されている部分があることと、画像のエッジに光彩のレイヤースタイルが適用されていることです。

これを、JPEGにします。画質は80%です。すると、一気に1.1MBまで下がります。
ただし、このように背景の透過は失われています。

今度は、GIFです。64色にしてみました。こちらも、1MBほどまで下がっています。
ただし、写真の自然な階調表現が失われてしまい、ベタになっているところが見られます。
背景の透過はサポートされていることが分かりますが、レイヤースタイルの光彩の自然なグラデーションは全く再現されていません。

そして、PNGです。写真の自然な階調表現も維持されており、背景の透過も、維持されており、さらにレイヤースタイルの光彩の自然なグラデーションも再現されています。
ただし、ファイルサイズを見てみると、5.25MBとダントツで大きくなっています。
もっとも、元ファイルが38.1MBですから、これでもかなり下がったと言えなくもないですが。

結論から言うと、デジカメ写真などの通常の画像は、ファイルサイズの小さいJPEGを使います。
イラストなどベタ塗りの要素が多い画像は、GIFを使います。
そして、アルファ(透過処理)が必要な写真は、PNGを使います。

そのような使い分けがよろしいかと思います。

記事がお役に立てましたら、下部のはてなブックマークなどの、ポチりをお願いします。

WebデザイナーのためのHTMLアニメーション作成入門
——————————————–

■略歴

石田 知志(いしだ さとし)

(株)A-flat代表取締役

http://a-flat.biz

03-5779-7694

IT系を中心とした各種の教材制作、テクニカルライティング、映像制作、セミナー撮影、技術資料の翻訳などを行っています。

主要なサービスとしては、画面録画付きセミナー撮影サービス「スマート☆プレゼンター」を提供しています。

http://a-flat.biz/archives/service-category/video

スクリーンも同時に精細に収録し、すぐにコンテンツ化します。セミナーDVDの制作、eラーニング、Webセミナー、Ustream中継などでご利用いただけます。