如何在web上完美使用JPG等图形格式

PNG的用途

PNG对于线条图，LOGO，图标和颜色较少的图像非常适合。颜色复杂的照片和图像使用PNG格式将生成巨大的文件。PNG另一个优点是支持透明背景。在这种情况下，即使

是复杂的图片仍然需要使用PNG，因为JPEG中无法实现图片透明。

PNG可以很好地用在线条作品，LOGO和图标上。

压缩PNG

因为PNG中的压缩算法是无损的，你可以选择性地减少它的颜色，从而通过外部工具减小图片尺寸。

对于大多数PNG使用场景（线图，图形，图标），256色是足够的。因此，可以通过减少调色板中的颜色数量来进一步减少文件大小。

GIF

图形交换格式（Graphics Interchange Format）也是一种位图格式，并且比本文中提到的其它格式都出现地更早。它于19年由Steve Wilhite创建, 在PNG创建前都是最流行的

8位图像格式。GIF与PNG具有类似的特性，但有一些缺点：

SVG

可伸缩矢量图形（Scalable Vector Graphics）与前面讲的栅格格式不同，顾名思义，它是矢量格式。这意味着它不会基于像素存储数据，而是通过记录坐标的形式存储图形信

息。SVG使用基于XML的语义化标签结构，这有点像HTML。由于是DOM结构，你可以通过ID获取SVG元素，并操纵它们。这带来了很多可能性，例如使用JavaScript和CSS

修改并对元素进行动画操作或者创建响应式图形。

就像其它矢量格式，SVG图片能不丢失任何细节地放大到任何大小。
SVG的用途

SVG在线条艺术，LOGO，图标，插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。在一些情况下，SVG和PNG都能很好地达到同一个目

的。对于线条艺术，SVG通常能生成较小的文件。但是这不是必然的，实际情况会根据矢量图像究竟有多少个锚点，它甚至可能会生成比PNG更大的文件。 SVG真正出色的地

方是数据可视化。由于可以使用JavaScript来操纵和创建矢量动画，诸如D3之类的库提供了无限的可能性.

压缩SVG

大多数情况下，使用如SVGz（GZipped SVG）等工具来压缩在Web网页中使用的SVG文件是不必要的。你可以（并且应该）在服务器上开启 Gzip 来实现压缩功能，虽然可能

效果寥寥。比较好的方法应该是通过清除SVG矢量图形中不必要的锚点、元素和属性来减少文件大小。锚点绘制了矢量图像，因此，你需要确保已移除的锚点不会影响矢量图

形的最终形状。如果您使用Adobe Illustrator编辑SVG，请确保使用导出>导出为...而不是文件>另存为...进行保存，因为这样才能生成一个最小化的文件，当然它还有其它优

点。在Sketch里, 注意不要使用不必要的文件夹，因为它们也会作为额外的标签保存到SVG中。

清理不必要的节点是缩减SVG尺寸的一种途径。

元素标签是包含在SVG文件内的所有内容，包括开始和结束标签。矢量编辑软件，如Adobe Illustrator和Sketch可能会到处含有非必要元素和属性的SVG。SVG压缩器可用于删

除这种多余的信息。