使用SVG或JPG / PNG图像来提高页面性能更好吗？

我想知道是否应该将JPG和PNG图像切换到SVG，因为我相信使用SVG图像可以更快地加载页面，我确定吗？使用SVG格式的图像更好吗？可以将JPG / PNG转换为SVG吗？

这些是用于不同工作的不同工具。

SVG用于矢量图像。矩形，直线，椭圆以及所有可以由原始对象组合在一起的东西。由于矢量图像不是由像素组成的，因此它可以缩放到几乎任何大小，并且仍然看起来不错。它们是在屏幕上绘制内容的一组说明。

PNG用于栅格图像。代表图像的像素网格。不能在不损失质量的情况下对这些图像进行缩放，因为您自然可以做的就是增大像素或重新采样图像，从而使图像具有各种模糊度。当您需要Alpha通道，无损图像质量或并排有很多纯色（例如带有计算机屏幕截图的情况）时，PNG非常适合。

JPEG适用于照片，也适用于光栅图像。它是有损的，旨在利用人类视觉的工作原理来减少现实世界中图像的文件大小。

您不会将JPEG用于矢量徽标，而会使用SVG。您不会将JPEG用于屏幕截图。您不能将SVG用于屏幕截图，因为它是光栅图像。

SVG是矢量图形的绝佳格式。最大的优点是在所有尺寸/分辨率/像素密度下的清晰度和质量。如果您有一些从矢量源文件（* .AI，*。EPS，*。PDF等）导出的JPG或PNG图像，我会考虑将它们直接保存到SVG（例如，图标或简单形状的图形）。如果没有源文件，则可以尝试vectorize it。

但是，性能没有显着差异。在所有这些格式中，您都可以具有较小的/优化的图像和非常大的/缓慢加载的图像。如果您担心栅格图像的加载时间，可以尝试使用TinyPNG或JPEGmini之类的图像优化器。

SVG比JPG / PNG更好，但是如果您没有使用svg准备图像，则可以将其用作原始格式。

这就是为什么SVG比原始格式更好的原因。