运营商为2021年5G建设蓄力

SVG

可伸缩矢量图形(Scalable Vector Graphics)，顾名思义它是矢量的，而非光栅格式。区别于光栅格式的依靠像素点来存储图像，矢量图是通过XML格式来数据化的记录图像的信息。所以 SVG 相对于光栅格式的图像具有以下优势：

• 任意伸缩图像，而不会破坏图像的清晰度和细节。
• 完全支持 DOM，以及 JavaScript 能够很好的访问到它。
• 总体来讲，SVG的文件会比 GIF 或 JPG 的会小很多。

就像其它矢量格式，SVG 图片能不丢失任何细节地放大到任何大小。打个比方，同一个图标，可以以多种尺寸使用，并且在任何屏幕分辨率(比如 Retina 显示器)中都将看起来很清晰，而不需要存成多个文件。比如下面这个这个图对比，右边的是矢量图，左边的是其他格式图片：
 

从上图这个图中，我们可以从不同角度得出一些结论：

• PNG 8 格式的图片颜色过度处理得很突兀，能看到很明显的波浪褶皱，这就是因为它最多只能存储256种颜色导致的，所以PNG 8不适合用于存储颜色复杂的图像。相反，由于其相对于 PNG 24 或者 PNG 32 有先天的存储体积小优势，所以它非常适合应用于图标、颜色简单的或透明的图像上。
• 对比100%质量的 JPG、55%质量的 JPG、PNG 24 和 PNG 32，肉眼上看他们的图像表现效果都差不多，但是各自所占用的存储空间却是差得有些离谱。压缩前，当属55%质量的 JPG 占用存储最小;压缩后，PNG 24 和 PNG 32 一样，会比55%质量的 JPG 小一些，但是由于 PNG 32 支持透明，所以对于颜色丰富的图像建议用 PNG 32 格式导出，然后用压缩工具压缩一下即可。
• 对比压缩前后的 PNG 24 和 PNG 32 两者的存储体积相差巨大，但是表现效果却相差无几，所以用于 web 上的 PNG 24 或 PNG 32 图像一定要记得压缩，这对于客户端的性能优化将提供非常大的帮助。

GIF

图形交换格式(Graphics Interchange Format)也是一种光栅格式，最多只能存储256种颜色，支持透明度，而且在 IE 6 下也支持得很好，唯一美中不足的是除了 Fireworks 8 导出的 GIF 不透明格式外，所有的其他 GIF 格式的图片都存在锯齿。
 

PNG 32 图片的透明区域在 IE 6 下将不再透明，而是颜色值为 f0f0f0 的灰色填充，在更高级版本的 IE 下是正常的。PNG 32 图片不会有锯齿。

PNG压缩

本文前面提到了 JPEG 在照片片这类颜色丰富的图像上的优秀表现，所以现在将它和 PNG 的3种格式进行对比。主要是对比压缩前后的存储体积以及表现效果等方面。用的是免费的在线压缩工具 TinyPNG，这个工具可以压缩 JPEG 和 PNG 格式。

（编辑：四平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!