COLUMN
コラム
Web業界の新たな画像形式WebPについて
WebPって知ってますか？サイトが重たい！でも画像圧縮は画質が…そんな悩みが解決できます。
WebPという画像形式をご存知でしょうか？
jpegとかPNG、GIFなどと同じ画像形式です。
”WebP”と名前のとおりWebに特化した画像でありWebを軽量化するための画像です。
通常のWEB画像はjpegやpng、gif、SVCが主に使われているかと思いますが、
Web業界において、今後はこの画像形式がスタンダードになる日も近いかもしません。
今回はそのWebPについてご紹介いたします。
Googleが主導となって開発している新しい画像形式なのですが、2010年から開発おり意外と新しくはありません。
しかし、GoogleがSEO的にページスピードを重要視していることもあり、注目度が上がってきています。とはいえ、まだChrome・Firefox・Edge・Operaでしか対応できていないようです。
WebPの最大の特徴は、”画質が綺麗なのに軽量”というところです。
最近のWEBはJSを駆使したアニメーションなどで重たいサイトが多く見受けられます。
サイトにアクセスしてFVでローディング・・・離脱の確立高いですよね。
Googleの情報によると、事例としてファイルサイズはJPEGと比較して25-34%小さくなり、PNGと比較して28%小さくなるとされています。
WepPのメリットは画像の軽量化です。
軽くなるということはユーザーにとって見やすいサイトになるということなので、ユーザビリティの観点からありということになります。
ただ実際検証されているサイトがありました。
https://qiita.com/kieaiaarh/items/764d2a8f9c2756050cbd
結果としては「必ずしも、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 src=”./images/sample.jpg” alt=”サンプル”>
</picture>
ただしpictureタグはIEには対応していないので注意が必要です。
WebPについてはまだまだ世間では周知されていないですし、全ブラウザにも対応していません。
ですので、慌てて対応しないといけないというものではありませんが、
全ブラウザ対応になったときに他社に後れをとらないようにアンテナはとがらしておきましょう！
弊社の資料をダウンロードしたい方は
下記よりダウンロードしてください。
ご相談・サービスに関する詳細情報やご不明点など
下記よりお気軽にお問い合わせください。
