ビットマップ画像の種類と使い分け
最終更新日: Update!!
パソコン上やwebで取り扱う画像データですが、いくつか種類があるのはご存知の方も多いと思います。同じ画像でもデータの種類によっていろんな特徴があり、画像の内容や用途など適材適所に使い分けることが大切です。
そこで今回のテーマですが画像フォーマットの種類についてまとめていきたいと思います。実は画像フォーマットにはたくさんの種類がありますが、web用として登場するものに焦点をあてて紹介していきます。
【Joint Photographic Experts Group】
非可逆圧縮形式の画像フォーマットデータで、一般的にウェブサイトなどでもよく使用されています。デジタルカメラの写真なども、この画像フォーマットであることが多いようです。表現できる色が多く色の階調のなめらかであるため、写真やCGイメージなどに適しています。またファイルサイズも相対的に小さくなるため、大きなサイズの画像はJPEG形式が適しています。
【Graphics Interchange Format】
可逆圧縮形式の画像フォーマットデータで、上記のJPEGと同じくウェブサイトなどでよく使用されています。特徴としては、透過(完全な透明のみ)が表現できる点と、複数の画像を統合させてアニメーションのような動きのある画像(アニメーションGIF)を作ることができます。表現できる色は256色と限られていますが、データサイズが小さく使用する色が限定的なアイコンやボタンなどサイト内のパーツなどに適しています。
【Portable Network Graphics】
可逆圧縮形式の画像フォーマットデータで、近年になり普及が進んできました。高度な透過(半透明〜完全な透明)に対応し、色数も豊富で幅広い表現ができる点が特徴です。適しているのはやはり透過を生かしたデザインの画像です。しかし、データサイズが比較的大きいので多用すると重くなり、サイトの表示速度が遅くなるので注意が必要です。
【Microsoft Windows Bitmap Image】
圧縮がされていないWindows標準の画像フォーマットデータです。他の画像フォーマットと異なり圧縮がされていないデータ形式なので画質の劣化が無いというのが特徴です。しかし圧縮されていないためにデータ容量が非常に大きく、ウェブサイト内に使用するのは適していません。編集用の画像に使用するのが適した使い方だと言えます。
【Tagged Image File Format】
圧縮がされていない画像フォーマットデータです。こちらも他の画像フォーマットと異なり圧縮がされていないデータ形式なので画質の劣化が無いというのが特徴です。そして同じく圧縮されていないためにデータ容量が非常に大きく、さらにウェブサイト内で使用することができないフォーマットです。しかし画質の劣化がなく、画質も最も高いため編集用の画像としては最も適しています。
このように画像ファイルはそれぞれ異なる特性を持っています。必要とする用途や目的によって使い分けることでスマートで効率的なサイト制作を目指しましょう。
ビットマップ画像とは
まずはじめに、主にwebで取り扱う画像は全てビットマップ画像と呼ばれる種類にあたります。ビットマップ画像は一つのピクセルが無数に集まって一つのイメージが作られています。モザイク状のタイル画などをイメージしてもらうと分かりやすいかもしれません。このビットマップ画像にはいくつかのフォーマットが存在します。
JPEG(ジェイペグ)

GIF(ジフ、ギフ)

PNG(ピング)

BMP(ビーエムピー)

TIFF(ティフ)

sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories