background-image of width over 100k pixels

Question

I have a sprite sheet that i use as div background . The dimensions are :

Width: 105920 Height: 240 .

It's a monochrome png file with size of 620kb , so i assume size is not the problem here .

When i try to use it as a background-image: url("spritesheet.png"); Firefox throws an error saying "Image corrupt or truncated" . Chrome does not show any error message , but the image is not shown .

If i resize the width of the image with gimp to 10,000 , everything is ok . but obviously i cannot use it as intended any more .

Are there any restrictions for maximum allowed image size in CSS ? Am i doing something wrong ?

Answer 1

According to the answer to this question, your image is too big for Safari/iOS to handle. Other browsers probably have similar limitations, as you have found with Firefox. The file-size of 620kb is acceptable, but the dimensions of the image (over 25million pixels) is a little too much to handle.

That said, even if browsers could show your image, I would very strongly advise against using an image of those dimensions. One uses sprites for performance reasons, but an image that size will incur a massive performance penalty... you'd be shooting yourself in the foot.

Answer 2

Not a solution to your problem, merely a comment. The advantages of using sprite-sheets may be lost or much reduced when you orient them horizontally. This causes a problem with cache-misses.

Imagine you had a 10x10 pix sprite. To load the portion of the your image that contains it, you need to load (numPixels = sprite_height * src_width). In your case, this would be 10 x 105920 pixels = 1,059,200 pixels! - Just to cache 100 pixels worth of image.

The best way to orient a sprite sheet is vertically. You use the same equation to determine the number of pixels that must be loaded, but get a very different result. A result that is now small enough to fit in the small(est), fast(est) cache. In this case: 10 x 240 pixels = 2400 pixels. - Again, overkill for just 100 pixels, but a superior solution than the previous example gives.

Changing the orientation of the sheet from horizontal to vertical results in a reduction of the size of the memory needed to cache this sprite of 441 times. Not exactly something I would characterize as insignificant.

The effect of making this change will be most apparent when repeatedly drawing the same sprite or sprites that are located near to one another in the sprite-sheet.

Given that the browser works with tru-colour images on the screen, it doesn't seem unreasonable to think that for performance reasons, the browser would convert your monochrome image to one compatible with the remainder of the display - one that has 24 bits/pixel, albeit with (relatively) little variation in value. If indeed the image was converted to 24bit, well, the memory requirements would be huge 105920 * 240 * 3 = 76262400bytes. Yes!! That's 72.73 megabytes!! Add another 1/3 if its converted to an rgba(32 bit) image.

So, I've got two suggestions.

1. Orient your images vertically
2. Use several sprite sheets.