なんとなく使っている画像ファイルの種類をはっきりさせよう！
おはようございます！
デザイナー1年生に、学校では教えてくれない、
でも、現場に出たら必要となる事をお伝えできたらと思います。
WEBデザインをしていたら、必ず出てくるのが、イメージ画像の書き出しの行程です。
JPEG、PNG、GIFなど、色々とありますが、きちんと理解して使っていますか？
今日は、一度頭の中をすっきり！
なんとなく使っている画像ファイルの種類をはっきりさせましょう！
本日は、ウェブで良く使われている画像ファイル形式について、ご紹介したいと思います。
ビットマップ画像
WEBサイト等で使われている画像のほとんどがビットマップ画像形式になります。
ビットマップ画像をピクセルという小さな点の集合として扱う画像です。
では、画像を区別する時、色数、圧縮方法、透明処理、アニメーションの可否の項目で見ていきましょう。
JPEGファイル
色数・・・数百万色表現が可能
圧縮方法・・・非可逆圧縮、高い圧縮率
透明処理・・・透過機能なし
アニメーション・・・アニメーション機能無し
【特徴】キレイに見せたいフルカラー対応の写真画像などに使われます。
※非可逆圧縮は可逆圧縮の反対で、圧縮したデータと元のデータが等しく同じ物になることはありません。
GIFファイル
色数・・・256色だけしか色をもてない
圧縮方法・・・可逆圧縮
透明処理・・・透過機能あり
(透過かそうでないかの2種類だけ選べるというもので、たとえば50％だけ透明に透過しているなどの処理はできないため、輪郭の部分の処理などは自ずと汚くなります。)
アニメーション・・・アニメーション機能有り
※可逆圧縮とは圧縮前のデータと、圧縮をしたデータが、完全に等しくなることができるデータ圧縮方法です。
【特徴】ロゴマークやボタン、キャラクター等の色数が少ない画像によく使われます。
PNGファイル
PNGファイルには、PNG8とPNG24の２種類があります。
違いは、色数や圧縮結果、ファイルサイズ等に違いがあります。
【PNG8】
色数・・・256色だけしか色をもっていない
圧縮方法・・・可逆圧縮、高い圧縮率
透明処理・・・透過機能あり
アニメーション・・・アニメーション機能なし
【PNG24】
色数・・・数百万色表現が可能
圧縮方法・・・可逆圧縮、JPEGよりもサイズが増える
透明処理・・・透過機能あり。
アニメーション・・・アニメーション機能なし
ファイルのサイズ・・・jpegよりもファイルサイズは大きくなる傾向にあります
※JPEGとGIFのいいとこ取りといったのがPNGファイルです。
ファイルサイズが軽く、フルカラー対応で透過機能もあります。
ただしIE6およびそれよりも前のIEにはPNG8、PNG24の透過機能は基本的には利用できません。
ベクター画像
SVGファイルは、点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現すため、画像が劣化せずに表示できます。
固定の画像というよりは、その場で生成される図などの可変表現に向いています。
おわりに
画像を書き出す際、色数や透過させる必要があるか等、状況に応じてファイル形式を判断しましょう。印刷に適したファイル形式はまた別ですので、またご紹介しますね。
