admin管理员组文章数量:1534871
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://m.elefans.com/dongtai/1718817736a729040.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论