【軽量化】未対応ブラウザも考慮したWebP対応方法
2022.08.20 Posted by Coding_team
WebPとは、Googleが開発した静止画フォーマット。
最近見かけることが多くなってきましたが、気になるのが対応ブラウザ問題。
IEは完全に未対応で、その他にも少し古いブラウザだと対応してないものもあります。
そこで「HTMLを使う方法」と「.htaccessを使う方法」の2通りのやり方で、未対応ブラウザも考慮したWebP画像の掲載方法をご紹介します。
HTMLを使う方法
まずは、従来のJPGやPNGの画像と、WebPの画像の2枚を用意します。
WebP変換ツールはこちらがおすすめです
「Squoosh」 https://squoosh.app/
<picture>タグ、<source>タグを使い、下記のように記述します。
レスポンシブ対応なんかでも使うやつですね。
1 2 3 4 |
<picture> <source type="image/webp" srcset="sample.webp"> <img src="sample.jpg" alt="WebPの画像"> </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枚を用意します。
このとき、WebPのファイル名はJPGやPNGのファイル名の末尾に「.webp」を付けた形にしてください。
例えば、「sample.jpg」と「sample.jpg.webp」を同一ディレクトリに置いてください。
HTMLでは今まで通り、<img>タグで従来のJPGやPNG画像を挿入するだけ。
1 |
<img src="sample.jpg" alt="画像"> |
CSSのbackground-imageの場合も同じく。
1 |
background-image: url(sample.jpg); |
.htaccessに記述
サーバーの.htaccessに以下のコードを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
サイト全体に適用したい場合は、ルートディレクトリに.htaccessを設置。
特定のディレクトリに適用したい場合は該当ディレクトリや、画像が設置してあるディレクトリに設置してください。
参考
次世代フォーマットWebPを使ってみよう!|ワンズクエストラボ|株式会社ワンズクエスト
https://www.ones-quest.co.jp/labo/webp02.php
以上、未対応ブラウザも考慮したWebP対応方法でした。
WebPについては、過去の記事でも触れてますので、よかったらご覧ください。
関連記事こちらの記事も合わせてどうぞ。
ノーコードツールとは?Web制作の新常識と活用事例について徹底解説!
2024.08.23
2022.07.28
Webサイト更新時に修正が反映されない時は?キャッシュ削除での解決方法
2022.05.19