WebPってなに？

2021.08.10 : Yamamoto Naoki

Other

残暑見舞い申し上げます。秋の欠片が蜃気楼で見えないほど暑い毎日が続いていますが、皆様お元気でしょうか？

さて、今回は画像のファイル形式について書いてみたいと思います。

その名もWebP(ウエッピー）です。

Googleが開発した画像フォーマットで、JPEG，PNG、GIFなどを置き換えを意図するファイル規格です。

Google PageSpeed Insights の改善できる項目で「次世代フォーマットでの画像の配信」の欄があるので見たことのある人もいるのではと思います。

そこにはJPEG 2000、JPEG XR、WebP などの画像フォーマットと書かれていますが、現状を鑑みるとWebP一択となります。

※JPEG 2000はsafariのみ、JPEG XRはIEとEDGEのみ対応

WebPの特徴としてJPEG，PNG、GIFなどファイル形式と比較しても20〜30％ファイルサイズが小さくなるようで、表示スピードを上げるということでは導入の恩恵は十分ありそうです。

一応メリット、デメリットをまとめてみました。

メリット

透過画像やGIFアニメーションのようなことも可能で、従来のように用途によって画像ファイル形式を選択する必要がない。

高圧縮（ファイルサイズが小さい）で、表示速度も早くなるため、閲覧者への利便性や表示速度に起因するSEO対策になる。

デメリット

IEは対象外

Apple系ブラウザは最近対応（macOS 11 Big Sur、iOS14以降）したので、取り扱いに注意が必要。

非対応ブラウザのために別途画像の用意が必要。

画像編集ソフトによっては、出力がまだ対応されていない。

対応表はこちら
https://caniuse.com/?search=webp

非対応ブラウザでの表示方法

1.HTMLの記述

WebP対応のブラウザであれば以下の記述でOKです。

<img src=“../img/sample.webp" alt="画像サンプル">

しかし、未対応では以下の記述が必要になります。

<picture> 
<!-- WebPフォーマットの画像のtype属性に image/webp を記述 -->
<source srcset="../img/sample.webp" type="image/webp">
<!-- webp未対応ブラウザの記述 --> 
<img src="../img/sample.jpg" alt="画像サンプル"> 
</picture>

2.htaccessの記述

.htaccessに記述するとサーバー上に同名のWebPファイルが存在し、かつ対応ブラウザであれば表示することになり、既存サイトでHTMLの記述が難しい場合に有効です。
以下はjpgとそれに対応するwebp画像がある場合の記述です。

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>
 
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>
 
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>