WebP是Google在2010年提出的一种新的图像格式。对于包含大量图片的网站,大多会使用WebP格式的图片,这样不仅可以减少流量带宽,还可以减少用户访问的加载时间,提高用户体验。 目前,WebP已经成为主流网站青睐的图像格式。
既然WebP这么好用,那么如何在网页中使用WebP图片呢? 这其实很简单。 我们可以通过html代码在网页中使用WebP格式的图片。
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="image">
</picture>
在上面的代码中,<picture> 元素包含了两个 <source> 元素和一个 <img> 元素。<source> 元素用于指定不同格式的图片,<img> 元素则是在所有格式的图片都无法显示时显示的默认图片。替换:对于不支持 WebP 格式的浏览器,可以使用 JavaScript 进行检测和替换。
var img = new Image();
img.onload = function() {
if (img.width > 0 && img.height > 0) {
document.getElementById('my-img').src = 'image.webp';
}
}
img.onerror = function() {
document.getElementById('my-img').src = 'image.jpg';
}
img.src = 'image.webp';
Javascript 利用canvas可以直接将 jpeg、png 转换为 webp,示例代码如下:
/**
* 根据 jpeg、png File 文件对象,获取 webp 格式的 File 文件对象
* @param {File} imageFile jpeg、png图片文件对象
* @returns image/webp File
*/
const getWebpFileByImageFile = imageFile => {
const base64ToFile = (base64, fileName) => {
let arr = base64.split(','),
type = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, {
type
});
};
return new Promise((resolve, reject) => {
const imageFileReader = new FileReader();
imageFileReader.onload = function(e) {
const image = new Image();
image.src = e.target.result;
image.onload = function() {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
resolve(base64ToFile(canvas.toDataURL("image/webp"), imageFile.name.split(".")[0] + ".webp"))
}
}
imageFileReader.readAsDataURL(imageFile)
});
}
该工具目前仅支持转换为webp、jpeg、png的格式。
地址入口:https://www.fly63.com/tool/imgformat/
webp是一种同时提供了有损压缩与无损压缩的图片档案格式,同质量的前提下,WebP体积大约只有JPEG的1/3,对于采用大量图片的网页,WebP格式可以节省大量带宽,大幅提升网页加载速度。
因为不是所有浏览器都支持WebP格式,我们就有两种思路:一个是只在支持WebP格式的浏览器中使用WebP格式;一个是让不支持WebP格式的浏览器可以支持WebP。
我们都知道,WebP 是 Google 推出的 WebP 图片格式,它是一种支持有损压缩和无损压缩的图片文件格式,根据Google测试,相同的图片,WebP 格式的图片均能比 PNG,JPG 格式的图片节约不少体积,但是其兼容性不是很好,如下:
webp 是目前 Web 比较流行的解决方案,相对于 Jpeg/png, 基于 VP8 的压缩,有着非常不错的压缩率。比较基础的方法,还是检测 UA 白名单来说,毕竟这些版本都是很早就支持。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!