こんにちは、エヌ（@enublog）です
先日PageSpeed Insightsでサイトのページ速度を計測した結果、対策として「次世代フォーマットでの画像の配信」という項目が表示されました
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます
PageSpeed Insights
要は今の画像形式よりも次世代フォーマット画像を使用することで圧縮性能が高く使用量も抑えられるから次世代に変えた方が良いよというもの
ということで今回の記事では、次世代フォーマット画像とは何か、種類そして今の画像と何が違うのか紹介していきます
| 従来 | 次世代 |
| JPEG | Webp |
| PNG | JPEG2000 |
| JPEG-XR |
結論としてWebPを使いましょう
現在の主な画像フォーマット
キレイな画像で勝負「JPEG」
静止画像データの圧縮方式の一種であるJPEG
フルカラー1670万色を表現できるため主にデジタルカメラの画像形式として知られています
ウェブ対応しているため、写真をメインに見せたいページでJPEGを用いると綺麗に見えるためおすすめ（例）写真系ブログ、旅行日記、景色
色の表現がたくさんありキレイに見える反面容量が大きい
圧縮処理をしてしまうと画像が劣化してしまい本来の画像と離れてしまうことがあります
画像にこだわらないブログであればJPEGを使用しなくて良し
ウェブ制作で活躍「PNG」
写真家にとって本領発揮するJPEGに対してウェブ制作の場ではPNGが活躍します
データを復元した際に復元ができないJPEGですが、PNGの場合データを元に戻すことができます。イラストやロゴの作成はJPEG<PNGの方が良いと思っています
イラストやロゴを多く作成するブロガーであればPNGを使っていれば問題ないでしょう
次世代フォーマット画像
WebP
Googleが開発した画像フォーマットのことで発表は2010年、拡張子は「.webp」
対応ブラウザはChrome、Safari、Firefox、Edge
WebPはJPEGとPNG両方の良い点を持っています
WebpはJPEG同様に非可逆圧縮です。これは手を施して保存した画像を元のデータに戻せないというもの、さらにサイズ変更や上書き保存で画像は劣化します。しかしWebPではこれらの問題を解決できます
JPEGは背景透明化でできません。一方でPNGは透明化できます
WebpはJPEGと同じ方式にも関わらず透明化もできます。つまりJPEGとPNG両方の方式を使えるのです
| 圧縮前のデータに戻す | 背景透明 | ファイルサイズ | |
| JPEG | × | × | 大きい |
| PNG | 〇 | 〇 | 普通 |
| WebP | 〇 | 〇 | 小さい |
WebPはメリットが多いように思いますが、新しい画像フォーマットのため対応していないブラウザがあります。しかし主要なブラウザは対応しているためWebPで画像を制作しても問題はないと個人的に思っています
JPEG2000
JPEGの新しい形式「JPEG2000」で国際規格に設定されている
画像の圧縮率が従来に比べて高くなりノイズがあまり発生されなくなっています
JPEGはデータが戻せなくなりますが、新しい形式のJPEG2000は可逆圧縮が可能になり圧縮前のデータに戻せるようになりました
対応ブラウザは現段階だとsafariのみになっているためオススメしません
JPEG-XR
高い圧縮率と色調範囲の拡張と豊富な広色域が特徴
圧縮率を軸において見るとJPEG2000<JPEG-XR
対応ブラウザIE（インターネットエクスプローラー）
今使うならWebP（試験的に）
| Chrome | Edge | FireFox | Safari | IE | |
| JPEG2000 | × | × | × | 〇 | × |
| JPEG-XR | × | × | × | × | |
| Webp | 〇 | 〇 | 〇 | 〇 | × |
次世代フォーマット画像が従来の画像フォーマットよりも圧縮率がよくデータ容量を抑えられて良いということはわかりました。しかし今の段階ではまだ普及が広まっていないため時間が必要です
そこで試験的にWebPを取り入れることが良いでしょう
本当にSEO効果を得ることができるのか？
当ブログで実験した後、別の記事で報告したいと思います
