聊一聊几种常用web图片格式:gif、jpg、png、webp
前言
在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图片格式:gif、png、jpg、webp进行一个基本的总结。
图片格式分类
- 无压缩。无压缩的图片格式不对图片数据进行压缩处理,能准确地呈现原图片。BMP格式就是其中之一。
- 无损压缩。压缩算法对图片的所有的数据进行编码压缩,能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。
- 有损压缩。压缩算法不会对图片所有的数据进行编码压缩,而是在压缩的时候,去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。
gif
采用LZW压缩算法进行编码,是一种无损的基于索引色的图片格式。由于采用了无损压缩,相比古老的bmp格式,尺寸较小,而且支持透明和动画。缺点是由于gif只存储8位索引(也就是最多能表达2^8=256种颜色),色彩复杂、细节丰富的图片不适合保存为gif格式。色彩简单的logo、icon、线框图适合采用gif格式。
jpg
jpg是一种有损的基于直接色的图片格式。由于采用直接色,jpg可使用的颜色有1600w之多(2^24),而人眼识别的颜色数量大约只有1w多种,因此jpg非常适合色彩丰富图片、渐变色。jpg有损压缩移除肉眼无法识别的图片细节后,可以将图片的尺寸大幅度地减小。
但是jpg不适合icon、logo,因为相比gif/png-8,它在文件大小上丝毫没有优势。
png-8
png-8采用无损压缩,是基于8位索引色的位图格式。png-8相比gif对透明的支持更好,同等质量下,尺寸也更小。非常适合作为gif的替代品。但png-8也一个明显的不足就是不支持动画。这也是png-8没办法完全替代gif的重要原因。如果没有动画需求推荐使用png-8来替代gif。
png-24
png-24采用无损压缩,是基于直接色的位图格式。png-24的图片质量堪比bmp,但是却有bmp不具备的尺寸优势。当然相比于jpg,gif,png-8,尺寸上还是要大。正是因为其高品质,无损压缩,非常适合用于源文件或需要二次编辑的图片格式的保存。
png-24与jpg一样能表达丰富的图片细节,但并不能替代jpg。图片存储为png-24比存储为jpg,文件大小至少是jpg的5倍,但在图片品质上的提升却微乎其微。所以除非对品质的要求极高,否则色彩丰富的网络图片还是推荐使用jpg。
png-24与png-8一样也支持透明。
webp
WebP图片是一种新的图像格式,由Google开发。与png、jpg相比,相同的视觉体验下,WebP图像的尺寸缩小了大约30%。另外,WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式,当然目前webp的还没有得到全面的支持。
看一下png图片与webp图片的对比:
详见png VS webp。再看一下webp的兼容性:
可以看到webp格式的支持度还不是很好,但是移动端的支持整体还可以。
总结
结合以上的介绍,我们了解了各种图片格式的优缺点及适用场景,我们再来通过一个图表来做一个抽象总结:
格式 | 优点 | 缺点 | 适用场景 |
---|---|---|---|
gif | 文件小,支持动画、透明,无兼容性问题 | 只支持256种颜色 | 色彩简单的logo、icon、动图 |
jpg | 色彩丰富,文件小 | 有损压缩,反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
png | 无损压缩,支持透明,简单图片尺寸小 | 不支持动画,色彩丰富的图片尺寸大 | logo/icon/透明图 |
webp | 文件小,支持有损和无损压缩,支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
最后附上Google关于图片格式的选择指南:
作者:快狗打车前端团队
链接:https://juejin.im/post/5d8c1b166fb9a04dda70855b
来源:掘金
http://www.taodudu.cc/news/show-6713859.html
相关文章:
- 前端开发中常见的图片格式
- 小游戏《塔防》开发(三)
- HTML5塔防游戏——《三国塔防》 - Yorhom's Game Box
- Vue中“组件”知识总结
- vue基础二(组件)
- 详细介绍VO(值对象)和PO(持久对象)的区别
- 现在空间不能用了
- POCO库 Foundation::Thread模块 多线程与线程池支持
- CentOS 7 firewall-cmd开放端口时出现bad port (most likely missing protocol)解决方案
- centos7 防火墙 错误 (坑)
- webmoney 接口
- 如何查看某个端口是否可以访问
- centos7 firewall-cmd查看端口是否开放及开放端口
- Centos系统服务器怎么查看端口是否开放?
- cmd下 怎样查看对方某个端口是否开放
- Linux查看所有对外开放的端口
- Linux查看某一端口是否开放
- ubuntu定时检测IP变化并发送邮件查看IP
- php 结合 PHPMailer 批量发送邮件。
- gensim实现LDA主题模型-------实战案例(分析希拉里邮件的主题)
- java验证电子邮件_Java字符串中电子邮件的简单易懂的验证
- linux从命令行发送邮件
- 用Java实现邮件收发
- 命令行邮件发送工具
- Springboot 集成邮件服务 QQ邮箱
- abap发送邮件函数
- 基于LDA模型的邮件主题分类
- android studio发邮件功能,Android发送邮件的方法实例详解
- zabbix3.0邮件报警
- LDA初探,希拉里邮件主题提取
聊一聊几种常用web图片格式:gif、jpg、png、webp相关推荐
- 聊一聊几种常用web图片格式:gif、jpg、png、webp?大厂必问
gif.jpg.png-8.png-24.webp的区别 (1)gif是一种无损的基于索引色的图片格式,支持透明和动画, 缺点是由于gif只存储8位索引,所以色彩,细节丰富的图片不适合保存位gif格式 ...
- 五种常用的图片格式及其是否有数据压缩的总结
五种常用的图片格式及其是否有数据压缩的总结 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:本文主要介绍五种最常见和最常用的图像格式:BMP,PNG,J ...
- 常用web图片格式:gif、jpg、png、webp
1.GIF(87年):使用无损压缩,支持256中颜色(一般叫8 bit彩色),支持单一透明色: 2.JPG(92年):使用的一种失真压缩标准方法,24 bit真彩色,内容比GIF丰富,不支持动画.不支 ...
- 前端开发中常用的图片格式
在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示一张图片 我们使用的计算 ...
- 定义一种新的图片格式.gnet
本人希望csdn可以定义一种新的图片格式,因为csdn一直是互联网中坚力量 本人发现,传统的图片格式已经不适应互联网时代了!!!,故本人发起定义一种新的图片格式,后缀名为 .gnet 互联网上的图片大 ...
- android中图片格式png,jpg和webp
转载自:https://blog.csdn.net/fzx19910714/article/details/72877934 大家都知道同样的尺寸,png格式的图片要比jpg图片大很多,为什么Andr ...
- php常用logo图片格式,4种最常用的Logo图片格式
设计logo完成后如何下载透明背景的logo?印刷要什么格式的logo?什么是logo源文件?如果我们不是专业设计师,这些不同的格式往往会让人感到不知所措.拥有如此众多的文件格式,要判断哪种格式适合用 ...
- Web中常用的图片格式
.ico:专用于PC网站标题栏中的图标 .jpg:色彩丰富细腻,压缩比高:不能透明和动画: 常用于人物.风景.物品等图片 .png:色彩比较细腻,压缩比较低,不能动画,图标 .gif:色彩不够丰富.压 ...
- 解决tkinter.PhotoImage()仅支持gif等几种不常用的图片格式问题
如果想用 ".jpg"文件格式,直接用下面的代码,会报"couldn't recognize data in image file "C:\Users\happ ...
最新文章
- Leetcode 50. Pow(x, n)
- Response.Redirect() 跳转中的ThreadAbortException
- 启动tomcat提示Could not create the Java virtual machine.
- 供销合作社对话中国农民丰收节交易会 谋定为农服务主业
- matlab 层次聚类
- Eureka简介与Eureka Server上
- java中集合类的转换_Java中的两个常用工具类及集合数组的相互转换
- 单调谐回路谐振放大器等效电路分析_手把手教你如何分析三极管电路
- latex填充段落之间的留白
- Python数模笔记-PuLP库(1)线性规划入门
- CSS自定义文件上传按钮
- jpa 表注释和字段注释_JPA注释–Hibernate注释
- ros下各个包中的map的格式
- 均值模糊调试遇到的问题
- java 调用阿里云中通快递查询示例
- 市面上常见的手机分辨率
- 【git 常用配置及常用命令】
- 人生无意义,才更值得过,推石上山的搏斗本身,足以充实一颗人心,认清生活的荒诞,对它报之以微笑,就是对抗荒诞的最好方式
- 修改dpr提高ECharts图表的清晰度
- Fomo3D 玩法中文版指南,Dapp 游戏热度超越加密猫CryptoKitties排名第一
热门文章
- 学习数据分析,有哪些好书值得读?都在这里了
- 如何打印两排、三排或任意多排的标签
- 使用ViewPager来加载图片和轮播视频
- Arm板子 Illegal instruction (core dumped)报错
- 工业控制应用程序二进制的秘密
- 优必选悟空智能机器人怎么读绘本_萌翻地表的AI机器人到底有多智能?优必选悟空机器人体验评测...
- 如何通过技术培训建设强有力的软件团队
- Java网络编程——基于UDP协议的聊天室
- 阅读是为了拓宽知识面,而写作才能沉淀
- 浙大远程教c语言在线作业答案,浙大远程教育_会计电算化_在线作业答案.docx