[html] 你有使用过webp的图片格式吗？

webp格式的优势和兼容处理
优势更优的图像数据压缩算法 带来更小的图片体积肉眼识别无差异的图片质量支持有损和无损压缩支持动画 透明色彩丰富 24-bit颜色数兼容性处理
1.通过picture标签进行选择判断<picture><source srcset="img/pic.webp" type="image/webp"><source srcset="img/pic.jpg" type="image/jpeg"><img src="img/pic.jpg">
</picture>该种方法要求在每个要请求webp图片的标签下都要通过picture标签来进行兼容性处理，
同时注意该标签在IE的兼容性并不是很好，不过已经比webp的兼容性好一些。
2.通过服务端判断请求头中的Accept的值判断是否支持webp通过HTTP request header中是否存在Accept: image/webp来判断，
这种方法的缺点在于：很多时候我们的图片等静态资源都会放到CDN服务器上，在这个层面加上判断webp的逻辑会更麻烦一些
3.由浏览器端判断是否支持WebP格式if(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0){//  该浏览器支持WebP格式的图片}该种方法的原理为：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。1.如果画布的高度或宽度是0，那么会返回字符串“data:,”。2.如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。3.Chrome支持“image/webp”类型。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[html] 你有使用过webp的图片格式吗？相关推荐

[转]图片格式WEBP全面解析
前言不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
浓缩的精华！从零开始带你认识最新的图片格式WEBP
编者按:相信走在前列的设计师已经知道了WebP这种图片格式,比起JPEG.PNG 和 GIF ,它能在保证图片精细度的同时缩小图片体积,在 Google 的明星产品如 Youtube.Gmail.Go ...
如何在移动端使用WebP图片格式
前言在移动端,图片一直是流量大头,一个简单的运营网页,图片大小动不动就以MB为单位,为了加快网页呈现的速度,我们必须使用最适合图片质量,这里所说的合适指图片的清晰度和大小达到合格的要求. 前端常常会 ...
关于webp图片格式初探
前言不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
有多少种 “图片格式”？
我们知道,图片格式有很多种,已统计的有:JPG.JPEG.PNG.GIF.BMP.SVG.webp等等图片格式.图片所占内存 VS 页面加载性能.网站整体性能? 如何选择才有利于页面性能的优化? 哪 ...
webp的js插件_让浏览器全面兼容WebP图片格式
WebP格式 WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩.与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%. Wik ...
如何让Ubuntu系统支持WebP图片格式
如何让Ubuntu系统支持WebP图片格式本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP ...
【Android 安装包优化】WebP 图片格式性能测试 ( 测试 WebP 图片解码速度 | 测试 WebP 图片编码速度 )
文章目录一.测试 WebP 图片解码速度二.测试 WebP 图片编码速度三.参考资料测试结果 : WebP 格式图片 , 解码快 , 编码慢 , 占用空间小 ; 在解码速度上 , WebP 格 ...
【Android 安装包优化】WebP 图片格式兼容与性能 ( Android 中的 WebP 图片格式兼容问题 | Android 中的 WebP 图片格式性能 )
文章目录一.Android 中的 WebP 图片格式兼容问题二.Android 中的 WebP 图片格式性能三.参考资料一.Android 中的 WebP 图片格式兼容问题在 Android ...

[html] 你有使用过webp的图片格式吗？

[html] 你有使用过webp的图片格式吗？

个人简介

主目录

[html] 你有使用过webp的图片格式吗？相关推荐

最新文章

热门文章