WebPという次世代画像

Webpはgoogleが開発したWebに特化した画像でありWebを軽量化するための次世代画像です。この画像を併用することでSEOにも効果が見込めます。
よろしければこちらもご覧ください

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

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

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のみになります。
対応ブラウザ一部ということはコーディングの際にきちんと対応した書き方をしないといけないということになりコーディングの作業が無駄に増えることになります。

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

貴サイトの表示スピードをチェックしてみましょう!
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>
<source type="image/webp" srcset="./images/sample.webp"/>
<img class="img-responsive" src="./images/sample.jpg" alt="サンプル">
</picture>

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

SEOとしてのメリットは?

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

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

まとめ

webPについてはまだまだ世間では周知されていないですし、全ブラウザにも対応していません。
ですのでいそいで対応しないといけないというものではないとおもいます。
ただgoogleが推し進めるものなので知識として知っておいて損はないと思います。

オリジナル記事はこちら:WebPという次世代画像

 

 

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

人気記事トップ10(過去7日間)

今日の用語

パーミッション
もとは「許諾」を意味する言葉。Webの世界では、サーバー上でのアクセス権を表す場 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]