【问题标题】: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 最适合纯色。它们之间会有什么区别吗?
  • 我更新了我的帖子,提供了更多信息,希望它能解决一些问题!
猜你喜欢
  • 2011-07-28
  • 1970-01-01
  • 1970-01-01
  • 2014-01-30
  • 1970-01-01
  • 2017-08-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-18
相关资源
最近更新 更多