FED实验室 - 专注WEB端开发和用户体验

前端开发中合理选用图片格式

CSS(3) 煦涵 6095℃ 0评论

一、GIF,PNG,JPG图片的不同

在前端开发切图中常常会涉及到好多种图片的保存,具体选用何种格式来保存来保存图片,需要根据图片色彩及大小来选择。具体的对比看下面表格:

类型 压缩方式 色彩通道 透明度 是否支持动画 压缩算法 多图层
PNG-8 无损 索引256色 索引全透明 逐行扫描
PNG-24 无损 真彩16.7million色 Alpha半透明(IE6背景灰色) 逐行扫描
PNG-32 无损 真彩16.7millon 色 Alpha半透明(IE6背景灰色) 逐行扫描 Firework中可编辑
GIF 无损 索引256色 索引全透明 支持 逐行扫描
JPG 有损 真彩16.7millon 色 8*8

二、矢量图和位图

矢量图是一种缩放、旋转不失真的图像格式,无最小单位。存储的文件较小,但是很难表现出色彩丰富逼真图像效果,常用的图片格式为AI、CDR、RAW等。

位图(栅格图/像素图)是一种缩放、旋转会失真的图像格式,最小单位是像素,图像色彩表现较丰富,常用的图片格式有JPG、PNG、GIF、BMP、TIFF等。

三、有损压缩和无损压缩

有损压缩是对图像本身的改变,在保存图像时保留了较多的亮度信息,而将色相和色纯度的信息和周围的像素进行合并,合并的比例不同,压缩的比例也不同,由于信息量减少了,所以压缩比可以很高,图像质量也会相应的下降。

无损压缩是对文件本身的压缩,和其它数据文件的压缩一样,是对文件的数据存储方式进行优化,采用某种算法表示重复的数据信息,文件可以完全还原,不会影响文件内容,对于数码图像而言,也就不会使图像细节有任何损失。

四、总结

综上,每种图片格式都有各自的优缺点,没有最好的图片格式可以适应所有场景,下面看看各种图片格式的总结:
打印图形
TIFF是打印行业专业人士的最佳和唯一选择。它有能力读取CMYK和YcbCr颜色,加上其高密度像素的存储能力,从而使其成为设计师、摄影师、出版商的唯一选择。

Web图形
PNG、JPEG、GIF是Web最友好的三种图片格式。当你需要图片较小,比如在线上传文件时,如果你不介意牺牲点儿图片的质量,JPEG是一个不错的选择。如果你需要较小的图片,同时又想保证图片的质量,可以使用PNG。GIF是最坏的选择,虽然它的文件非常小,加载非常快。当然如果你想增加动画效果,无疑使用GIF格式比较合适。

PC & MAC兼容
如果你想跨平台兼容比较好的话,JPEG是最好的选择。

Logo & 艺术线条
JPEG应该是最坏的选择,它往往会增加假像和模糊的文字、线条和边缘。同时它也不支持透明,这一点logo和icon是经常需要的。GIF是一个不错的选择,但是与TIFF、PNG格式相比却相形见绌。TIFF和PNG图片是无损压缩的,可以存储尽可能多的信息,它们不限制与256种颜色。它们不会给文件增加假像,能够保持logo或线条的锐利与简洁。

剪贴画
GIF是保持剪贴画和绘制图形最好的图片格式,它只使用很少的色彩和精确的线条与形状。

看看同张图片不同格式的对比图(图片来自here
different-image-format

五、参考链接

1. GIF, JPG and PNG – What’s the Difference?
2. Image File Formats - JPG, TIF, PNG, GIF Which to use?
3. Different Image Formats – And When to Use Them

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (4)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 受用
    岸林风2015-05-11 13:57 回复