Memo

環境によってWebP画像を表示
■WebP

WebP - Wikipedia
https://ja.wikipedia.org/wiki/WebP

そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
https://webdesign-trends.net/entry/13745

次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
https://ics.media/entry/201001/

WEBP変換ツール (jpg、pngとwebpを相互変換)
https://lab.syncer.jp/Tool/Webp-Converter/■画像の振り分け表示

WebPと従来の画像を正しく振り分ける.htaccessファイル - アイデアマンズブログ
https://blog.ideamans.com/2019/02/webphtaccess.html

nginxにおけるWebP画像の選択的レスポンスの設定方法 - Qiita
https://qiita.com/miyanaga/items/94447efae0bf767b9f2b■nginxで実際に試したもの# vi /etc/nginx/conf.d/www.conf
# Acceptリクエストヘッダに image/webp が含まれていたら、変数 $webp_suffix に ".webp" を代入
# 含まれていない場合、$webp_suffix は空文字
map $http_accept $webp_suffix {
    default   "";
    "~*image/webp"  ".webp";
}

server {

    〜略〜

    # PNG・GIF・JPEGへのリクエストについて
    location ~* \.(png|gif|jpe?g)$ {
        # VaryヘッダとしてAcceptを返す
        add_header Vary Accept;
        # WebP対応ブラウザでは、image.png.webp、image.pngを探す
        # 非対応のブラウザでは、image.png、image.pngを探す
        # いずれもない場合は404を返す
        try_files $uri$webp_suffix $uri =404;
    }


# service php-fpm restart
# service nginx restart


以下のようなHTMLで画像を呼び出すと、IEでは「image.png」が表示され、Chromeでは「image.png.webp」が表示される
画像ファイルはあらかじめそれぞれを配置しておく

<img src="images/image.png">
Memo

Advertisement
