Help us understand the problem. What is going on with this article?

次世代画像フォーマットWebP(ウェッピー)のサポート状況、作り方、使用方法まとめ

More than 1 year has passed since last update.

webサイトの高速表示はSEOやよりよいユーザー体験を生むためにも非常に大事な要素です。

サイトの表示速度を計測したり、改善のヒントを得るために「Page Speed Insights」を利用することが多いのと思うのですが、2018年11月のアップデートでモバイルでの評価が3G回線時の通信速度ベースとなり、以前よりも厳格な基準となったのをご存知ですか?

また基準が厳しくなっただけでなく、速度改善のためのヒントも今までなかった項目が表示されるようになりました。

その中の一つが本記事のテーマである「次世代フォーマットでの画像配信」です。

本記事では次世代フォーマットの画像形式の一つ、webP(ウェッピー)について基礎知識からサイトに導入するために必要なことをまとめていきます。

ページの表示速度に悩んでいる方はぜひチェックしてみてください!

次世代フォーマットの画像形式とは

導入分の中でも述べた通り、「Page Speed Insights」では表示速度を高速化するために「次世代フォーマットでの画像配信」というものを推奨するようになりました。
2018-12-23_182655.png

中々見慣れないキーワードですが、推奨されている画像のフォーマットは下記の3つです。

従来のPNGやJPEGといった画像形式よりも高い画質を保ちつつ、データを圧縮することができるので、ダウンロード時間やデータ使用量を抑えることができます。

  • JPEG 2000
  • JPEG XR
  • WebP

上記の画像フォーマットは最近できたものではありませんが、下記のように閲覧できるブラウザが異なり、jpeg、pngのように普及されないまま長年放置されてきました。

JPEG 2000 JPG XR WebP
safariのみ IEのみ Chromのみ

こんな背景がある中で、WebPは徐々に各種ブラウザでも利用できるよう整備されつつあり、jpegやpngに次ぐ次世代の画像形式として注目されています。

ということで、ここからはwebPについて詳しく取り上げていきます!

webP(ウェッピー)とは

WebP(ウェッピー)はGoogleが2010年から提供している静止画像フォーマット。非可逆圧縮やアニメーション、透明度などをサポートしています。

拡張子は「.webp」となります。

webPの対応ブラウザについて

下記は「Can I use」で主要ブラウザのWebPサポート状況をまとめた表です。(2018年12月確認)

現段階ではChromeでしかWebPは表示されませんが、ゆくゆくFireFox、Edgeでも対応される予定となっています。

JPEG 2000 JPG XR WebP
Chrome × ×
FireFox × × ×(v65で対応予定)
safari × ×
Edge × ×(v18で対応予定)
IE11 × ×

WebPファイルを作る方法

現段階では、photoShopやlightroomなどの画像ソフトでwebPファイルを書き出すことができません。
WebPファイルを作るには下記のような手段をとる必要があります。

photoShopのプラグインを利用して書き出す

GulpやGruntでコンパイルする

オンライン上で変換する

実際、どれくらい画像ファイルを軽量化できるのか

実際にphotoshopで書き出した下記の画像をそれぞれ圧縮してみると、データ容量に大きな違いが出てきました。
tokyo-station.jpg

jpegを圧縮した場合

まずは画像を圧縮する定番のサイト「https://tinyjpg.com」で圧縮した場合。ファイルの大きさは924kb → 292kbとなり、69%サイズを軽量化することができました。
2018-12-23_181805.png

webPに変換し圧縮した場合

次にwebPで圧縮変換した場合です。上記でも触れたオンライン上でjpegファイルをwebPファイルに変換できる「https://lab.syncer.jp/Tool/Webp-Converter/」で検証してみました。
2018-12-23_181936.png

結果は924kb → 175kbとなり、81%データを軽量化するという結果に。

なんと画像1枚で100kb程度の差がでました。画像枚数が多いコンテンツでは、ダウンロード時間やデータ使用量にかなり差が出そうです。

WebPをサイトに導入するためには

webサイトの高速表示に貢献してくれる次世代画像フォーマットのwebP。
ただし現段階では、webPはサポートされているブラウザが限られているため、今はまだ全面的に切り替えるのは難しいのが現状です。

実際にサイトでwebPを導入する場合は、ユーザーエージェントを判定してサポートされていないブラウザにはWebP以外の画像を表示する必要があります。

その場合はpictureタグを使って、下記のように記述をします。

<picture>
  <source type="image/webp" srcset="sample.webp" />
  <img src="sample.png" width="400" height="400" alt="サンプル画像" />
</picture>

まとめ

次世代フォーマットの画像形式の一つ、webP(ウェッピー)についてまとめていきました。

現在はまだサポートされていないブラウザもあるため使いづらい現状ですが、safariが対応されるようになったら一気に普及する可能性があります。

また、画像を出し分けるという方法をとればすでにサイトに利用することもできるので、サイトパフォーマンスを改善したい方はぜひ導入してみてはいかがでしょうか。

a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした