WEBで使う画像形式の違い

仕事柄様々な画像形式を扱いますが、どこにどういった画像形式が最適なのかは怪しいものもありますし、根本的にどういう形になっているか分かっていないが画像形式もあります。



実際の画像を載せてその違いを見比べるとともに、今回は分かっているようで分かっていない画像形式の違いについて調べてみたいと思います。

詳しくは以下

WEB/画像形式の違い

---

■BMP（ビーエムピー）
画質 高画質60　350px×253px ファイルサイズ368KB


Windowsで標準的に使われている画像形式。無圧縮なために、ファイル容量が大きいのが難点で、今回はあえて載せていますが、WEBで使うには現実味が無いサイズです。Windowsの壁紙などに使われています。画像を格子状に多くの細密な点で表現されています。



■JPEG（ジェイペグ）
画質 高画質60　350px×253px ファイルサイズ32KB


フルカラー（1677万色）が扱える画像形式。圧縮によって画質とファイルサイズが変化する形式。圧縮して劣化したものは元には戻らない非可逆圧縮。デジカメ画像やWebでの写真画像に利用されています。見た目の画質の劣化が余り気にならなく、画像サイズをかなり押さえる事ができます。



■GIF（ジフ）
圧縮：知覚的　カラー：256　350px×253px ファイルサイズ68KB


扱える色数が最大256色の画像形式。使用する色数の少ないイラスト画像などを保存するのに向く。主にWeb用に使われています。可逆圧縮でデータの損失がありません。色数が限られているので写真やグラデーション表現の画像には向きません。



■PNG（ピング）
圧縮：知覚的　カラー：256　350px×253px ファイルサイズ60KB


可逆圧縮で画質劣化がなく、最大280兆色とWEBで扱える画像形式の中では段違いに色数がおおい。減色しないとファイルサイズが大きくなるので、減色して使用する方が使いやすい。旧ブラウザは未対応なのでそのあたりは注意。


今回は写真でサンプルを載せたのでやはりJPGがファイルサイズ、見た目とも一番良いと思います。画像によって（ベタ塗りやグラデーション表現が無いもの）はGIFやPNGのほうがキレイに見えます。

色々と違いはありますが、どの場所にどのくらいで見せた以下によって圧縮する形式は変わってきていると思います。当ブログの写真は容量を節約するためと、写真がメインのブログではなく画像自体がメインコンテンツではないのでJPEGの低画質〜標準画質で使用しています。次はDTPで使う画像について詳しく触れたいと思います。

via イメージ写真1.2

関連記事

---

世界のインターネット利用に関する15の事実
ブログ界におけるviaとは
「Good Design Good Life - 日本のデザイン」へ行ってきた。
21_21 DESIGN SIGHT第1回企画展「チョコレート」へ行ってきた。
ユニクロのTシャツ専門店「UT STORE HARAJUKU」に行ってきた。