CMS・Webサイト制作SEO(検索エンジン最適化)

Web業界の新たな画像形式WebPについて

知っていますか?Web業界の新たな画像形式WebP

WebPって知ってますか?サイトが重たい!でも画像圧縮は画質が…そんな悩みが解決できます。

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

”WebP”と名前のとおりWebに特化した画像でありWebを軽量化するための画像です。
通常のWEB画像はjpegやpng、gif、SVCが主に使われているかと思いますが、
Web業界において、今後はこの画像形式がスタンダードになる日も近いかもしません。
今回はそのWebPについてご紹介いたします。

WebPとは

Googleが主導となって開発している新しい画像形式なのですが、2010年から開発おり意外と新しくはありません。
しかし、GoogleがSEO的にページスピードを重要視していることもあり、注目度が上がってきています。とはいえ、まだChrome・Firefox・Edge・Operaでしか対応できていないようです。
WebPの最大の特徴は、”画質が綺麗なのに軽量”というところです。
最近のWEBはJSを駆使したアニメーションなどで重たいサイトが多く見受けられます。 サイトにアクセスしてFVでローディング・・・離脱の確立高いですよね。
Googleの情報によると、事例としてファイルサイズはJPEGと比較して25-34%小さくなり、PNGと比較して28%小さくなるとされています。

WebPのメリット

WepPのメリットは画像の軽量化です。
軽くなるということはユーザーにとって見やすいサイトになるということなので、ユーザビリティの観点からありということになります。

ただ実際検証されているサイトがありました。
https://qiita.com/kieaiaarh/items/764d2a8f9c2756050cbd
結果としては「必ずしも、webpにしたからと言って高速化が図れるわけではない」とのことですが、転送量は抑えられるとのこと。

そういう意味ではスマホの転送量問題に意味があるかもしれません。

WebPのデメリット

WebPのデメリットはすべてのブラウザに対応していないということです。
Google開発ということもあってかiPhoneに搭載されているSafariやIEには対応していません。chromeとfirefoxとEdge、Operaのみになります。

そのため、コーディングの際にきちんと対応した書き方をしないといけないということになりコーディングの作業が無駄に増えることになります。

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

Googleのスピードチェックツールを使うとサイトのページ表示速度をを計測できます。
https://developers.google.com/speed/pagespeed/insights/?hl=ja

50点未満なら注意が必要です。
GoogleのスピードチェックサイトなのであくまでChromeでの計測結果になります。
スピードチェックで結果がでたら、改善する方法が表示されますので、WEBを修正してみてください。

タグの記述方法

pictureタグを以下のように使います。
<picture>
<source type=”image/webp” srcset=”./images/sample.webp”/>
<img class=”img-responsive” src=”./images/sample.jpg” alt=”サンプル”>
</picture>
ただしpictureタグはIEには対応していないので注意が必要です。

まとめ

WebPについてはまだまだ世間では周知されていないですし、全ブラウザにも対応していません。
ですので、慌てて対応しないといけないというものではありませんが、
全ブラウザ対応になったときに他社に後れをとらないようにアンテナはとがらしておきましょう!

SEO対策をお考えの際は
オーパスプランにご相談ください。

Contact

info@opus-plan.com