使用SVG或JPG/PNG图像对于页面性能来说哪个更好？

Question

8

我在想是否应该将我的JPG和PNG图像转换为SVG格式，因为我认为使用SVG图像可以使我的页面加载更快，但是我是否确信？使用SVG格式的图像更好吗？而且有没有将JPG/PNG转换为SVG的可能性？

- Anne Rebb

我将关闭此问题，因为它不符合[help/on-topic]中所述的实际编程问题的范畴。 - Martijn Pieters

3个回答

2

SVG是矢量图形的一个很好的格式。最大的优点是它在所有尺寸/分辨率/像素密度下的清晰度和质量。如果您有一些从矢量源文件(*.AI, *.EPS, *.PDF等)导出的JPG或PNG图像，我建议直接将它们保存为SVG(例如图标或简单形状图形)。如果您没有源文件，可以尝试将其向量化。

然而，在性能方面没有明显的区别。在所有这些格式中，您都可以拥有小型/优化的图像和非常大型/加载缓慢的图像。如果您关心光栅图像的加载时间，可以尝试使用像TinyPNG或JPEGmini这样的图像优化器。

- j0ste

-1

SVG比JPG/PNG更好，但如果你没有准备好SVG图像，你可以使用它作为原始格式。

以下是SVG比原始格式更好的原因。

- wangdev87

3

这就像说叉子比勺子更好。这实际上取决于你需要做什么。如果只有一个“最好”的工具，我们就会只使用它。相反，我们有多种技术选择来解决不同的问题。 - Brad

1

@Brad，实际上不是这样的。你有没有见过jpg/png比svg更快的情况？ - wangdev87

1

如果我们已经准备好所有的SVG，我们肯定会使用SVG。但不幸的是，用户拥有的所有图像都不是SVG。 - wangdev87

1

我不明白那与此有何关联。你可以试着将一张照片转换成SVG格式，但你打算怎么做呢？是要将每个像素都转换成矩形吗？还是尝试将照片向量化并使其看起来像卡通？ - Brad

2

你在回答中写的是，“是的，SVG比JPG/PNG更好”，以及“有许多在线PNG->SVG转换器”。这就是问题所在。 - Brad

显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brad · Accepted Answer

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

SVG用于矢量图像。它包括矩形、线条、椭圆以及你可以从基本对象组合在一起的所有内容。由于它们不是由像素构成，因此矢量图像可以缩放到任何大小并仍然看起来不错。它们是屏幕上绘制什么的一组指令。

PNG用于光栅图像。这是代表图像的像素网格。由于自然情况下只能使像素变大或重新采样图像来保证质量，因此这些图像无法进行缩放而不会失去质量。当需要alpha通道、图像无失真质量或有许多相邻的纯色时，PNG非常适合，比如电脑截屏。

JPEG用于照片，也是光栅图像。它是有损压缩的，并且旨在利用人类视觉如何工作来减小真实世界图像的文件大小。

你不会将JPEG用于矢量标志...你会使用SVG。你不会将JPEG用于屏幕截图。你也不能将SVG用于屏幕截图，因为它是光栅图像。