■目次

今日のテーマは、"WebPという次世代画像の扱いについて"という事で、
ホームページで扱われる画像ファイルについてです。

皆さま、とはご存じでしょうか？
jpeg、jpg、png、gif等といったものと同じ画像ファイルです。

webという文字から察するに、webに特化した画像ファイルで、特に軽量で高速で読み込み事のできるファイルです。

近年のWEB制作では、jpg、png、SVGが主に使われていますが、
Googleが言うサイトの読み込みの高速化、サイト表示の高速化という観点から、
弊社では多くのWEBサイトでWEBPを導入しています。

 

WebPとは

webpはGoogleが2010年頃に開発をされたそうで、一年以上前から注目を集めていたようです。
このwebpの最大のメリットは、サイトの高速化です。
WEBサイトの高速化と言ってピンと来る方もいらっしゃるかと思いますが、
WEBサイトへアクセスした時に、なかなかページが表示されないという経験はありますよね？
特にこの数年スマートフォンが普及し、ギガ制限のある中一つのページを読み込むのに
・時間がかかったり…
・Javascript等を多用し過度なローディングが動いたり…
などなど、これってカッコいいかもしれませんが、案外ユーザーの離脱に繋がっているのです。
それを少しでも解決しようという事なんです。

wikiペディアだと、
JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。
となっていますが、実際の体感速度ももっとです。

 

WebPのメリット

webpの最大のメリットはWEBサイトの高速化です。
WEBサイトが軽くなるという事は、閲覧するユーザーのためになる事なので、
ユーザビリティの観点からとても良いことですね。
しかし、必ずしもサイトの高速化が図れるという訳ではありません。
確かに、通信に於けるデータ転送量は抑えられるかもしれませんが、
その画像によってはデータ容量が膨大なケースもありますし、
適材適所に使っていく必要があります。

 

WebPのデメリット

webpのデメリットは、webpを表示できるブラウザが少ない。
webpは全てのブラウザで対応している訳ではありません。Google開発ということもあってかSafariやIEには対応していません。
また、iPhoneにも対応していません。
直近だと、Chrome、Firefox、Edge、Operaのみになります。

この画像は、緑が対応、赤が非対応です。
iPhoneも対応して欲しいです…。

 

タグの記述方法

webpを扱う時にHTML5のpictureで記述をするか、.htaccessを用いてサーバーサイドで処理させるかになります。
私の場合は、pictureタグを生成するphp等を使って画像の有無を判定しつつ、最適な画像を表示する関数を自作してwebpを扱っています。

最も簡単なHTML5を使って出力する場合はpictureタグを使います。

この方法だと、IEはpictureには対応していないので、「picturefill.js」で対応させます。
また、backgroung-imageにも対応しないので、jqueryを使うか、.htaccessで対応させていきます。
なかなか面倒ですね…

CMSでのwebp対応

CMSでのwebp対応は、なかなか難しい所があります。
出来るか出来ないかと言ったら出来るのですが、WEBサイトを操作するお客様側でwebpの画像を作るか、
別途自動的にjpgやpngといった画像をwebpに変換するプログラムを作らないといけません。
その労力とコストを考えた場合、それほど必須ではないと思います。

例えば、SEOやサイトの高速化全てを加味した場合、
・普通のサイズの画像
・×２サイズの画像
・×３サイズの画像
・webpの画像

上記のように、一枚の画像の登録にも３、４枚の画像が必要になり、
Photoshopや、画像リサイズソフトが必要となります。

それでも導入したい！という方は
1枚の画像の登録で上記4種全ての画像を自動的に生成という事もできますので
ご相談ください。

 

SEOとしてのメリットは？

弊社のWEBサイトにもWebPを空いた時間を利用して対応を進めています。
細かな調査は行っていませんが、導入以前と比べて検索順位は上昇したように思えます。
SEO対策の一環で導入を検討してみてはいかがでしょうか？

まとめ

webPについてはまだまだ世間では周知されていないですし、全ブラウザにも対応していません。
だからと言って放置する訳にも行きません。
弊社では、Wordpressの一部と、独自CMSの一部機能を除き、
通常制作の案件にはwebpを導入が可能です。
もし、WEBサイトのスピードを意識した制作をご検討の場合は「webp」で！とお伝えください。