・WebPってなに？対応していないブラウザがあるみたいだけど、使ったほうがいいの？
今回はこんな疑問に答えていきます。
- WebP（ウェッピー）とは
- WebPを使うメリット
- 全ブラウザへの対応方法
- ワードプレスへの導入方法
Webサイトの表示速度はSEO面でもユーザビリティでも実はめちゃくちゃ重要で、Googleが「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」という調査結果を発表しています。
見たいページがなかなか表示されない状態 = なかなか出てこないハンバーガー（しかも空腹）と同じです。
いくら美味しいハンバーガーでも、受け取る前にお客さんが怒って帰っちゃ意味ないですよね。
サイトの表示スピードに大きく関わる画像のなかでも、Googleの開発したWebPを紹介していきます。
使っている画像をWebPに変えればサイトスピードも改善されるはず。
WebPとはなにか
特に重要ではないので簡単に説明すると、2010年にGoogleが開発した静止画像フォーマットで、ファイルの拡張子は【.webp】。
画像の劣化を抑えて圧縮しているので、効率よく画像を軽量化できるって事です。
詳しく知りたい方はWikipediaまたはGoogleのWebPサイトを参照ください。
WebPを使うメリット
WebPを使うメリット
- 画像を軽量化できる。
- すると、サイトの表示速度がはやくなる。
- すると、ユーザーの離脱率が下がる。
- すると、SEO面でつよくなる。記事を読んでもらえる。
WebPロスレスイメージは、PNGに比べてサイズが26％小さくなります。WebP非可逆画像は、同等のSSIM品質インデックスで、同等のJPEG画像より25〜34％小さくなります
引用元：GoogleのWebPサイト
という記述があります。
Googleが提供している圧縮サイトSquooshで実際に試してみるとほぼ劣化なく画像を軽量化できちゃいます。
クオリティ75%でWebP化したすると、341KBあった画像が110KBまで圧縮できています。（約68%の軽量化に成功です）
劣化具合は下の動画をみてもらえれば分かりやすいですね。
（真ん中にある青い線の左側が元画像、右側が圧縮後の画像）
画質の劣化を大きくおさえ、画質の軽量化ができる。
WebPの対応ブラウザ問題
劣化が少なく、軽量化できる拡張子でGoogleにも推奨されているWebPですが、なかなか普及しなかった理由が対応ブラウザの問題ですね。
| WebP対応ブラウザ | WebP未対応ブラウザ |
|
|
※2020年7月時
上のデータでわかるように、主要ブラウザの8割は対応済みなのですが、問題はIE・Safariが未対応という事です。
出典：マイナビニュース
世界的に4人に1人はSafariを使用していますし、iPhoneユーザーの特に多い日本だとsafariの使用率はさらに高くなります。
おもに、Safariに対応していないという理由でWebPの使用率は横ばい状態でした。（対応していない拡張子の画像を使うのを避けたいのは当然ですね）
「そんな事を言うならば、もうSafariは対応してるんでしょ？」って声が聞こえそうですが、2020年7月現在まだ未対応です。
しかし、2020年6月23日に開催されたAppleの開発者向け会議「WWDC2020」でSafariにも対応することが公表されましたので、日本で使用されているブラウザをほぼカバーできる様になります。
つまり、WebPを使うメリットがとても大きくなる。
全ブラウザへの対応方法
”ほぼ全てのブラウザに対応できる”と言いましたが、今はまだSafariとIEには対応していない状態です。
この状況で自分のサイトで使用している画像を全てWebPにしてしまうと画像は表示されなくなります。
もちろん、そんな事になると困るので未対応ブラウザではJPGやPNG表示してあげる様に対策しましょう。
あと、いま使っている画像をすべてWebP化するのに1つ1つ手作業でするのは作業効率が最悪なので、自動でWebP化する方法もあわせて紹介します。
「EWWW Image Optimizer」で全て解決
- すでにアップロードしている画像をWebP化
- WebPに対応していないブラウザへの対応
- 新規画像を自動でWebP化（もちろん元画像も共存）
「EWWW Image Optimizer」のプラグインで全て解決です。
この記事で設定方法を紹介しています。
「EWWW Image Optimizer」を使ってWebPにする 前回の記事【Safariも対応】WebPという次世代フォーマットの画像を使う理由【Web表示高速化】で、画像をWebP化するメリットや必要性は分かったけ[…]
自分でコードを書く方法もありますが、プログラムとかよく分からない人には時間のムダです。
プラグインを使ってさくっと対応してしまいましょう。