[html] webp与jpg、png比较，它有什么优劣势？如何选择？

优势更优的图像数据压缩算法 带来更小的图片体积肉眼识别无差异的图片质量支持有损和无损压缩支持动画 透明色彩丰富 24-bit颜色数劣势存在兼容性问题选择 当 图片较少 体积不大 且存在兼容性问题时,兼容性方法处理起来较为复杂 可以选择传统格式 当图片较多 且不存在兼容性问题或者兼容性方法处理起来较为简单时 便使用webp格式
兼容性处理
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与jpg、png比较，它有什么优劣势？如何选择？相关推荐

如何让Ubuntu系统支持WebP图片格式
如何让Ubuntu系统支持WebP图片格式本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP ...
国外方案组件化_网页webp解决方案
背景说明某个国际化项目.前端用的技术栈是vue全家桶,使用nuxt-ssr渲染. 项目遇到的问题项目中用到了大量的产品图片和比较大的banner图片.因为服务器在国外,也没有对静态服务器有相应的配 ...
[转]图片格式WEBP全面解析
前言不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
linux下PNG、JEPG、JPG、Webp图片格式互转
最近写文章的时候,发现PNG格式的图片太大了,加载比较慢,不知道从哪里听来说WebP格式,听说这种格式有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量.于是就想把这个图 ...
WebP图片格式处理和兼容使用
WebP图片格式处理和兼容使用用了这么久的WebP图片,最近在项目中发现对其了解得还是很不够,便以此文整理记录WebP相关知识点. (github:https://github.com/Michea ...
【前端】性能优化 - WebP
前言不管是PC还是移动端,图片一直是流量大头. 评价网站性能好坏的一个主要指标就是页面响应时间,也就是说用户打开完整页面的时间.基于JPEG还有PNG图片格式的网页,其图片资源加载往往都占据了页面耗 ...
悟空活动中台 - 基于 WebP 的图片高性能加载方案
本文首发于 vivo互联网技术微信公众号链接: https://mp.weixin.qq.com/s/rSpWorfNTajtqq_pd7H-nw 作者:悟空中台研发团队一.背景移动端网页的 ...
压缩算法——谷歌Webp
WebP适用场景: WebP是一种现代的图像格式,为网络上的图像提供优异的无损和有损压缩.使用WebP,网站管理员和网络开发人员可以创建更小,更丰富的图像,使网络更快. WebP无损图像的大小比PNG ...
浓缩的精华！从零开始带你认识最新的图片格式WEBP
编者按:相信走在前列的设计师已经知道了WebP这种图片格式,比起JPEG.PNG 和 GIF ,它能在保证图片精细度的同时缩小图片体积,在 Google 的明星产品如 Youtube.Gmail.Go ...

[html] webp与jpg、png比较，它有什么优劣势？如何选择？

[html] webp与jpg、png比较，它有什么优劣势？如何选择？

个人简介

主目录

[html] webp与jpg、png比较，它有什么优劣势？如何选择？相关推荐

最新文章

热门文章