我计划在我的电子商务website.It上使用WebP
,在灯塔测试的基础上可以大大提高性能。但问题是。我们仍然有使用不支持WebP
格式的iOS的用户。我需要更多关于适当的方式来交付图像,以及如何让用户下载图像在JPG的更多信息。
在我的服务器上。出于备用目的,我有两种格式。
发布于 2018-12-24 11:49:08
使用picture元素的最简单方法。浏览器将考虑每个子元素并从中选择最佳匹配;如果没有找到匹配,则选择元素的src属性的URL。
<picture>
<source srcset="/media/examples/surfer-240-200.webp" type="image/webp">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
编辑:根据Jaromanda的建议,我们应该在img标签本身中寻找回退,因为internet explorer不支持picture
元素。
<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
如果我们想确保浏览器只下载一个文件: WebP或备用图像,而不是两者都下载。我们可以使用data-in属性并基于浏览器支持分配适当的源代码,但在这方面,我们需要预先检查操作系统/浏览器。
<img data-jpg="image.jpg" data-webp="image.webp" id="myimg">
在JS中
let img = document.getElementById('myimg');
if(supportedBrowser){
img.src = img.getAttribute('data-webp');
}else{
img.src = img.getAttribute('data-jpg');
}
发布于 2018-12-24 12:31:45
要使用HTML元素提供WebP图像,可以使用<picture>
<picture>
<source srcset="path/to/img.webp" type="image/webp">
<img src="path/to/img.png">
</picture>
如果有大量的页面或太少的时间来编辑超文本标记语言代码,那么Apache的mod_rewrite模块可以帮助我们自动化向支持浏览器提供.webp图像的过程。如果文件不存在,则编辑或创建.htaccess
odule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
有关更多信息,请访问click Here
发布于 2021-06-14 19:46:03
另一种方法是使用:WebP图像也显示在不支持它们的浏览器上。使用这种方法,JPEG图像是动态生成的,您不必在服务器上同时保存这两种格式的图像!
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="https://unpkg.com/webp-hero@0.0.0-dev.27/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.0-dev.27/dist-cjs/webp-hero.bundle.js"></script>
<script>
var webpMachine = new webpHero.WebpMachine()
webpMachine.polyfillDocument()
</script>
</head>
<body>
This WebP image is also visible on Internet Explorer 10 and 11<br><br>
<IMG SRC="https://www.gstatic.com/webp/gallery/1.webp">
</body>
</html>
https://stackoverflow.com/questions/53908949
复制相似问题