Background image wider than 100k pixels

Question

I have a sprite sheet that I use as a background div. Dimensions:

Width : 105920 Height : 240.

This is a 620kb monochrome png file, so I assume that size is not a problem here.

When I try to use it as background-image: url("spritesheet.png");, Firefox gives an error message "Image is corrupted or truncated." Chrome does not display an error message, but the image does not appear.

If I resize the image width using gimp to 10000, everything is fine. but obviously I can't use it for its intended purpose.

Are there limits on the maximum image size allowed in CSS? Am I doing something wrong?

Answer 1

According to the answer to this question, your image is too large to handle Safari / iOS. Other browsers probably have similar limitations as you found in Firefox. A 620kb file size is acceptable, but image sizes (over 25 million pixels) are too much to process.

Nevertheless, even if browsers can show your image, I would very strongly advise against using the image of these measurements. One uses sprites for performance reasons, but an image whose size will entail a significant decrease in performance ... you shoot in the foot.

Answer 2

, . - , . .

, 10x10 pix. , , (numPixels = sprite_height * src_width). 10 x 105920 = 1,059,200 ! - 100 .

- . , , . , , (est), (est) . : 10 x 240 = 2400 . - , overkill 100 , , .

, 441 . , .

, .

, , , - , 24 /, () . 24 , 105920 * 240 * 3 = 76262400 . !! 72,73 ! 1/3, rgba (32 ).

, .

• .
• .