webpがsafariに対応イメージ

【Safariも対応】WebP(ウェッピー)という次世代フォーマットの画像を使う理由【Web表示高速化】

疑問女性
・サイトのスピードテストをすると「次世代フォーマットでの画像の配信」って書いてあるんだけどなに?

・WebPってなに?対応していないブラウザがあるみたいだけど、使ったほうがいいの?

今回はこんな疑問に答えていきます。

本記事の内容

  • WebP(ウェッピー)とは
  • WebPを使うメリット
  • 全ブラウザへの対応方法
  • ワードプレスへの導入方法

    Webサイトの表示速度はSEO面でもユーザビリティでも実はめちゃくちゃ重要で、Googleが「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」という調査結果を発表しています。

    見たいページがなかなか表示されない状態 = なかなか出てこないハンバーガー(しかも空腹)と同じです。
    いくら美味しいハンバーガーでも、受け取る前にお客さんが怒って帰っちゃ意味ないですよね。

    サイトの表示スピードに大きく関わる画像のなかでも、Googleの開発したWebPを紹介していきます。

    使っている画像をWebPに変えればサイトスピードも改善されるはず。

    WebPとはなにか

    特に重要ではないので簡単に説明すると、2010年にGoogleが開発した静止画像フォーマットで、ファイルの拡張子は【.webp】
    画像の劣化を抑えて圧縮しているので、効率よく画像を軽量化できるって事です。

    詳しく知りたい方はWikipediaまたはGoogleのWebPサイトを参照ください。

    WebPを使うメリット

    WebPを使うメリット

    WebPを使うメリット

    1. 画像を軽量化できる。
    2. すると、サイトの表示速度がはやくなる。
    3. すると、ユーザーの離脱率が下がる。
    4. すると、SEO面でつよくなる。記事を読んでもらえる。

      GoogleのWebPサイトでは

      WebPロスレスイメージは、PNGに比べてサイズが26%小さくなります。WebP非可逆画像は、同等のSSIM品質インデックスで、同等のJPEG画像より25〜34%小さくなります

      引用元:GoogleのWebPサイト

      という記述があります。

      Googleが提供している圧縮サイトSquooshで実際に試してみるとほぼ劣化なく画像を軽量化できちゃいます。

      webpで画像を軽量化できる

      クオリティ75%でWebP化したすると、341KBあった画像が110KBまで圧縮できています。(約68%の軽量化に成功です)


      劣化具合は下の動画をみてもらえれば分かりやすいですね。
      (真ん中にある青い線の左側が元画像、右側が圧縮後の画像)

      webp化前元画像
      WebP化した画像の全体像

      元画像を1113%まで拡大してやっとわかるレベルの劣化具合です。

      女性
      フォトギャラリーなどの画質重視なサイトでない限り、まるで問題ない画質ですね。

      画質の劣化を大きくおさえ、画質の軽量化ができる。

      WebPの対応ブラウザ問題

      対応ブラウザ問題

      劣化が少なく、軽量化できる拡張子でGoogleにも推奨されているWebPですが、なかなか普及しなかった理由が対応ブラウザの問題ですね。

      webp対応ブラウザ
      出典:Can I use
      WebP対応ブラウザ WebP未対応ブラウザ
      • Edge
      • Firefox
      • Chrome
      • Opera
      • Opera Mini
      • Android Browser
      • Opera Mobile
      • Chorome for Android
      • Firefox for Android
      • UC Browser for Android
      • Samsung Internet
      • QQBrowser
      • Baidu Browser
      • IE
      • Safari
      • iOS Safari
      • KaiOS Browser

      ※2020年7月時

      上のデータでわかるように、主要ブラウザの8割は対応済みなのですが、問題はIE・Safariが未対応という事です。

      mobile_share001

      出典:マイナビニュース

      世界的に4人に1人はSafariを使用していますし、iPhoneユーザーの特に多い日本だとsafariの使用率はさらに高くなります。

      おもに、Safariに対応していないという理由でWebPの使用率は横ばい状態でした。(対応していない拡張子の画像を使うのを避けたいのは当然ですね)

      「そんな事を言うならば、もうSafariは対応してるんでしょ?」って声が聞こえそうですが、2020年7月現在まだ未対応です。

      しかし、2020年6月23日に開催されたAppleの開発者向け会議「WWDC2020」でSafariにも対応することが公表されましたので、日本で使用されているブラウザをほぼカバーできる様になります。

      女性
      Safariも対応するとなると、JPGやPNGよりも表示速度の早くなるWebPを使うメリットがとても大きくなるよね。

      Safari14からWebPに対応するので、国内での使用ブラウザのほとんどに対応することになる。

      つまり、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化するメリットや必要性は分かったけ[…]

        【WordPress】WebPに一括変換する方法【プラグイン】

        自分でコードを書く方法もありますが、プログラムとかよく分からない人には時間のムダです。
        プラグインを使ってさくっと対応してしまいましょう。