拡張子の種類と使い分けを理解しよう

はじめに

今回は画像や写真の拡張子についてお話します。拡張子にはいくつかの種類が存在していて、それぞれに強みや弱点があります。それらの紹介をしていきながら、拡張子の使い分け方ができるようにわかりやすく説明していきたいと思います。

拡張子とは画像のファイル形式のことを指します。例えば「jpg」や「PNG」というものがあります。画像の拡張子は画像の画質や容量に大きく関わります。

Webを制作する上で大きなキーとなるのが「SEO」というものです。

SEO=検索エンジン最適化

検索エンジンに対してWebページの評価を上げ、上位に表示されるように最適化することです。

Webページの表示ランキングをあげる上で大切なことの一つとしてはページの読み込み速度があげられます。こういったページの読みこみ速度をあげようとすると、Webにサイトにアップロードする画像の容量と画質を考えることが重要です。

最良な拡張子で画像を保存することが大切になっていきます。

---

拡張子の種類と特徴

JPG/JPEG

JPGは多くの色を取り扱うことができます。

JPGの強みは写真などの表現が複雑なものを高品質で保存できることです。高品質な上で、他の拡張子に比べてもファイルのサイズを抑えて保存できることもJPGの強みになります。

JPGの弱みはロゴやイラストなどを保存する上では、画像の容量がが大きくなってしまいます。JPGは写真などの表現が複雑なものを保存する際に活用されることが多い拡張子になっています。

また、JPG形式の画像を編集して保存を繰り返してしまうと、その度に画像が劣化してしまいます。

PNG(PNG-8,PNG-24)

PNGは画像の透過する部分を表現できる拡張子になっています。

しかし、PNGの中にも種類が分かれており、PNG-8,PNG-24,PNG-32などの種類が存在しています。

PNG-8,PNG-24,PNG-32

ビット数(階調)の違いで、PNG-8よりPNG-32の方が色の表現の幅が広いという違いがあります。

画像を書き出す際にPNG-8やPNG-24で書き出していても名称はPNGで統一されているためどのPNGの拡張子を使っているかはわかりません。

PNG-8やPNG-24はIPGの反対でロゴやイラストの保存をする際に使われています。

PNGの弱みは表現が複雑な画像や写真などを保存すると、画質が悪くなってしまったり、画像の容量が大きくなってしまいます。

PNG-8は最大256色、PNG-24は約1670万色以上の色を表現することができます。PNG-24については透明度を自由に表現することもできます。

ですがPNG-24は画像の容量がすごく多くなってしまう弱みもあります。

SVG

他の拡張子は違いSVGはベクターデータという形式で作られています。他の拡張子はラスターデータで作られているという違いがあります。

SVGの強みはファイルの大きくしても小さくしても画質が保たれファイルのサイズが小さいことです。アニメーションも取り扱うことができ、透明度に関してはPNG-24と同じ表現をすることができます。

WebサイトでSVG形式のファイルを取り扱う際にはCSS上でサイズや色を簡単に変更することができます。

SVGの弱みは写真のような細かい表現をすることができません。

拡張子の使い分けについて

ロゴやシンプルなイラストを保存する際はPNGもしくは、SVGで保存しましょう。ロゴについてはSVGデータを優先させましょう。

透過の部分がないものや写真などの色の表現が複雑なものはJPGで保存しましょう。

透明な部分があり、且つ複雑な色の表現があるものについてはPNG-24で保存しましょう。ただし、画像の容量がすごく大きくなるので、画像にシャドーが付いたものなどはシャドーの部分をCSSで表現し、画像はPNGで書き出すなどの工夫をしましょう。

---