HTML 和 CSS 使用 SVG 图像对网站性能有好处吗？ HTML5 玛丽亚·安东尼埃塔·佩尔纳 2017 年 3 月 27 日 分享 用于网站性能的 SVG 可扩展矢量图形(SVG)成为 Web 图形格式的绝佳 选择有几个充分的理由。文件大小相对较小无疑是其中之一。然而，这种说法并非没有一定的限制。让我们更深入地研究一下。 本文是与SiteGround合作创建的系列文章的一部分。感谢您对合作伙伴的支持，使 成为可能。 矢量图像的好处 光栅图像（例如.JPEG、.PNG 等）由排列在网格中的方形像素组成。因此，图像越大，使用的像素就越多，从而导致文件大小增加。 不仅如此，基于像素的图形也不能很好地缩放。这就是我的意思。这是花朵的 模糊的表面以及图像的整体质量如何显着下降。 由于视网膜屏幕现在在用户设备上很常见，因此您的网站上出现这样的光栅图像的风险很高。
使用 SVG 优化工具压缩更多字节
种替代方案是提供高分辨率图形，这当然会严重影响网络性能。 和元素srcset_picture 幸运的是，现代 HTML 通过响应式图像（即 thesrcset和 the元素）来拯救，picture在撰写本文时，除 EI11 和 Opera Mini 之外，所有主要浏览器的最新版本都 马来西亚 WhatsApp 号码数据 支持这两种图像。 响应式图像的目标是为所使用的设备提供最佳质量的图像。这涉及提供各种分辨率的可用图像，但使浏览器能够仅加载适合访问设备功能的一张图像。 如果您想更多地了解这些技术的工作原理虽然根据访问设备只会提供一份图像副本，但这两种技术都要求您准备该图像的多个副本并将其上传到服务器。
启用压缩 SVG 文件的传送
与分辨率无关的另一个含义是，您不需要为不同的设备准备同一图像的不同副本；一种尺寸适合所有人，并且在任何屏幕分辨率下看起来都非常清晰。 也就是说，有些因素可能会对 SVG 文件大小产生负面影响，即图像的复杂程度。绘图 阿富汗 WhatsApp 数据 指令越复杂，文件大小越大。 对高性能 SVG 文件的建议 一般来说，用于 Web 使用的 SVG 非常简单，例如徽标、地图、图标等。与光栅图像相比，这种简单的 SVG 图像的文件大小可能较小。 但是，您可以采取一些步骤来进一步优化文件大小，并确保您的访问者在您的网站上获得出色的体验。 这里有一些建议供您参考。