はじめに
本記事にアクセスいただき、ありがとうございます！
さて今回はWEBで取り扱う画像について
皆様、WebP（ウェッピー）って聞いたことがありますか？
なんとなく、サイトの表示スピードを上げるために注目されている次世代画像フォーマットと知っている方もいるかもしれません。
WEBサイトで使う画像の「拡張子」にはいくつか種類があり、
ネット上に画像をアップする際にはどの拡張子を選ぶのが正解なのか分からないことも多いですよね。
そこで今回は、そんな画像拡張子について、それぞれの特徴と用途についてご紹介できればと思っております！
主な画像拡張子は6種類
- GIF（.gif／ジフ）
- JPG（.jpg／ジェイペグ）
- PNG（.png／ピング）
- SVG（.svg／エスブイジー）
- WebP（.webp／ウェッピー）
の5つです。
ほとんどが「ビットマップ画像」
「SVG」を除く4つは「ビットマップ画像」と言われるもので、
色の付いた点を集めて1枚の画像としています。
「SVG」は「ベクター画像」と言われるもので、
点や線といった画像を構成する要素を数式化したものです。
GIF（ジフ）とは？
主にアニメーションに使用されるGIF
音声は出ませんし、再生時間も短いので動画としては不十分ですが、
動かない画像よりも表現の幅が広がります。
ちょっとした説明動画やアニメーションに最適
また使える色数が256色と少ないため、動画でありながら容量を小さくできて、
圧縮しても画質が劣化しません。
ただ写真のような色数が多い画像の拡張子には向いておらず、
イラストやアイコンを表示させるのに使われることが多いです。
JPG（ジェイペグ）とは？
ネット上で一番使われている画像拡張子JPG
実際にネット上に画像をアップするのにJPGが一番多く使われています。
JPGの一番の特徴は使える色の多さで、何と約1670万色も使うことができます。
細かい色の違いを表現することができるので、
写真をアップするのにはJPGが向いているのです。
色の細かい再現が得意
ただ色数が多いため容量が大きく、対象物の輪郭が曖昧になりがちなので、
文字やイラストなどを表示させるのには向いていません。
また背景透過ができませんから、人物など対象物のみを切り出すことができず、
画像の加工がしくにいです。
PNG（ピング）とは？
Web上に画像をアップするために開発されたPNG
JPGと同じく約1670万色のフルカラーで画像を表現でき、
対象物のみを切り出す背面透過もできるようになっています。
背景透過もでき、細かい表現が得意
また対象物の輪郭がシャープなので、写真はもちろん文字やイラストが含まれた画像を
アップするのに使われることも多いです。
ただフルカラーのため容量が大きく、
色数の多い写真だとJPGよりも容量が大きくなってしまうことがあります。
SVG（エスブイジー）とは？
画質劣化の概念が無いSVG
SVGには画像劣化の概念が無いので、拡大や縮小をしても輪郭がボヤけたり、
一部が潰れたりすることが無く、画像の再現性が非常に高いです。
またレスポンシブ対応なので、
表示する画面の大きさに応じて画像の大きさが変わります。
ロゴマークなど画質を劣化させたくないものに使われる
通常は画面ごとに適した大きさの画像を複数枚用意しないといけませんが、
SVG形式で保存した画像なら1枚でOKです。
さらに、多少知識は必要なものの、
データの数値を触ることで画像の色やサイズを変更することができます。
普通は色やサイズを変更するには画像編集ソフトが必要ですが、
SVG形式で保存しておくことでソフトなしで画像編集が可能となります。
ただ、色数の少ない画像なら容量が小さくなりますが、写真のように
色数の多い画像だと他の拡張子で保存するよりも容量が大きくなってしまいます。
またSVG形式からJPG形式やPNG形式に変換すると、再度SVG形式に戻せなくなるので注意が必要です。
WebP（ウェッピー）とは？
次世代拡張子の1つWebP
WebP最大の特徴は「軽量・高速化」で、画像データの容量を大幅に小さくすることが
できて、ネット上での表示スピードが速くなります。
表示スピードを上げたいときの対策に
画質を劣化させずに容量を圧縮することができて、
JPGやPNGに比べて30%ほど容量を小さくすることができます。
同じサイズでも容量が小さいと表示スピードが上がりますから、
WebP形式の画像が使われているとサイト閲覧がスムーズになるわけです。
表示スピードはSEO対策でも重要ですから、ホームページ制作では
WebP形式の画像が使うことが多くなってきています。
GIF・JPG・PNGの良いとこばかり
さらに動画として表示させることもできますし、
対象物のみ切り出す背面透過も可能でGIF・JPG・PNGの良いとこどりとなっています。
ただ、一部のブラウザはWebP形式に対応していないため、
ブラウザによっては画像が表示されないといった問題があります。
とは言え、主要なブラウザはWebP形式に対応していますし、
いずれはほとんどのブラウザがWebP形式対応になる可能性が高いです。
まとめ
いかがでしたでしょうか。
それぞれの拡張子には特徴があり、表示させるのに適している画像の種類があります。
どういった画像をアップするかで「ベターな拡張子」を選ぶことになります。
ここで紹介した特徴を参考にして、ネット上に画像をアップする際には
画像の種類に応じて拡張子を上手く使い分けたいですね。
最適な画像形式でのWEBづくりや運用もお任せください！
全部の拡張子の良いとこどりだと言われれば、WebPを使ってみたくなりますよね。
でも、そもそもどうやって変換するの？どうやって表示させるの？など分からないことが多いと、
なかなか手が出せないし、複数の画像を使い分けて、最適なWEBページを作るのは難しいですよね。
エーウイングではサイト作りのノウハウもたくさんありますので、表示スピード意識したホームページ作りなど
新たにウェブサイト作る際や運用についてお悩み事などありましたら、是非お気軽にご相談ください。
WEB知識のあるスタッフがお客様のWEBサイトの制作や運用のお手伝いしております！
関連記事
WebPを使った表示スピード改善！
新着記事
A-ROOM1年分の運用結果
ランディングページ解体白書
ここまでお読みいただき、誠にありがとうございました！
今後も多摩地域・立川にあるホームページ制作会社として地域の皆様、 ホームページに関わる皆様に向けてお役に立てる有益な情報発信ができるよう努めて参ります。