是使用 SVG 还是 JPG/PNG 图像来提高页面性能？
Is it better to use SVG or JPG/PNG images for page performance?
我想知道我是否应该将我的 JPG 和 PNG 图像转换为 SVG，因为我相信使用 SVG 图像，我的页面加载速度会更快，我确定吗？使用 SVG 格式的图像更好吗？
是否可以将 JPG/PNG 转换为 SVG？
SVG 比 JPG/PNG 更好，但如果您没有使用 svg 准备好图像，您可以将其用作原始格式。
下面是 SVG 优于原始格式的原因。
- PNG 可以处理较大的文件大小，通常在满足 HDPI 显示时。如您所知，文件越大，到 render/load.
的速度就越慢
- SVG 也有利于辅助功能和搜索引擎优化。 Google 索引的 SVG，这是个好消息。 SVG 内容无论是在独立文件中还是直接嵌入 HTML 中都会被索引。
这些是针对不同工作的不同工具。
SVG 用于矢量图像。矩形、直线、椭圆和所有你可以从原始对象组合在一起的东西。矢量图像可以缩放到几乎任何大小并且看起来仍然不错，因为它们不是由像素组成的。它们是关于在屏幕上绘制内容的一组说明。
PNG 用于光栅图像。表示图像的像素网格。这些无法在不损失质量的情况下进行缩放，因为自然而然，您所能做的就是使像素更大，或者对图像重新采样，从而使其在质量上具有不同程度的模糊度。 PNG 非常适合需要 alpha 通道、无损图像质量或具有大量纯色的情况 side-by-side，例如计算机屏幕截图。
JPEG 适用于照片，也适用于光栅图像。它是有损的，旨在利用人类视觉的工作原理来减小现实世界图像的文件大小。
您不会将 JPEG 用于矢量徽标...您会使用 SVG。您不会将 JPEG 用于屏幕截图。您不能将 SVG 用于屏幕截图，因为它是光栅图像。
SVG 是一种很好的矢量图形格式。最大的优势是它在所有尺寸/分辨率/像素密度下的清晰度和质量。如果您有一些从矢量源文件（*.AI、*.EPS、*.PDF 等）导出的 JPG 或 PNG 图像，我会考虑将它们直接保存为 SVG（例如图标或简单形状图形） .如果没有源文件，可以尝试vectorize it.
但是，性能上没有显着差异。在所有这些格式中，您可以同时拥有小的/优化的图像和非常大的/缓慢加载的图像。如果您关心光栅图像的加载时间，您可以尝试像 TinyPNG or JPEGmini.
这样的图像优化器
我想知道我是否应该将我的 JPG 和 PNG 图像转换为 SVG，因为我相信使用 SVG 图像，我的页面加载速度会更快，我确定吗？使用 SVG 格式的图像更好吗？ 是否可以将 JPG/PNG 转换为 SVG？
SVG 比 JPG/PNG 更好，但如果您没有使用 svg 准备好图像，您可以将其用作原始格式。
下面是 SVG 优于原始格式的原因。
- PNG 可以处理较大的文件大小，通常在满足 HDPI 显示时。如您所知，文件越大，到 render/load. 的速度就越慢
- SVG 也有利于辅助功能和搜索引擎优化。 Google 索引的 SVG，这是个好消息。 SVG 内容无论是在独立文件中还是直接嵌入 HTML 中都会被索引。
这些是针对不同工作的不同工具。
SVG 用于矢量图像。矩形、直线、椭圆和所有你可以从原始对象组合在一起的东西。矢量图像可以缩放到几乎任何大小并且看起来仍然不错，因为它们不是由像素组成的。它们是关于在屏幕上绘制内容的一组说明。
PNG 用于光栅图像。表示图像的像素网格。这些无法在不损失质量的情况下进行缩放，因为自然而然，您所能做的就是使像素更大，或者对图像重新采样，从而使其在质量上具有不同程度的模糊度。 PNG 非常适合需要 alpha 通道、无损图像质量或具有大量纯色的情况 side-by-side，例如计算机屏幕截图。
JPEG 适用于照片，也适用于光栅图像。它是有损的，旨在利用人类视觉的工作原理来减小现实世界图像的文件大小。
您不会将 JPEG 用于矢量徽标...您会使用 SVG。您不会将 JPEG 用于屏幕截图。您不能将 SVG 用于屏幕截图，因为它是光栅图像。
SVG 是一种很好的矢量图形格式。最大的优势是它在所有尺寸/分辨率/像素密度下的清晰度和质量。如果您有一些从矢量源文件（*.AI、*.EPS、*.PDF 等）导出的 JPG 或 PNG 图像，我会考虑将它们直接保存为 SVG（例如图标或简单形状图形） .如果没有源文件，可以尝试vectorize it.
但是，性能上没有显着差异。在所有这些格式中，您可以同时拥有小的/优化的图像和非常大的/缓慢加载的图像。如果您关心光栅图像的加载时间，您可以尝试像 TinyPNG or JPEGmini.
这样的图像优化器