WebP対応状況

最近のSEOを語るにはWebP対応はマストになってきたように思えます。
Wordpressなどではいくつかプラグインが出ていますがbackground-imageまで書き換えてくれるプラグインは2020年1月現在は無いです（たぶん・・・）

なので、今回background-imageを書き換えるスクリプトを作成していきたいと思います。

ユーザーエージェントを判別

まずは、ブラウザ毎でのWebP対応状況を見ていきましょう。
WebP対応状況
上記表をご覧いただければわかりますがWebP非対応ブラウザはIEとSafariです。

ブラウザ識別子

基本的には以下の文字列で各ブラウザを識別できます。

ブラウザ 識別子
Internet Explorer MSIE または Trident
Edge Edge
Google Chrome Chrome
FireFox Firefox
Safari Safari
Opera Opera

各ブラウザーのユーザーエージェント一覧

Internet Explorer
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; YTB730)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; YTB730; GTB7.3; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30618; .NET4.0C)

 

Edge
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162

 

Firefox
Mozilla/5.0 (Windows NT 6.1; rv:11.0) Gecko/20100101 Firefox/11.0
Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0

 

Safari
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; ja-jp) AppleWebKit/523.12 (KHTML, like Gecko) Version/3.0.4 Safari/523.12
Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; ja-jp) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/4.1.3 Safari/533.19.4

 

Chrome
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.121 Safari/535.2

 

Opera
Opera/9.80 (Windows NT 6.1; U; ja) Presto/2.10.229 Version/11.60
Opera/9.80 (Windows NT 6.0; U; ja) Presto/2.5.22 Version/10.51


全ブラウザ対応


var userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf(‘msie’) != -1 ||
userAgent.indexOf(‘trident’) != -1) {
console.log(‘Internet Explorerをお使いですね’);
} else if(userAgent.indexOf(‘edge’) != -1) {
console.log(‘Edgeをお使いですね’);
} else if(userAgent.indexOf(‘chrome’) != -1) {
console.log(‘Google Chromeをお使いですね’);
} else if(userAgent.indexOf(‘safari’) != -1) {
console.log(‘Safariをお使いですね’);
} else if(userAgent.indexOf(‘firefox’) != -1) {
console.log(‘FireFoxをお使いですね’);
} else if(userAgent.indexOf(‘opera’) != -1) {
console.log(‘Operaをお使いですね’);
} else {
console.log(‘そんなブラウザは知らん’);
}

正直、複雑すぎますよね・・・
諸悪の根源は、EdgeとCrhomeです。
上記の一覧を見直してみると
Crhomeは
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
Edgeは
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162
CrhomeにもSafariの文字が・・・
EdgeにはCrhomeとSafariの文字が・・・

webpテスト画像、WebP対応ブラウザで確認するとWEBPと言う画像が表示されます。
参考サイトhttps://qiita.com/sakuraya/items/33f93e19438d0694a91d