絶対オススメ！webpのメリットと変換方法

こんにちは、税理士法人YFPクレア　WEB担当の越尾です。

今日は、私が絶賛オススメするwebpの紹介をします。

webpとは？

webpとは、2010年にグーグルが開発した次世代画像フォーマットのことです。

webpと書いて【ウェッピー】と呼びます。

2010年時点では、グーグルのライバル…Appleがwebpを表示してくれなかったので、正直使い勝手が悪かったのですが、2018年位？にSafariでも表示してくれる様になったので、実用化が一気に進みました。

webpの特徴とメリット・デメリット？

表示スピードの速さ、SEOへの良影響（メリット）

現在は大モバイル時代！なにか気になればすぐにスマホでググるのが当たり前の時代です。

皆さんも経験あるかと思いますが、スマホの大敵は「通信スピード」
１秒以内に最初の表示をさせたいところ！
３秒待たせたら3人に1人が戻るボタンを押し
6秒待たせたら全員戻るボタンを押す。
というほど、表示スピードが遅い＝見てもらえない！SEOにも悪影響！
というダブルの損失を被ることになります。

その通信スピードを下げる要因で一番大きいのが画像のサイズです。

画像サイズとして、100kbを超えたら大きすぎ！
とはいえ、PCではきれいに見える画像も、スマホで見るとぼやけて見える・・・
という現象を起こします。

最近はスマホのほうが解像度が良すぎて、PCで見れるけど、スマホでは見れたものじゃない！という現象も起こります。

画像変換の手間がかかる（デメリット）

これから、毎回私が行っている作業をお伝えしますが、ハッキリ言って手間です。

が、例えるなら…美味しい野菜を育てるなら、雑草抜いたり、不要な枝を切り落としたり、手入れがいるように、
良いサイトを作るためには一つずつは面倒な手間がかかってきます。

そういう面倒なところ、手間がかかるところこそ、SEOの分かれ目！！

丁寧にやっていくことが吉です！

古いブラウザをずっと使っている人には表示されない

webp対応のブラウザにはwebpを。webpには非対応のブラウザにはpngやjpegを表示する…
という機能のプラグインもあるのですが
これだと、２枚もサーバー上に画像を保管しないといけないし、ブラウザごとにwebpが使えるか判定していたら表示スピードが逆に落ちてしまうからです。

なので、弊社では、webp非対応のブラウザにはもう無視することにしています。

webpが見れない条件は・・・

Safari14未満のバージョン（2020年9月からアップデートしていない）
Chromeも2011年2月からアップデートしていない場合。かなり少ないと思われます。

Chromeの場合は10年以上も更新していない人、Safariもこれだけアップデートを拒否し続けていたら、webp以外にも不具合生じそうと感じてしまいます。

人口カバー率で言えば90％を超えてくると思うので、残り10％の方へはごめんなさい！！

Webpへの変換の仕方（無料ツール）

Squoosh（スクーシュ）【サイズ変更を同時にしたい場合】

Squooshはグーグルが作った画像変換ツールです。

スクーシュのいいところはブラウザで画面を見ながらサイズ変更、webp化などを行う事ができます。

サルワカ道具箱【同時に大量にwebp化したい場合】

サルでもわかる～をテーマにコンテンツ制作をされているサイトです。

同時に大量にwebpにしたい場合はサルワカがオススメ。

同時に50枚までwebp化できます。

squooshのように１枚１枚丁寧にはできませんが、大量に処理したい場合はこっちのほうがオススメ。

【非推奨】jpegを入れたらwebpにしてくれるプラグインについて

プラグインで画像をjpegを入れたら勝手にwebpに変換してくれるプラグインもありますが、
弊社では今のところ非推奨。

なぜなら、プラグインを使ってSight Speed Insights（サイトスピードインサイト：グーグルが運営しているサイトの表示スピードをチェックするツール。もちろん無料）で計測したところ、上記のsquooshやサルワカで作ったwebpのページの方が評価が良かったからです。

面倒である…というのはもちろん百も承知。
何なら毎日この作業をやってる私はマジでめんどいと思ってますが、この微差でSEO１位か２位の大差を生むと思っているので歯を食いしばって頑張っております
（そこまでではない気がするがｗ）

webpのまとめ

このページを作ったのは一人でも多くのお客様にwebpを知っていただいて、webpでサイトを運営して欲しいと思っているからです。

もちろん管理更新サポートで変更も可能ですが、やっぱりお客様にやって頂けるならそれだけ評価されるスピードも早くなるのでいいですよね。

ぜひ、webp、使ってみて下さい！