admin管理员组文章数量:1565769
2024年6月20日发(作者:)
前言
前端开发中经常和图片打交道,那么熟悉各种图片格式的应用场景以及优劣势
对于我们尤为重要
图片类型
无损压缩:对文件的数据存储方式进行优化,采用某种算啊表示重复的
数据信息,能在保证图片的质量的同时降低图片的尺寸,png是其中的
代表,但尺寸相比原图减少不多。可以还原
•
有损压缩:在压缩的时候,去除了人眼无法识别的图片细节,图片质量
会下降,图片尺寸能得到很大程度的压缩。不可还原
•
无压缩:不会对图片进行任何压缩处理,能够精准的呈现原图片,例
如:BMP。开发中我们考虑到加载性能问题,几乎不会考虑这种图片
•
GIF图
优点
Gif图采用LZW压缩算法进行编码,采用无损压缩,这意味着图片在压
缩后质量不会受损。
•
Gif图1987年提出的,距今发展了几十年了,兼容性好。
•
支持透明度,GIF允许图像中的像素具有不透明和透明属性,这使得它
在创建带有透明背景的图像时非常有用。
•
支持动画,GIF支持简单的动画,可以用来创建循环播放的短动画,这
在网页设计和用户界面方面非常有用。
•
缺点
•
只能存储8位颜色索引,色彩复杂、细节丰富的图片不适合。
使用场景
适合简单的动画或者图标,例如:Logo、Icon、动图。
•
上报埋点时采用1 * 1像素的透明Gif图。
o
避免跨域,用图片上报而不是采用fetch或ajax去上报,用
Image的src不会存在跨域行为并且也会触发请求
o
兼容性好,所有浏览器都支持Image对象,即便浏览器不支持
XMLHttpRequest(例如古董级的IE),也能进行上报。相比与
acon兼容性更好。
o
体积最小,1*1的透明PNG是67字节,而Gif只需要43个字
节。同样的性能比PNG图片减少35%的流量。
•
支持透明,用Gif上报埋点最好是透明的,一是避免影响页面展
示,而是可以不用存储颜色索引,减少图片大小。
o
避免请求取消,ajax请求过程中离开页面会导致请求中断,最终
导致上报失败。然而Image的src不会中断。
o
PNG图
PNG默认是PNG-24格式
png-8
png-8相比gif对透明的支持更好,同等质量下,尺寸也更小。
•
非常适合作为gif的替代品。但png-8也一个明显的不足就是不支持动
画。
•
这也是png-8没办法完全替代gif的重要原因。如果没有动画需求推荐
使用png-8来替代gif。
•
png-24、png-32
图片质量和bmp差不多,在尺寸是比bmp更小。
•
尺寸上比JPG、GIF更大,当然质量更高。
•
优点:
支持透明度:PNG支持透明通道,允许创建带有透明背景的图像。
•
无损压缩:可以保持图片质量不损失细节。
•
广泛支持:PNG是一种通用格式,计算机或移动设备都支持。
•
缺点
复杂、色彩丰富图片尺寸大
•
不支持动画
•
适合场景
适合图形设计,可以保存文本、线条图案等高质量、透明图像。
•
相机设备,适合后期对图片进行处理。
•
JPG图
优点
有损压缩:JPG格式具备出色的压缩性能,可以显著的减少图像文件的大
小。这使得它在Web上显示一些质量要求不高的图像非常有用,减少加
载时间
•
广泛支持:是一种通用格式,在计算机以及手机设备上都广泛支持。
•
色彩丰富:JPG支持24位颜色深度,因此可以显示百万种颜色。
•
可调质量:用户可根据使用场景来调图片质量,较高的图片质量,会导
致图片尺寸较大。
•
缺点
不支持透明:不能够创建带有透明背景的图像,PNG或GIF更适合这种
情况。
•
损失性压缩:JPG是有损压缩,而且一旦压缩无法还原,会丢失一些细
节。
•
不适合带有文本或线条的图片: JPG压缩在处理文本和线条方面不如其
他格式好,可能会导致图像出现锯齿或模糊情况。
•
不适合Icon或者Logo:相对于PNG或GIF图,在尺寸上没有优势
•
使用场景
当Web要求图片加载速度和图片显示质量时,可以适当的降低下图片质
量减少图片尺寸来满足场景。
•
是用于要求色彩丰富的场景。
•
WEBP图
兼容性
介绍
WebP(Web Picture)是一种现代的图像格式,由Google开发,旨在提供高质
量的图像压缩和更快的加载速度。WebP支持有损和无损压缩,以及透明度,是
一种灵活的图像格式,适用于Web和移动应用程序。
对于前端来说,该图片格式常用于一种优化网页加载速度的手段之一。
优点
•
•
•
•
•
高压缩率:WebP 图像通常具有更小的文件大小,相对于传统格式如
JPEG和PNG,可以减少带宽使用和加速页面加载速度
高质量:即使在较高的压缩率下,WebP 图像通常能够保持较高的图像质
量,减少了压缩损失。
透明度:WebP支持透明通道,可以用于创建带有透明背景的图像,类似
于PNG格式。
动画:WebP还支持动画图像,允许创建小型、高质量的动画。
广泛支持:大多数浏览器都已经支持,但是目前低版本的Safri以及IE
还不支持。
缺点
•
兼容性:考虑到目前还不能完全放弃IE以及旧版本Safri,所以还不能
完全切到该图片格式。
使用场景
WebP 格式适用于网页开发,特别是那些需要快速加载的网站和移动应用
程序。
•
它适合用于图像库、图标、按钮、背景图像、动画以及需要高质量和小
文件大小的图像。
•
WebP 的无损压缩特性使它适用于医学图像、卫星图像、地图和其他需要
高质量和完整性的图像应用。
•
考虑到Webp格式还存在兼容性问题,开发中如何应用Webp图片格式?
•
•
•
•
•
•
•
如果图片资源存储在服务端,可以设计一套通用方案,在服务端根据
UserAgent判断是否支持Webp格式,如果支持返回Webp格式,否则返
回PNG格式。
如果你无法说服后端去实现上述方案还想采用Webp图片优化页面加载,
可以考虑维护两个格式的图片,然后使用picture标签去实现
referrer" referrerPolicy="no-referrer" src=""
alt="">
版权声明:本文标题:聊聊几种常见的图片格式Webp、GIF、PNG、JPG 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1718817736a729040.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论