小金井にあるWEB制作会社の備忘録

MEMORANDUM

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

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

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

画像データを WebP に変換

まずは使用画像(JPEG・PNG・GIF)を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として配信されている画像が蛍光色の枠で表示されます。