元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

画像ファイルの種類

画像ファイルの種類と特徴について書きました。いくつか種類があるので、その特徴を知り、使い分けます。

gif

Graphics Interchange Format(グラフィックス・インターチェンジ・フォーマット)の略です。フルカラー(約1670万色=256×256×256=16777216色)のうちの256色までしか表現できません。色数が限られているため、容量は比較的小さくなります。透過できます。

主な用途は、ロゴやアイコンです。他にgifアニメーションにして、アニメーションさせることができます。

jpg(jpeg)

フルカラー(約1670万色)を表現できます。非可逆圧縮方式のため、保存を繰り返すと画像は劣化します。

主な用途は、写真です。

png

Portable Network Graphics(ポータブル・ネットワーク・グラフィックス)の略です。PNGは何種類かあります。その違いは、扱える色数の違いです。

png-8

フルカラーのうちの256色までしか表現できません。gifの代替として使えます。png-8は、透過できます。

主な用途は、ロゴやアイコンです。

png-24

フルカラーを表現できます。jpgの代替として使えます。

主な用途は、写真です。容量は大きくなります。

その他の保存形式

svg

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略です。伸縮してもぼやけず綺麗です。XMLベースのため、テキストエディタで編集できます。JavaScriptと連携させることができます。一部、svgに対応していないブラウザがあります。

主な用途は、ロゴやアイコンです。

参考サイト

画像の種類

ラスター画像

四角形の画素(ピクセル)の集まりで画像を表現します。画像を拡大すると四角形の集まりであることが分かると思います。拡大すると輪郭がぼやけます。写真向きです。

ベクター画像

ベジェ曲線で線を描きます。数式で線を描くため、拡大しても鮮明に表示できます。輪郭がぼやけず、綺麗です。ロゴ、アイコン向きです。イラストレーターで作った画像は、ベクター画像です。

» HTML入門のまとめはこちらです。