「webP(ウェッピー)」を使用して画像サイズを縮小。

画像を多用することで遅くなっているWEBサイトの表示速度を「webP（ウェッピー）」を使って改善する方法をメモ。
safari（サファリ）には対応していないので、今回はブラウザ判定を用いて対応。

「WebP(ウェッピー)」を使った画像圧縮の方法

画像データを WebP に変換

まずは使用画像（JPEG・PNG・GIF）をWebpに変換。
「サルワカ道具箱」というサイトで一括変換できるのでこちらを利用

• PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱

ブラウザに合わせて画像を表示

WebPはすべてのブラウザで対応しているわけではありません。
全ブラウザで表示対応してしまうと、画像が見れなくなるものもあるため、ブラウザにあわせて表示画像を対応することが必要。
今回は「.htaccess」による対応方法と「picture」タグによる対応方法の2種類を記載。
htmlを変更する必要のない「.htaccess」を使用した方法の方が比較的早く実装が可能。

.htaccessによる切り替え対応

.htaccess

<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>

pictureタグによる切り替え対応

htmlの該当する項目を「<picture>」を使って実装。
「<source>」を上から順に読み込み、条件に該当しなければ下のソースを読みこむため、非対応の場合は最下部の「<img>」を表示する。

HTML

<picture>
<source srcset="sample.webp" type="image/webp"/>
<img src="sample.png" />
<picture>

実装の確認

<picture>方式であればHTMLのソースで、WebPフォーマットで配信されているかを確認ができるのですが、「.htaccess」を使用した場合は、ソースでの確認ができないため、Chromeの拡張機能「WebP Highlighter」を使用するのが分かりやすい。

• WebP Highlighter

見ているページでWebPとして配信されている画像が蛍光色の枠で表示されます。

• WebPと従来の画像を正しく振り分ける.htaccessファイル
• WebP 対応・導入
• WebP画像を目立たせるChrome拡張機能 WebP Highlighter