【问题标题】:How to serve webp images using htaccess?如何使用 htaccess 提供 webp 图像?
【发布时间】:2021-08-29 02:59:57
【问题描述】:

如果图像(jpg 或 png)可用作 webp,我想提供 .webp 图像。如果不是,我想显示 jpg 或 png。

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)\.(jpe?g|png)(.*)$ $1.$2.webp [NC,L]

AddType image/webp .webp

我需要的最终 URL 是这样的:

"myurl.com/foo.jpg.webp" 

如果 webp 文件存在,如果不存在我需要:

"myurl.com/foo.jpg"

作为后备解决方案。

【问题讨论】:

    标签: regex .htaccess mod-rewrite url-rewriting


    【解决方案1】:

    如果请求的 URL 以jpegpng 结尾,您可以使用

    测试对应的webp
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^ %{REQUEST_FILENAME}.webp [L]
    

    如果你愿意,你可能会更严格

    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule \.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [L]
    

    如果条件和规则不匹配,请求将失败并按原样提供文件 (.jpg/.png)。

    【讨论】:

      【解决方案2】:

      有些浏览器不完全支持webp,你应该添加一个条件只发送到支持的浏览器:

      <Files *.webp>
          Header set Vary "Accept-Encoding"
          AddType "image/webp" .webp
          AddEncoding webp .webp
      </Files>
      
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_FILENAME}.webp -f
      RewriteRule ^(.*)$ $1.webp [L]
      

      【讨论】:

      • 你能给我一个提示如何更改代码以适用于文件:file1.jpg -> file1.webp file2.png -> file2.webp 吗?不是将 .webp 添加到完整文件名,而是将原始文件扩展名替换为 webp 扩展名?
      • 如果 myimage.jpg 和 myimage.jpg.webp 在同一个目录下,并且用户请求 myimage.jpg,路径仍然是 myimage.jpg,但会提供 webp 文件。它之所以有效,是因为浏览器不关心扩展,它关心类型 MIME 文件
      【解决方案3】:

      此 sn-p 检测浏览器是否为 supports WebP 图像,然后如果 .webp 文件与提供的 jpg/png/gif 位于相同的位置,则提供 .webp 图像而不是 jpg/png

      <IfModule mod_rewrite.c>
        RewriteEngine On
      
        # Check if browser supports WebP images
        RewriteCond %{HTTP_ACCEPT} image/webp
      
        # Check if WebP replacement image exists
        RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
      
        # Serve WebP image instead
        RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
      </IfModule>
      
      <IfModule mod_headers.c>
        # Vary: Accept for all the requests to jpeg, png and gif
        Header append Vary Accept env=REQUEST_image
      </IfModule>
      
      <IfModule mod_mime.c>
        AddType image/webp .webp
      </IfModule>
      

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-01-03
      • 1970-01-01
      • 2021-05-08
      • 2013-08-03
      • 1970-01-01
      • 1970-01-01
      • 2019-02-20
      相关资源
      最近更新 更多