Img或SVG文件加载性能？

Question

我正在网站上进行图形设计。这是图形设计SVG文件或图像的最佳选择（PNG JPEG或其他任何img）我的意思是在HTML页面中快速加载响应。

注意：不要将SVG和图像文件的结果质量进行比较

喜欢这里的月亮

img

Moon SVG

＆＃13;

＆＃13;

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> 
<g> 
<circle stroke-width="3" stroke="#000" fill="#fff" r="16" cy="25" cx="25"/>
<path stroke-width="0" fill="#000" d="m25,9a16,16 0 0 1 0,32l0,-1.5a18,18 0 0 1 0,-29l0,-1.5z"/>
</g>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

取决于您对“最佳”一词的定义。

1. 如果 best 表示已向量化，则为SVG，请参阅the advantages and disadvantages of SVG。

2. 如果 best 表示压缩图片，则创建图片。

3. 如果 best 意味着非常互动，比如游戏，那么canvas和Javascript可能是最适合您的。

4. 如果 best 意味着一些一致的设计，那么使用HTML＆amp; amp; CSS（当我们谈论绘制半月时不是这种情况）。

因此，首先，您需要考虑您的设计是什么，并尝试使用HTML和CSS（使用媒体查询）实现一切，并确保您的图片得到很好的实施。请注意，如果你创建一个svg，你可以随时export it into an image，所以这可能是一个线索，你可以在等待进一步规范你的工作时暂时选择svg。

Answer 2

我想说这取决于图像应该达到的效果。请查看此链接，了解一些不同方法之间的比较：SVG icons vs. PNG icons in modern web sites。讨论讨论了有关文件大小，兼容性等的不同方法的一些优缺点。

（标题位于图标上，但它不仅适用于网页上的图标。）