WebP画像ファイルの生成に対応について

[atushi.igar...@gmail.com]

いつもお世話になっております。

Ver. 2.11.22から

「WebP画像ファイルの生成に対応」との記載を見つけたのですが、Ver. 2.11.22以降のバージョンにしていれば、デフォルトで画像は、対応ブラウザによっってはWebP画像に変換されているという認識でよいのでしょうか？

それとも、どこかで設定すると、そうなるということでしょうか？

[伊藤淳]

お世話になっております。

WebPですが、基本的にはjpegやpngのまま画像を書き出し、WebP対応できるサーバーであれば、同時にWebP画像も書き出す様になっております。

またブラウザによっては、WebPに対応していないブラウザもあるため、.htaccessでどちらの画像をつかうか振り分ける様にしております。

# webpフォーマット画像対応
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
# Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp

サーバーによっては、WebP画像書き出しに対応しておりませんので、archivesやmediaディレクトリをみて、添付画像のよに、通常ファイル名.webp というファイルができているか確認してみてください。

ご不明点ありましたらお聞きください。

よろしくお願いいたします。

2020年12月2日水曜日 10:03:56 UTC+9 atushi.igar...@gmail.com:

[atushi.igar...@gmail.com]

伊藤様へ

早速ありがとうございました。

すごい！！。感動しました。a-blog cms はすごい。

自動的にWebP画像も書き出す様になっているとは思いませんでした！

指定のフォルダを調べてみたら、.webpの拡張子のある画像がありました！！

ただ、全てが「.webp」になっている訳でもないようですが、これは画像によって書き出せないものがあるということでしょうか？

画像のアップロードの仕方によって、「.webp」にならないものが出てくるのでしょうか？？

あと、最近のSafariは「.webp」対応したようですが、これも「.htaccess」を書き換えなくても自動的に、判断してくれるのでしょうか？？

2020年12月2日水曜日 15:51:58 UTC+9 伊藤淳:

[伊藤淳]

お世話になっております。

ありがとうございます！

> ただ、全てが「.webp」になっている訳でもないようですが、これは画像によって書き出せないものがあるということでしょうか？

> 画像のアップロードの仕方によって、「.webp」にならないものが出てくるのでしょうか？？

基本的には、png, jpeg画像はwebpも書き出すようになっているはずです。あとはアップロード時や、校正オプションのリサイズイメージの時に生成するので、

バージョンアップ前の画像などは、webp画像は書き出されていないと思います。

> あと、最近のSafariは「.webp」対応したようですが、これも「.htaccess」を書き換えなくても自動的に、判断してくれるのでしょうか？？

.htaccessでブラウザからきたacceptヘッダーをみて、ブラウザがwebpを許可している場合だけ、webp画像を返す様にしていますので、webpに対応しているブラウザは自動的に

判断してwebp画像が出力されるようになっています。なので最近のsafariもwebp画像が返るようになっていると思います。

よろしくお願いいたします。

2020年12月2日水曜日 17:14:41 UTC+9 atushi.igar...@gmail.com:

[atushi.igar...@gmail.com]

伊藤様へ

すみません。

WebPに関してなのですが、以下のサイトをChromeで表示し、「ブラウザのソースを見る」で、表示させても、ブログ内で使用している画像はWebPになっていないようでなんです。

これは、「ブラウザのソースを見る」でその画像のパスがWebPになっていなくても、実際にはWebPが表示されているということになるのでしょうか？？

なお、FTPで確認すると、ちゃっと以下のWebP画像が生成されていることも確認しました。

/media/004/202011/mode3_w700-IMG_1354.jpg.webp

あと、.htaccessファイル内にも、その変換の記述があることも確認しています。

■ブログページ

https://www.zanmai.info/projectlog/hata/entry-840.html

■画像のパス

<img class="js-lazy-load columnImage"
src="/themes/zanmai/images/placeholder/image.svg"
data-src="https://www.zanmai.info/media/004/202011/mode3_w700-IMG_1354.jpg"
width="700"
height="524"
alt="打ち合わせの様子">

2020年12月2日水曜日 17:49:37 UTC+9 伊藤淳:

[伊藤淳]

お世話になっております。

リクエストする時は、jpg, png のパスそのままでアクセスするようになっています。

サーバー側で、webp画像があり、ブラウザがwebpを許可している場合に、リライトして webp画像のほうをレスポンスする流れとなっております。

なので、ソースをみてもこの段階ではjpg,pngのままとなります。

webpの確認方法ですが、Chromeでしたらインスペクタのネットワークタブを開き、画像の箇所をみると添付画像のようにwebpの場合、Typeがwebpになっているので確認することができます。

お試しいただけますでしょうか。

2020年12月3日木曜日 10:08:13 UTC+9 atushi.igar...@gmail.com:

[atushi.igar...@gmail.com]

伊藤様へ

早速のご返答ありがとうございます！

見たら、ちゃんとwebpになっていました！

そういうことなんですね。安心しました。ありがとうございました。

2020年12月3日木曜日 10:15:49 UTC+9 伊藤淳: