サイトで画像使用時にJPEG・PNG・GIFの使い分け方選択方法とは?
ホームページを作成し、画像を使用していくと、『JPEG』で使用するか、
『PNG』はたまた『GIF』『TIFF』かと選択を迫られる時があります。
その時にどのように選択していけば良いか迷いますよね。
その時の考え方を今回はご紹介していきます。
それぞれのファイルの特長は
JPEG(JPG)
メリット
24ビット(1,670万色)までの色を利用可能で写真に向いています。
JPEGは画像を圧縮することでファイルサイズを抑えることが出来ます。
例えばPNGやGIFで140kの写真がJPGですと35k位になります。
デメリット
小さいファイルサイズを誇るが、不可逆圧縮と言い
保存するたびに画像が劣化します。
周りの色に影響される性質があり、文字やイラストの
輪郭がにじみやすいです。
上のイラストも拡大するとこのように輪郭が滲んでいるのが分かりますね。
PNG
メリット
24ビット(1,670万色)まで色を利用可能です。
イラストの輪郭がくっきりしています。
可逆圧縮で何度保存しても劣化は無い。
W3Cが使用を推奨しており、信頼性が高いです。
デメリット
ファイルサイズはJPEGに比べると特に写真等使用する色数が
多い場合は大きくなりがちです。
(PNGは8bitでの使用をお勧めします。)
写真等フルカラーで使用すると、JPEGよりもファイル容量が多くなる
GIF
メリット
イラストでは輪郭がくっきりしておりきれいに使用できる。
使用できる色数は少ないが、ファイルサイズが少ない。
イラストの輪郭がくっきりしている。
画像を重ねることで、パラパラマンガのように
動きのある絵を作ることができる。
このサイトでも動くボタンの作り方を紹介しています。
(物販サイトで23.4%クリック率を上げたボタンとは?色は?)
デメリット
形式が古く、PNGの特性と似ており現在はPNGに取って代わられる場合が多い。
8ビット(256色)までしか色を使用することができなく写真は画質が悪い。
使用できる色数が少ないので、写真には不向き。
TIFF
メリット
デジタルデータをそのまま所持するため、最高品質の画質。
可逆圧縮のため何度保存をしても劣化しない。
デメリット
データ量が非常に多く、Webで使用するには不向き。
プロ仕様のファイル形式と言え、容量が大きすぎ、
一般的には使用することはあまりありません。
結論:実際の使い分けは
結論としては、使う画像が写真なのか
イラストなのかによって大きく変わります。
写真の場合
写真に関しては容量を少なくできるJPEGを
主に使用する事をお勧めします。
但し、何度も編集を行う場合には画質が劣化してしまうので、
PNGで編集を行い、最後にJPEGで出力を行なう方法が
劣化が少なくベストです。
また文字を写真の上に付けてにじみが気になる場合は、
ファイルサイズが大きくなりますが
PNGを利用されることでにじみが軽減されます。
イラストの場合
イラストに関してはJPEG(JPG)は輪郭がにじむ場合がありますし、
使用する色数も8ビット(256色)までの場合がほとんどですので
PNGを使用されてもファイルサイズが大きくならず、
画像もきれいなのでPNGの使用をお勧めします。
GIFは形式が古いですし、イラストの場合はPNGと
容量もそれ程変わらないので、
PNGの使用がおすすめですが、動きのあるアニメを使用したい場合は
GIFしかアニメを使用できませんのでGIFを使用します。
このように、素材や用途が
写真(JPEG)
イラスト(PNG)
アニメーション(GIF)
なのかによって使う形式を選んでいくことをお勧めします。
画像を使用する時には是非参考にしてみてくださいね。