浏览器是否针对不同的图像宽高比进行了优化？

Question

这个问题可能有一个非常复杂的答案，但这里有：

我已经创建了一些图像精灵使用天真叠加算法产生的图像是89px宽2000px高。该图像将用于页面上的大约50个精灵。这个精灵的格式是.GIF格式，我几乎不知道GIF如何编码像素，（我不知道它是行/列主要还是其他一些打包算法）。

精灵图像中的总像素数为178,000。

我可以改变我的精灵生成算法，以产生一个445像素宽，400高（相同像素数，只是创建一个图像网格，而不是一个列）的精灵。

更改精灵的配置是否会产生更好的浏览器DOM加载/渲染性能？ （我特别感兴趣的IE 8和移动浏览器，如iOS上的Safari）

Answer 1

与所有优化问题一样......如果不测量它，很难说。

但是...基于GIF文件编码的方式我怀疑你的当前布局比一个更宽的纵横比图像执行“更好”。

有关GIF文件格式的文档说“因此可能一条扫描线会结束，另一条扫描线会在图像数据的子块中间开始”。

由于图像数据是LZW压缩的，并且由于来自同一图标的像素更可能是相同的颜色（即使它们来自相反的边缘和一行下方），您的当前布局可能会更好地压缩因此它可能表现更好。

但是我确信有很多病态的情况，其中反过来是真实的，同样有信心任何布局的性能增益可能会很小，无疑有更好的优化值得担心。