使用画布会导致比使用图像更小的HTTP请求

Question

我知道将任何图像格式转换为SVG并不是一件容易的事，也不是我追求的复杂图像。让我解释一下为什么我在问这个问题。作为一名网页设计师，网站中有一些我常用图像的元素。包括简单的几何形状，fleur-de-lis，一些简单的徽标等。这些HTTP请求的成本相对较小（我们在这里谈论KB）。

但是，我感兴趣的是，如果使用svg或其他画布元素而不是简单图像的图像格式，这些请求可能更小。是否有任何研究或测试来比较SVG与图像？通过在我的页面上使用canvas作为简单元素，我是否可以使HTTP请求更小？如果是这样，这将是个好消息。我甚至可以开始创建画布图像库以重复使用并与他人共享。

Answer 1

我认为这取决于具体情况。

Sprites可以帮助..但是如果你的精灵包含一些简单的线但是必须是500px * 500px ...那么画布（甚至svg）确实会小得多。最重要的是，外部javascripts通常被缓存（甚至比图像更好）。在这方面，他们确实有助于减轻体重。

但是，如果你希望IE也“工作”，那么你可能需要开始提供一些html5 / canvas垫片，是的，这会增加重量。

修改
看看这个jsfiddle example（我掀起了this question），其中用径向渐变创建了一个全尺寸的“花岗岩”背景。 正如你所看到的（在源代码中），这是一个比单独的图像少得多的字节（并且总是像素完美）。

另一方面，它也（取决于复杂性）需要一些常规图像不会采用的计算时间（在将必要的字节下载到客户端之后）。

<强> EDIT2：
我找到了link，他们做了一点测试。

  

在我们的精灵示例中，原始SVG文件为2445字节。巴布亚新几内亚   版本只有1064字节，而双倍尺寸的PNG用于双像素   比率设备是1932字节。首次出现时，矢量文件   失去所有帐户，但对于较大的图像，光栅版本更多   迅速升级。

     

由于采用XML格式，SVG文件也是人类可读的。他们   通常包括非常有限的字符范围，这意味着   通过HTTP发送时，它们可以进行大量的Gzip压缩。这意味着   实际下载大小比原始文件小许多倍    - 轻松超过30％，可能更多。光栅图像格式如   PNG和JPG已经被压缩到最大程度。

然而，请注意所有这些仍然取决于图像的复杂程度：作为一个极端的反例...尝试描述一个福雷斯特的全彩色照片（叶子......）而不是简单的JPG ..

Answer 2

对于简单的形状，gzip SVG将非常小，在现代浏览器中它是quite usable。

但是，对于页面加载性能，请求数量是一个非常大的因素，因此如果您使用CSS sprite sheets而不管图像格式如何，您将获得显着的性能提升。

如果通过画布你的意思是将形状存储为JavaScript绘图命令（或基于某些JSON发布它们的库）那么与gzip压缩SVG相比，它不太可能节省大量带宽（SVG具有非常有效的格式来定义路径，并且gzip很好地消除了XML的开销。）

你必须等待JS加载并在整个文档中插入几个画布，或者在压缩生成的图像和构建data: URL时刻录CPU，所以我认为它不会比使用SVG或optimized PNG。

Answer 3

尺寸总是取决于具体的图像，抱歉，但你必须自己测试。一般来说无法对此进行比较。