Googleが開発した画像の次世代フォーマット［WebP］とは

SEO対策の有効な対策のひとつに「ページの表示速度」の向上があります。Googleは、ページの表示速度を定量評価できるPage Speed Insightsを提供しており、改善できる項目欄で「次世代フォーマットでの画像の配信」という項目を示しています。

Googleが推奨している次世代フォーマットは

• JPEG 2000
• JPEG XR
• WebP

の3つがありますが、まだまだ対応ブラウザが少ない状態です。
その中でもWebPについてはモダンブラウザの8割程度で対応されるようになってきたためWebPの導入が加速してきました。

この記事では、WebPについて理解を深めていただけるように書いていきます。

WebPとは

WebP（ウェッピー）は、米Googleが開発しているWeb時代のための次世代静止画フォーマットで、拡張子は［.webp］になります。
Web時代というだけあって、最大の特徴は圧縮効率の高さです。

• JPEGで25-34%
• PNGで28%

もの容量削減が期待できます。
さらに、PNGのようなアルファチャネル（透過）や、GIFのようなアニメーションも可能です。

サポートブラウザ

実は、2010年にオープンフォーマットととしてリリースされていますが、ブラウザ各社の思惑でなかなか浸透が進みませんでした。
現在は、safariを除くモダンブラウザで対応できるようにまでなりました。

コーディング方法

<img>タグにWebP画像を設定することはできますが、未対応ブラウザで画像が表示されなくなってしまいますので、未対応ブラウザではJPEGやPNGなどのフォーマットの代替画像を表示できるようにコーディングする必要があります。
<picture>タグを使うことで、ユーザーエージェント判定により対応ブラウザにはWebP画像、未対応ブラウザにはWebP以外を表示というようにコーディングできます。

<picture>
	<source type="image/webp" srcset="*****.webp" />
	<img src="*****.png" width="480" height="480" alt="サンプル画像" />
</picture>

WebP画像の制作方法

Googleが提供しているWebサービスsquooshが、ドラッグアンドドロップで簡単に変換できておすすめです。