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が、ドラッグアンドドロップで簡単に変換できておすすめです。

コメントをする

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。