Googleウェブパフォーマンス・ツールで測定
Googleウェブパフォーマンス.ツール:PageSpeed Insights判定の結果、webp画像を推奨されています。
webp（ウェッピー）
webpをサポートしているブラウザが限られているので、mod_PageSpeedでは今まで利用するには利用するための記述を、サーバーのconfファイルか、.htaccessにする必要があります。Onにした場合でも、webpをサポートしていないブラウザの場合は通常のjpgやpng画像を表示します。 画像を自動でwebpに変換するフィルターの名前はconvert_jpeg_to_webpです。このフィルターがどうやら、デフォルトでOnになる設定です。
mod_pagespeedとは？
公式サイト：http://code.google.com/配信されているコンテンツを高速通信、高速レンダリングできる形に変換してブラウザにコンテンツを返すApacheモジュールで、自身でサイトのコンテンツを最適化の手間を煩わすことなく、mod_pagespeedを利用してコマンドひとつで全部自動でやってくれるというものです。
さくらインターネット・レンタルサーバーで.htacsessを使ったwebp画像設定
webp画像を利用するためには、Googleが公開しているApacheモジュールであるmod_pagespeedをインストールする必要があります。
レンタルサーバーを利用しているWEBサイトでwebp画像へのhtacsess上での変換ができるか調べてみました。まずは、さくらインターネットへシェルログイン。サーバーにログインし、UNIXコマンド（SSH）でサーバーを遠隔操作
シェルログイン方法レンタルサーバーで設定ファイルを書換出来ない場合は、mod_pagespeedをインストール出来ないため、htacsess上での変換が出来ないのでpicterタグなどを利用してwebp画像表示する。
更新日：
サーバーを乗り換えたくない事案があったのでさくらインターネットのレンタルサーバーでwebp画像を利用する方法。
ちなみに、ロリポップのレンタルサーバーもroot権限がないので「.htaccess」によるwebp画像入れ替えは利用できません。Xサーバーは「.htaccess」でwebp画像変更ができます。
avaScriptで画像ファイルを読み込む際にURLを書き換える
HTMLでsrcを記載せず、jsで記載する方法。＜/body＞直前でJSを読込画像を表示するので拡張子が何だろうと利用できますね。ただ、HTMLの書換が面倒かもしれません。
任意のタイミングで画像ファイルを読み込む方法 js正規表現で画像のファイル名をを変更するリクエストヘッダーについての詳しいサイトがあったので、まずは、参考に。
とほほのWWW入門PNG/JPEG/GIFファイルをPNG/JPEGファイルへ変換する[HTML5の標準機能]
ブラウザ側ででPNG/JPEG/GIFファイルを読み込んでPNGまたはJPEGファイルに変換するHTML5の機能も便利なので参考に。
ブラウザのcanvasへ描画して保存するという方法
参考：www.petitmonte.comブラウザがwebp画像が使えるか判定する
Accept
PHP
//全部表示する
$headers = apache_request_headers();
foreach ($headers as $header => $value) {
echo "$header: $value <br>\n";
}
実行すると以下のようになります。
X-Real-IP: （IPあどれす）
LISTEN-IPADDR: xxxxxxx
Authorization: xxxxxxxxx
Upgrade-Insecure-Requests: 1
DNT: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Referer: http://mzashop.com/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Accept以外は不要なので、\$headers[“Accept”]でOK。
レンタルサバーなどroot権限がない場合のwebp一括書換
ブログページなど、ページ情報をPHPで利用しているなら一括で拡張子を書き換える方法。ただし、webp画像がなければ当然画像取得エラーになるので注意。
PHP
//ページのHTMLを$contnstにセット
$contnst='
<html>
<head>
<title>テストタイトル<title>
</head>
<body>
<p>--webp書換テスト----</p>
<p>単純に拡張子と”の部分の文字列ををまとめて置き換える作業</p>
<img src="https://img.studybank.net/img/programming/post/2021/2021_0416_01.png" ><br>
<p>HTMLごと書き換えているのでwepb画像で表示出来たと思う</p>
<p>------</p>
</body>
</html>
';
//Acceptヘッダーにwebp画像が含まれるか確認し拡張子を書換る
$headers = apache_request_headers();
if(strpos($headers["Accept"],'image/webp') !== false){
$contnst = str_replace('../img/uploads/2021/', '../img/uploads/2021_webp/', $contnst ,$n1);//ファイル名を書き換える
$contnst = str_replace('.jpg"', '.webp"', $contnst ,$n1);//拡張子を書き換える
$contnst = str_replace('.png"', '.webp"', $contnst ,$n2);//拡張子を書き換える
//$n1と$n2は置き換えた回数
}//
echo "".$contnst ."<br><br>\n";
