HTML5网页,.webp图像,.jpg回退。使用HTML元素方法或在.htaccess方法中使用mod-rewrite规则。是否有任何与每种方法相关的陷阱或性能问题?
**1:**HTML元素示例。"'
<picture>
<source type="image/webp" srcset="img_pink_flowers.webp">
<source srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
2:.htaccess文件中的Mod-rewrite规则示例。
<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>
谢谢米洛
我已经尝试了这两个与一个简单的html文件包含1个图像和性能看起来相似。
1条答案
按热度按时间pbpqsu0x1#
如果你使用
.htaccess
方法,你的HTML标记会更轻。如果你有一个商店,例如有很多产品或照片库,这将是一个轻微的差异,因为较少的数据将被传输到客户端。在休息是一样的。