Webサイトが文字化けしてしまった時にも知っておけば安心！utf-8などの文字コードについてという昨日のブログ記事で予告させていただいた通り、本日は画像に関するブログ記事を書いてみたいと思います！
普段何気なく使用している画像、Webサイトではどんな画像形式のものが使用されていて、それぞれがどんな特徴を持っていて、どう使い分けられているのか、改めて抑えていきましょう！
目次
Webサイトで使用できる画像形式の種類について・特徴や違いを見てみる
Webサイトで使用される画像形式の種類としては、
- gif形式
- jpg形式
- png形式
- svg形式
というものが存在しています。
最近では上記に加えてwebpなどの新しい画像形式も登場してきています。
それぞれについて細かくみていきましょう！
gif形式画像について・特徴と使い方
まずはgif形式画像です。
gif形式画像は、256色の範囲で色の表現を行うことができる画像です。256色という色数の制限があることによって、非常に画像の容量が軽量なのが特徴です。
また、俗にいう「gifアニメーション」などでも使用されて、アニメーション表現を画像で行うことが可能です。
更には、透過をさせることができるのも特徴の1つとして挙げられます。
以前は、例えばWebサイトのロゴの部分などにgif画像を用いられることがよくありましたが、最近では後述するpng画像やSVG画像の台頭によって、そこまで利用されることがなくなっている印象です。
jpg画像について・特徴と使い方
次に、jpg画像についてです。
jpg画像は、写真などを表現する時に用いられることが多い画像形式です。
1670万色の範囲で色の表現を行うことができるため、gif画像と比べて圧倒的に色彩豊かな表現をすることができるようになります。
gif画像との違いとしては「透過させることができない」というものが挙げられます。
また、不可逆圧縮方式といって、上書き保存をする度に基本的に画質劣化が発生するので、意外と扱いには注意が必要な画像形式です。
後述するpng画像よりも比較的軽いと言われていること、そして色と色の境目を目立たせない処理に長けているという理由から、写真（風景や自然などは特に）をWebサイト上で表現する際にはjpg形式の画像が使用されることが多いです。
png形式画像について・特徴と使い方
次に、png形式の画像についてです。
png形式の画像は、いわばgif形式画像とjpg形式画像のいいところ取りなイメージがあります。
可能な色表現はjpg形式以上なのですが、jpg形式の画像と違い、透過表現をさせることも可能になっています。
また、jpg形式の画像と違い、可逆圧縮方式というものが採用されているため、画像を上書きしても画質が劣化することはありません。
jpg形式の画像と比較した時のデメリットとしては、画像容量がjpg形式のものよりも重くなりがちということが挙げられます。
Webサイトにおいては、多くの表現でpng画像形式が使用されるようになっています。
SVG形式の画像について・特徴と使い方
次は、SVG形式の画像についてです。
SVG形式の画像は、これまで紹介した他の種類の画像形式と違い、ベクター画像形式と呼ばれる種類のものになっています。
これまで紹介したpng形式やjpg形式の画像は、画像を細かい格子状の点に分割した上で、それぞれに色の情報を付与して画像を表現するという「ビットマップ画像」でした。
しかし、ベクター画像は画像の情報を計算式やコードによって表現するものになっています。
例えば、私がたまたま所有していた上記のようなファイルアイコン？のSVG画像があります。
これをHTMLファイルにドラッグアンドドロップすると、
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"/></svg>上記のようなコードが出力されるようになっています。
こういったことからも、SVG画像が計算式やコードの集まりによって出来ていることがわかるのではないでしょうか。
そんなSVG形式の画像ですが、特徴としては、画像を拡大縮小しても全て計算式によって画像内容を再描画するため、劣化することがありません。画像劣化という概念がないわけですね！
先ほど掲載したようなjpg画像とは違い、超拡大をしても画像のギザギザなどが見えることもありません。
また、透過に対応している・後から色やサイズの変更が可能・gif形式画像のようにアニメーションさせることができるのもSVG形式画像の特徴です。
ただし、全ての情報を複雑な計算によって描画・表現しているため、写真などにSVG形式の画像を採用してしまうと、超大量の情報を計算し描画しなくてはいけなくなるため、画像の容量がとても重くなってしまいます。
そのため基本的に写真にSVG形式の画像を用いることはありません。
Webサイトでは、ロゴやアイコン・アニメーション表現などにSVG画像を使用することが最近では多くなっているようです。
各画像形式の使い分けについて
| 画像の種類 | 主な特徴 | Webサイトでの使用事例 |
| gif形式 | 色数が少なく軽量・透過可能・ アニメーション可能 | 最近は少ない…？ |
| jpg形式 | 豊かな色表現・pngと比べて 比較的軽量 | 写真 |
| png形式 | さらに豊かな色表現・透過可能 | 文字情報が多く含まれる 画像やキャプチャなど |
| svg形式 | ベクター画像。画像劣化という概念がない。 サイズや色の変更も簡単 アニメーション可能 | イラスト・ロゴ・アイコンなど |
ここまで登場した画像形式の種類の主な特徴とWebサイトにおける使用例について並べてみました。
PhotoShopやIllustratorを使えるのであれば
- png形式やjpg形式・・・PhotoShopで画質などを調整し書き出し
- SVG形式・・・illustratorで画像作成・書き出し
以上のような作業を自身で行うことも増えてくるかと思います。
こういった作業を重ねることで、体で画像形式の特徴と違いを理解することができるのではないかと思います！笑
比較的新しい画像形式の種類について（Webpなど）
ここまでは代表的な画像形式について紹介・説明をさせていただきました。
実は最近では（といってもここ10年くらいのスパンでの話ですが）、png画像やjpg画像に加えて新しい画像形式の種類が登場してきています。
ここからは、新しい画像形式の種類を紹介します！
Webp（ウェッピー）形式画像・特徴と使い方
まずは、Webp（ウェッピー）形式の画像についてです。
Webp（ウェッピー）形式は、Googleが開発している画像形式です。
大きな特徴としては、とにかく「画像容量が軽い！」ということが挙げられます。
Webp（ウェッピー）形式を紹介しているWikipediaのページから引用させていただくと、
Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている
https://ja.wikipedia.org/wiki/WebP より引用
このように、jpg形式の画像やpng形式の画像と比較してかなり軽量に画像容量を抑えることができる画像形式であることがわかります。
そんなに良い画像形式ならば、標準で全部Webp（ウェッピー）形式の画像にしてしまえばいいではないか！と言われそうですが、
上記のサイト（Can I Use?）を見るとWebp（ウェッピー）形式の画像はInternet ExplolerそしてSafariに対応していません！
SafariといえばiPhoneの標準ブラウザ・・・となると、さすがにSafariユーザーを無視してWebサイト上の画像をWebp（ウェッピー）形式の画像のみにするのは、まだリスクが高いわけですね・・・
HTMLやJavaScriptを使いこなせる方であれば、「WebサイトがGoogle Chromeで閲覧されているときはWebp（ウェッピー）形式の画像を表示して、iOS Safariなどで閲覧されている時はそれ以外の画像形式を表示する」ということができると思います。
しかし、画像の準備も大変だということからなのか、思ったほど2020年6月時点ではWebp（ウェッピー）形式の画像はWebサイトで使用されることは多くない印象があります。（使われている事例も見ます）
ちなみに、Webp（ウェッピー）形式の画像はPhotoshopで作成・書き出しすることが可能です。
WebpがSafariやInternet Explolerに対応していない理由？JPEG 2000やJPEG XRの存在
では、なぜWebp形式の画像はSafariやInternet Explolerに対応していないのでしょうか？？
理由のほどは定かではありませんが、実はWebp（ウェッピー）形式の画像のように次世代画像形式として存在しているものが、もう2つほどあります。
それがJPEG 2000やJPEG XRと呼ばれる画像形式です。
実はこのJPEG 2000やJPEG XRの画像形式は、
- JPEG 2000・・・Safariのみブラウザサポートしている
- JPEG XR・・・ Internet ExplolerやMicrosoft Edgeのみブラウザサポートしている
といった状況なのです！
JPEG XRについては、開発をしているのがMicrosoftだからということもあるのか、いわゆる大人の事情が感じられますね！笑
いずれにせよここで言いたいのは、Webp形式の画像はSafariやInternet Explolerには対応していないけど、同等（？）の次世代形式画像が別途あって、それぞれSafariやInternet Explolerに対応しているよ！ということです。
次世代形式の画像が使用されている事例
では、WebpやJPEG2000、JPEG XRなどは現在どのように使用されているのでしょうか。
調べてみると、JPEG2000の使用事例について、興味深い記事に巡り合うことができました。
JPEG2000の使用事例として「映画」「医療系での活用」「衛星画像」があるそうです。
ただ、Webサイトからは外れてしまいますね・・・。
Webpについては、Webサイトにおいて使用される事例もちょこちょこ出てきているようなので、そのあたりは前述させていただいたように技術的なテクニックを使って
「WebサイトがGoogle Chromeで閲覧されているときはWebp（ウェッピー）形式の画像を表示して、iOS Safariなどで閲覧されている時はそれ以外の画像形式を表示する」
ということを実現しているんだと思います！
まとめ
ということで、今回は「png・jpg・gif・svgにWebpなどの最新の形式まで！今やWebサイトになくてはならない画像の形式について基本を抑える」というタイトルのブログ記事を書かせていただきました！
画像1つとっても本当に奥深いですね・・・僕もまだまだ勉強していかないといけないな！と改めて思わされた今回の記事でした。
次回は「Retina Display」について頑張ってブログ記事にしてみたいと思います！
