浏览器加载 1000 像素 x 1 像素或 1 像素 x 1000 像素图像的速度会更快吗答案

【问题标题】：What will the browser load faster a 1000px x 1px image, or 1px by 1000px image浏览器加载 1000 像素 x 1 像素或 1 像素 x 1000 像素图像的速度会更快吗
【发布时间】：2011-07-25 20:43:45
【问题描述】：

似乎由于图像只是一块数据，因此它是相同的，但我对此没有定论，因为我不确定浏览器实际上是如何呈现图像的。

另外，单色图像的哪种图像格式加载速度最快？

【问题讨论】：

别担心。
如果你想在这个级别上计时，你可能不应该在浏览器环境中工作......
如果正在加载的页面加载了大量的这些 1000 像素乘以 1 像素，那么小的差异会加起来吗？

标签： image browser rendering pagespeed

【解决方案1】：

另外，单色图像的哪种图像格式加载速度最快？

如果您要加载单一颜色，使用带有background: #HEX; 的元素可能会更快一些，因为您不需要加载实际图像。

编辑#1：

我创建了两个黑色 jpg 图像，1000x1 和 1x1000 - 最终大小相同（399 字节）。

然后，我创建了一个 1000x1 的 png 图像和一个 1000x1 的 gif 图像（都用黑色填充） - 结果大小如下：

PNG-image: 96 bytes
GIF-image: 63 bytes

获胜者：GIF 图像，比 PNG 图像少 33 个字节的数据。如果您加载 1000 张与测试中使用的图像类似的图像，则使用 PNG 格式的开销将达到33 000 bytes（或32.22 kilobytes，如果您更喜欢该格式）。

【讨论】：

很公平，但这不是我要问的。从我读过的内容来看，gif 和 png 最适合纯色。它们之间会有什么区别吗？
我更新了我的帖子，提供了更多信息，希望它能解决一些问题！