WebPとは？SEOに効果は？iPhoneに対応？Macは？

今回のテーマはWEB専用の画像ファイルについてです。

WebPという画像をご存知でしょうか？
jpegとかPNGとかGIFなどと同じ画像形式です。

名前のとおりWebに特化した画像でありWebを軽量化するための画像です。
通常のWEB画像はjpegやpng、gif、SVCが主に使われているかと思いますが今後はこの画像をつかわれる時代がくるとされています。
今回はそのWebPについてお話させていただきます。

WebPとは

開発元はGoogleで実は2010年に使用が発表されたそうで案外前からでていたのですが最近日の目を浴びた様子です。
WebPの最大のメリットは軽量化です。
最近のWEBはJSを駆使したアニメーションなどで重いサイトが多く見受けられます。
サイトにアクセスしてFVでローディング・・・離脱の確立高いですよね。
せめて画像くらいは軽くしようということなんですが、
最大の目的はスマホのWEB軽量化なんだと思います。
WikiによるとGoogleの示した事例では、ファイルサイズはJPEGと比較して25-34%小さくなり、PNGと比較して28%小さくなるとされています。

参照： https://ja.wikipedia.org/wiki/WebP

メリット

WepPのメリットは画像の軽量化です。
軽くなるということはユーザーにとって見やすいサイトになるということなのでユーザビリティの観点からありということになります。
ただ実際検証されているサイト(Qiitaさん）がありました。
https://qiita.com/kieaiaarh/items/764d2a8f9c2756050cbd
結果としては「必ずしも、webpにしたからと言って高速化が図れるわけではない」とのことですが、転送量は抑えられるとのこと。
そういう意味ではスマホの転送量問題に意味があるかもしれません。

デメリット

メリットがあればデメリットがあるのがつきものです。
WebPのデメリットはすべてのブラウザに対応していないということです。
google開発ということもあってかSafari(iPhoneも)やIEには対応していません。
chromeとfirefoxとEdge、Opera、Safari14以降になります。
Safariが古いバージョンの場合非対応ということは、コーディングの際にきちんと対応した書き方をしないといけないということになりコーディングの手間が増えることになります。

対応ブラウザ

2021年2月16日時点

・Google Chrome
・Mozilla Firefox 65以降
・Microsoft Edge
・Opera
・Safari 14以降

※この記事を公開した2020年8月あたりではiOS(iPhone)やMacOSには対応しておりませんでした。
※現時点2021年2/16ではmacOS – Big Sur 以降、iOS – 14 以降に対応しているとの情報より記事を更新いたしました。

スピードチェックをしてみよう

貴サイトの表示スピードをチェックしてみましょう！
https://developers.google.com/speed/pagespeed/insights/?hl=ja
Googleのスピードチェックサイトでサイトの表示速度を計測できます。
50点未満なら注意が必要です。
GoogleのスピードチェックサイトなのであくまでChromeとかAndroid端末での効果になるとおもいますがやらないよりはいいと思います。
スピードチェックで結果がでたら、改善する方法が表示されますので、WEBを修正してみてください。
（ちなみにこのスピードチェックの点数は毎回誤差があります）

弊社のトップページhttp://www.1st-net.jpはスマホは70前後、PCは90点台と評価されるまでなりました。
beforeはスマホ、PCともに30点台だったのでだいぶんよくなりました。

タグの記述方法

pictureタグを以下のように使います。

 

ただしpictureタグはIEには対応していないのでこれまたいろいろごにょごにょしないといけません。
面倒・・・・

SEOとしてのメリットは？

弊社のトップページでWebPを導入してみたあとのSEOとしての効果はあったか？

細かく分析をしたわけではないのですがある検索ワードで順位が上昇しました。
Googleが提唱していることもあり一定の効果はあるのかなとはおもいました。
SEOでなかなか伸び悩んでいるサイトがあればぜひともWebPを導入してみてはいかがでしょうか。

まとめ

webPについてはまだまだ世間では周知されていないですし、全ブラウザにも対応していません。
ですのでいそいで対応しないといけないというものではないとおもいます。
弊社でもコーディングの依頼でクライアント様から指定されたことはいままでありません。（大量にコーディングをしていて一度もです）
ただgoogleが推し進めるものなので知識として知っておいて損はないと思います。
デフォルトのコーディング依頼では対応していませんがご興味があるかたは担当者に「webP」指定で！とお伝えください。

ではこのへんで。