Rob*_*nik 23 html rendering background-image
我想知道是否有人用背景图片做过任何测试.我们通常创建一个至少在一个方向(x或y或两者)重复的背景.
示例
假设我们有一个在X方向重复的渐变背景.梯度高度为400px.我们有几种可能性.我们可以创建尽可能小的图像(1像素宽和400像素高)或者我们可以创建400像素高的更大图像.
观察
由于梯度高达400像素,我们可能不会选择GIF格式,因为它只能存储256种自适应颜色.如果我们的渐变是微妙的,也许这是非常的,因为它没有那么多,但是否则我们可能宁愿将图像存储为24位PNG图像以保留完整的渐变细节.
困境
我们应该创建一个1×400像素大小的图像,水平重复n次,或者我们应该创建一个100×400像素大小的图像,以加快浏览器中的渲染速度并获得更大的图像文件大小.
所以.图像大小与渲染速度有关？哪一个获胜？有人关心测试吗？关于浏览器渲染速度和可能的小图像重绘闪烁...
csl*_*csl 12
渲染速度是这里的瓶颈,因为更大的磁贴可以放入浏览器的缓存中.
我实际上已经为主流浏览器尝试了这一点,并且至少其中一些在非常小的磁贴上显得很慢.
因此,如果增加位图大小不会导致可笑的大文件的大小,我肯定会与该走了.自己测试看看.(请记住包括IE6,因为仍然有很多人坚持使用它).
您可以在位图大小和文件大小之间取得良好的平衡,但一般情况下我会尝试50x400,100x400,200x400甚至400x400像素.
我发现，如果你有一个宽度为 1px 的背景图像并重复它，浏览器的渲染性能可能会有巨大差异。背景图像的尺寸最好稍大一些。因此宽度为 100px 的图像在浏览器中的表现要好得多。当您在网站的可拖动图层中使用重复的背景图像时，这一点尤其重要。对于经常重复的背景图像，拖动性能非常糟糕。