17

Let me start off by stating that I realize the arguments against doing CSS Sprites for large images. I even asked a question about why that could be considered a bad idea (and added an answer of my own). Now that we've had that talk...

I'm going to be making a large CSS Sprite-map. For the process of making this sprite-map, it behooves me to know what (if any) limit exists for the height and/or width of a sprite image in order for browsers to properly process it.

The ultimate reason behind this question is a debate over whether to lay out the sprite images in a grid or in a single row/column. For example: is it necessary or beneficial to do 4000 x 3000 instead of 400 x 30000?

Edit: The sticking point here isn't about what size images can be, but rather what size browsers can process for sprites. Given the lack of detail thus far, I'm moving forward with generating the single-large-column sprite. I'll post details of my experiences as an answer once that is complete.

Community
  • 1
  • 1
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
  • 1
    There's no arbitrary limits to an image size that I know of, but consider the memory requirements to hold a truecolor 4000x3000 image in memory: ~48megabytes assuming a 32bit+alpha image. – Marc B Aug 26 '11 at 22:05
  • Just for the sake of curiosity, the sprite used in addons.mozilla.net is 1000x2150 pixels, and it doesn't seem to cause any problem. However, it's only 16.7kb! [sprite](https://static.addons.mozilla.net/img/sprite.png) – MartinodF Aug 26 '11 at 22:09
  • @Marc: I'm aware of the memory considerations. That was the subject of the answer I linked to. – Jeffrey Blake Aug 29 '11 at 16:50
  • @Martino: The file-size and the memory requirements for sprites are very different things. Once the browser loads an image into memory, all benefits of compression are lost, so the ultimate memory requirements within the browser are typically much greater than the file size. That's true for pretty much all images though, not just sprites. – Jeffrey Blake Aug 29 '11 at 16:52
  • @Jeffrey I'm very well aware of that, and my comment wasn't a direct reply to Marc. I was considering the download time which, IMHO, is at least as important as the memory footprint. – MartinodF Aug 29 '11 at 21:40

3 Answers3

4

Sometimes it's more of a matter of download time. Since browsers can use multiple connections to download files, a huge image can take longer to download than a few smaller ones.

If your image is so big that it's slowing down page load maybe it's time to consider several smaller sprite images.

Direct-X 9 has a size limit if 4096 pixels, so any Internet Explorer filters applied to these elements will crop them at 4096 pixels.

See: IE display transparency bug on height > 4096px?

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Load time of the sprite image isn't the issue (and if necessary, will be dealt with separately). My concern was the potential for problems directly related to browsers having problems processing large images into sprites. – Jeffrey Blake Aug 31 '11 at 13:56
  • 2
    IE6/7 direct-x filters crap out of images with a dimension larger than 4096px (2^12). It uses a 12-bit size register. – Diodeus - James MacFarlane Aug 31 '11 at 14:13
  • Do you have a source on that, and/or a better description of what "filters crap out" means exactly? Those two components put into an answer would probably create the "accepted answer" – Jeffrey Blake Aug 31 '11 at 14:21
  • Here's a source: http://stackoverflow.com/questions/775041/ie-display-transparency-bug-on-height-4096px – Diodeus - James MacFarlane Aug 31 '11 at 14:43
  • +1 & Accepted. I'm taking this to mean "things should probably work in all modern browsers but it is unclear whether or not IE6/7 would properly handle spriting for images over 4096px". – Jeffrey Blake Aug 31 '11 at 15:00
3

In practice, this seems to work with no problems in Firefox 5+, Chrome, and IE7+ for a sprite image of 400x16560.

The potential issues of IE's directx rendering engine failing on images over 4096px do not create problems in IE7 or beyond; we have no method or need to test IE6 for our current project.

The one place that we experienced problems with really large spritemaps is on mobile platforms. Android devices handle them reasonably well, but iOS devices break down pretty badly, and in a strange way: They shrink the image down to fit within the dimensions they accept. So our CSS works perfectly for a small spritemap, but with no changes except increasing the physical dimensions of the spritemap image, the sprited images begin to show four times as much of the spritemap in the same html entity, with exactly the same CSS.

Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
0

There is a limit in version 1.0 that is upgraded in v1.1 But still there is a limit for dimensions:

In accord with version 1.1, the scope of the 31-bit limit on chunk

lengths and image dimensions has been extended to apply to all four-byte unsigned integers. The value -231 is not allowed in signed integers.

Source

A funny limit is IE6.0 fails to display PNG images of 4097 or 4098 bytes in size!

But these limits are very huge in compare to what we're using in web pages.

Mohsen
  • 64,437
  • 34
  • 159
  • 186