2019.08.23

画像の形式について

デザイン ホームページ制作

こんにちは、エクスフィールドの福原です。

みなさんは画像のデータを見ていて画像の形式を気にしたことがありますか?
形式というのは名前の後ろにある「.jpg」や「.英数字」のことで、
これは「拡張子」といってパソコンが何のファイルなのかを認識するためにあるものです。

今回は、主に使用されている画像の形式についてまとめていきたいと思います。

■jpg(jpeg)
肉眼では認識できない情報を圧縮しているため、画像の容量を小さくできます。
色は1670万色まで扱うことができ、写真やWEBサイトなどに適した拡張子です。
しかし、jpgは非可逆圧縮という画像の処理方法しているため、画像の劣化がしやすいため注意が必要です。

画像の劣化とは…

左が元画像で、何度か上書き保存をした画像です。右側の画像をよーく見ると少しモヤモヤしていると思います。
さらに拡大して見ると…

かなりモヤモヤが目立ってしまいます。
画像を見る・コピーする分には劣化が起こらないのでご安心を。

■gif
画像の容量が小さい拡張子で、透過やアニメーションをつけることがきます。また、可逆圧縮なので、上書き保存による劣化もありません。

ローディング中のアニメーションや色数の少ない画像に向いています。
しかし、256色しか使用できないため写真やグラデーションのような表現がうまく再現できません。

■png
gifと同じく透過に対応していて可逆圧縮なので、上書き保存による劣化がありません。pngの中にも種類があり、それぞれ使用できる色数が違います。
・png-8 →256色
・png-24 →1678万色
・png-32 →280兆色

しかし、jpgとgifに比べて画像の容量が大きくなってしまう可能性があるので、容量を少なくしたい場合は、注意が必要です。


ざっとまとめてみると、
・そのまま使用する画像はjpg
・色数の少ない画像、簡単なアニメーションを使用したい時はgif
・加工が必要な色数の多い画像はpng

より良いホームページを制作するために、目的にあった画像を選びたいですね。

Share on Facebook
Pocket


1 / 11