重复网站背景图像 - 大小与速度 [英] Repeating website background image - size vs speed

问题描述

我想知道是否有人用背景图像做了任何测试。我们通常会创建一个至少在一个方向（x或y或两者）重复的背景。

示例

假设我们有一个在X方向重复的渐变背景。渐变高度是400px。我们有几种可能性。我们可以创建尽可能小的图像（1个像素宽度和400个像素高度），或者我们可以创建一个400像素高度的较大图像。

观察 strong>

由于渐变高度为400像素，我们可能不会选择GIF格式，因为它只能存储256种自适应颜色。如果我们的渐变很微妙，也许这是很重要的，因为它没有那么多，但否则我们可能会将图像存储为24位PNG图像以保留完整的渐变细节。

两难

我们是否应该创建一个1×400像素大小的图像，这个大小将会水平重复 n 次，或者我们应该创建一个100×400像素大小的图像，以加快在浏览器中的渲染速度，并具有更大的图像文件大小。所以。 图片大小与渲染速度？哪一个获胜？任何人都在意测试这个？关于浏览器渲染速度和可能出现的小图像重绘闪烁......

解决方案

渲染速度是这里的瓶颈，因为更大瓷砖可以放入浏览器的缓存中。

实际上，我已经为主流浏览器尝试了这种方法，至少其中一些在非常小的图块上显得很慢。 / p>

因此，如果增加位图大小并不会导致大小很大的文件大小，那么我肯定会这样做。自己测试一下，看看。 （请记住包括IE6，因为仍然有很多人坚持使用它）。

您可能能够在位图大小和文件大小之间取得很好的平衡，但通常我会尝试50x400,100x400,200x400甚至400x400像素。 p>

I was wondering if anyone has done any tests with background images. We normally create a background that repeats at least in one direction (x or y or both).

Example
Let's say we have a gradient background that repeats in X direction. Gradient height is 400px. We have several possibilities. We can create as small image as possible (1 pixel width and 400 pixels high) or we can create a larger image with 400 pixels height.

Observation
Since gradient is 400 pixels high we probably won't choose GIF format, because it can only store 256 adaptive colours. Maybe that's enaough if our gradient is subtle, since it doesn't have that many, but otherwise we'll probably rather store image as a 24-bit PNG image to preserve complete gradient detail.

Dilemma
Should we create an image of 1×400 px size that will be repeated n times horizontally or should we create an image of 100×400 px size to speed up rendering in the browser and have a larger image file size.

So. Image size vs. rendering speed? Which one wins? Anyone cares to test this? With regards to browser rendering speed and possible small image redraw flickering...

解决方案

The rendering speed is the bottleneck here, since bigger tiles can be put into the browser's cache.

I've actually tried this for the major browsers, and at least some of them rendered noticeably slow on very small tiles.

So if increasing the bitmap size does not result in ridiculously big file sizes, I would definately go with that. Test it yourself and see. (Remember to include IE6, as still many people are stuck with it).

You might be able to strike a good balance between bitmap size and file size, but in general I'd try 50x400, 100x400, 200x400 and even 400x400 pixels.

这篇关于重复网站背景图像 - 大小与速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！