html - 使用 SVG 或 JPG/PNG 图像来提高页面性能是否更好?

标签 html css svg jpeg

我想知道我是否应该将我的 JPG 和 PNG 图像切换到 SVG,因为我相信使用 SVG 图像,我的页面加载速度会更快,我确定吗?使用 SVG 格式的图像更好吗?
是否有可能将 JPG/PNG 转换为 SVG?

最佳答案

这些是用于不同工作的不同工具。
SVG 用于矢量图像。矩形、直线、椭圆以及所有可以从原始对象组合在一起的东西。矢量图像可以缩放到任何大小,而且看起来仍然不错,因为它们不是由像素组成的。它们是一组关于在屏幕上绘制什么的说明。
PNG 用于光栅图像。代表图像的像素网格。这些不能在不损失质量的情况下进行缩放,因为自然而然,您所能做的就是使像素更大,或者重新采样图像,从而使其质量具有不同程度的模糊性。 PNG 非常适合需要 Alpha channel 、需要无损图像质量或有很多纯色并排的情况,例如计算机屏幕截图的情况。
JPEG 用于照片,也用于光栅图像。它是有损的,旨在利用人类视觉的工作方式来减少现实世界图像的文件大小。
您不会将 JPEG 用于矢量徽标……您会使用 SVG。您不会将 JPEG 用于屏幕截图。您不能将 SVG 用于屏幕截图,因为它是光栅图像。

关于html - 使用 SVG 或 JPG/PNG 图像来提高页面性能是否更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64583456/

相关文章:

jquery - 页脚向上 float

css - 图片标签/元素显示问题

css - 仅使用 CSS 设置 SVG 图像的 viewBox

javascript - D3访问html属性

javascript - Angular SVG 操作在 IE10 中不起作用

javascript - 如何使用php查找手机号码的重复条目

html - 设置浏览器缩小时的水平滚动条

javascript - 页面自动刷新后不会发生表单重置

css - 使用 HTML 修复页面中间的图像

jquery - 为什么当我将显示设置为内联时图像会疯狂增长