WEB制作をしていると画像を使用することが頻繁にあると思います。
画像にはファイル名の最後に「.jpg」、「.png」、「.gif」といった拡張子がついていますが、特に意識せずに使ってしまうことも多いのではないでしょうか。
それぞれの拡張子にメリット・デメリットがあったり、ファイルサイズが大きく変わってきたりするので、SEOの観点でも画像ファイルの違いをしっかりと認識できることが重要になります。
今回はJPEG、PNG、GIFそれぞれの違いをお伝えしていきます。
画像ファイルの種類
主にWEB制作で使われる画像の種類は大きく分けて3つあります。
先にも述べましたがJPEG、PNG、GIFという3つが代表的です。
JPEG
JPEGはJoint Photographic Experts Groupの略で、静止画像のデジタルデータを圧縮する方式の1つです。
圧縮率が高くフルカラー（約1,677万色）の画像を扱えるため、サイトに高画質の写真を掲載する場合などはJPEGのデータを使用します。
拡張子は数種類ありますが、基本的には「.jpg」「.jpeg」を使います。
デメリットとして、圧縮をする際に一部のデータを切り捨ててしまうため、画像が劣化しやすいです。
また、不可逆圧縮という圧縮の仕方をするため、一度圧縮すると元に戻せないところもデメリットといえます。
PNG
PNGはPortable Network Graphicsの略で、1996年にインターネット上で使用するために作られた画像形式で、拡張子は「.png」です。
JPEGと同様、フルカラーを表現できます。また、背景を透過することができます。
JPEGと違い圧縮方法は「可逆式」のため、何度保存しなおしても画質が劣化しません。
メリットだらけのように感じるPNGですが、デメリットとしてデータ容量が大きくなってしまう点が挙げられます。
そのため、背景を透過させて使用するワンポイントのロゴなどに多く用いられます。
GIF
GIFはGraphics Interchange Formatの略で、拡張子は「.gif」です。
JPEGやPNGと違って最大256色のみで表現するので、色の少ないイラストなどの保存に向いています。
PNGと同様、可逆式の圧縮方式のため、何度保存しても画像が劣化することがありません。
背景を透過できるのと、アニメーションをつけることができるのがメリットです。
デメリットは、表現できる色数が少ないため写真をGIFで保存する場合は見た目が悪くなってしまうところです。
まとめ
今回はWEB制作で使用する画像の種類を紹介しました。
最後に簡単にまとめると、データが軽く、写真やグラデーションなどの色数の多い画像に適しているのがJPEG。
イラストやロゴなど色数の少ない画像に適し、背景などを透過させたい場合に使うのがPNG。
使える色数が256色と少なく、単色や簡単なイラストに適し、アニメーション画像も作成できるのがGIFです。
是非、意識して使用してみてください。