让浏览器全面兼容WebP图片格式

WebP格式

WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩。与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%。
Wiki
百度百科

它是一个开源项目,我们可以在此获取其中源码,以及相关工具。

浏览器支持

显然,Google浏览器Chrome首先引入,此外Opera 11.10也增加对WebP的支持。

如果你能看见下面的图片,说明你的浏览器支持WebP。

这是一副WebP图片

支持更多的浏览器!

WebP的优势显而易见,但缺少主流浏览器的支持,使得它目前仍然无法推广。但这并不妨碍我们尝试!

大多数浏览器自身无法解码WebP格式,但可以交给我们来实现!虽然网页脚本无法胜任,但借助Flash技术,我们完全可以实现高效快速的解码。

并且,几乎所有的浏览器都支持Flash...

WebP插件

当前版本共3个文件: WebP.js , WebP.swf 和 WebP.htc。在此下载打包文件。

在<body></body>之间插入如下代码,即可使用WebP了。

<script type="text/javascript" src="WebP.js"></script>

插件将会捕捉页面中使用WebP格式的img元素,并用Flash进行替换。图像的解码及显示都在Flash中完成,因此目前版本对CSS设置的背景图片无效。

当然,作为JPEG格式的替换,只有对较大的图像使用才有意义,否则过多的解码将消耗大量的资源。

Demo1:最简单的样列

<img src="Test.webp" />

在新窗口中预览

Demo2:保留原始属性

<img src="Test.webp" width="250" height="150" title="这是一副WebP图片!" style="border:red 2px solid" />

在新窗口中预览

Demo3:保留原始样式
<style>
img
{
	filter: alpha(opacity=50);
	opacity: 0.5;
}

.t
{
	border: blue dotted 2px;
}
</style>
<img class="t" src="Test.webp" />

在新窗口中预览

Demo4:支持动态载入
<div id="con"></div>
<script type="text/javascript">
var d = document.getElementById("con");
function add()
{
	d.innerHTML = "<img class='t' src='https://i-blog.csdnimg.cn/blog_migrate/e8e5ff8c776cbef4cb93510a003d1d96.webp?x-image-process=image/format,png' title='Hello~' />";
}
function del()
{
	d.innerHTML = "";
}
</script>
<button οnclick="add()">载入</button>
<button οnclick="del()">移除</button>

在新窗口中预览

本文转自:http://www.etherdream.com/WebP/

转载于:https://www.cnblogs.com/yjken/p/3922299.html

### 回答1: WebP是一种新型的图格式,由于其良好的压缩性能和快速的加载速度,正在逐渐被广泛应用。Isparta作为WebP格式的开发者,一般不会在WebP格式方面出现严重的错误或故障。 但是,如果WebP格式失败了,可能是由于以下原因: 1.文件格式错误:WebP格式可能会因文件格式错误而失败。比如说,文件大小超过WebP的最大文件限制,或者文件格式出现错误。 2.编码错误:编码错误可能导致WebP格式的失败,例如过度压缩或将其压缩到无法使用的级别。 3.软件或技术问题:WebP格式的失败可能与软件或技术问题有关。例如,可能存在某些不兼容的软件或技术问题,导致WebP格式無法正常運作。 总之,如果WebP格式失败了,需要您进一步排除问题原因并采取相应的解决措施。 ### 回答2: Isparta是一种用于图像压缩的格式,它与其他常见的格式(如JPEG和PNG)相比,具有更好的压缩比和更小的文件大小,因此在网页加载速度方面有很好的效果。其中包含了一种称为webp的变体,这种格式是由Google开发的,并被认为是一种更加现代化和高效的图像格式。 然而,尽管webp有很多优点,但在某些情况下也可能会出现失败的情况。其中一个常见的问题是浏览器兼容性。尽管现代浏览器已经开始支持webp格式,但一些老旧的浏览器仍然无法读取这种格式,特别是在移动设备上的情况更加明显。 另一个可能的原因是webp格式的编码不够稳定。虽然webp的目标是提供高品质、高压缩比的图像,在某些情况下,压缩的过程可能导致图像出现质量问题或格式失效。场景包括对JPEG图像进行再压缩、处理低质量图像或者使用非常规方法进行压缩等。 总的来说,webp格式的失败可能是由于多方面的原因造成的,包括浏览器兼容性问题和编码不稳定性等。因此,在使用webp格式的时候,需要考虑到这些问题,并选择恰当的方法和工具进行处理,以确保图像显示质量的稳定性和兼容性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值