如何正确地为不支持.webp的浏览器提供.JPG服务？
如何正确地为不支持.webp的浏览器提供.JPG服务？
提问于 2018-12-24 11:36:46
我计划在我的电子商务website.It上使用WebP，在灯塔测试的基础上可以大大提高性能。但问题是。我们仍然有使用不支持WebP格式的iOS的用户。我需要更多关于适当的方式来交付图像，以及如何让用户下载图像在JPG的更多信息。
在我的服务器上。出于备用目的，我有两种格式。
回答 5
Stack Overflow用户
发布于 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');
}Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53908949
复制相关文章
相似问题