【軽量化】未対応ブラウザも考慮したWebP対応方法

2022.08.20　Posted by Coding_team

Webプログラミング

WebPとは、Googleが開発した静止画フォーマット。

最近見かけることが多くなってきましたが、気になるのが対応ブラウザ問題。

IEは完全に未対応で、その他にも少し古いブラウザだと対応してないものもあります。

Can I use

そこで「HTMLを使う方法」と「.htaccessを使う方法」の2通りのやり方で、未対応ブラウザも考慮したWebP画像の掲載方法をご紹介します。

HTMLを使う方法

まずは、従来のJPGやPNGの画像と、WebPの画像の2枚を用意します。

WebP変換ツールはこちらがおすすめです
「Squoosh」 https://squoosh.app/

<picture>タグ、<source>タグを使い、下記のように記述します。
レスポンシブ対応なんかでも使うやつですね。

<picture>
	<source type="image/webp" srcset="sample.webp">
	<img src="sample.jpg" alt="WebPの画像">
</picture>

</picture>

2行目 sourceタグのsrcsetにwebpの画像ソースを
3行目 imgタグのsrcにJPGやPNGなどの画像ソースを指定します。

こうすることで、WebPが使える場合はwebpを、使えない場合はjpgが読み込まれます。

.htaccessを使う方法

.htaccessを使用して
「WebP対応ブラウザからJPGにアクセスがあったとき、WebPファイルが存在する場合、WebPにアクセスさせる」
ということができます。

また、この方法ならCSSのbackground-imageもWebPに対応できます。

まずは、従来のJPGやPNGの画像と、WebPの画像の2枚を用意します。

jpgとwebp

このとき、WebPのファイル名はJPGやPNGのファイル名の末尾に「.webp」を付けた形にしてください。

例えば、「sample.jpg」と「sample.jpg.webp」を同一ディレクトリに置いてください。

HTMLでは今まで通り、<img>タグで従来のJPGやPNG画像を挿入するだけ。

<img src="sample.jpg" alt="画像">

1	<img src="sample.jpg" alt="画像">

CSSのbackground-imageの場合も同じく。

background-image: url(sample.jpg);

1	background-image: url(sample.jpg);

.htaccessに記述

サーバーの.htaccessに以下のコードを追記します。

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{HTTP_ACCEPT} image/webp

RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$

RewriteCond %{DOCUMENT_ROOT}%1%2.webp -f

RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1$2\.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>