0

Hi folks: I'm looking for a technique for web pages which would allow me to supply one large image containing many small images (possibly hundreds) to be used as background images for certain div's or li's.

That sounds like a job for CSS sprites, except for one thing: sprites rely on the enclosing div (or box) to reveal just one image.

However, where I want to use the images is in regions that are arbitrarily larger than the individual sprite images (and any space I might leave between them). This is a case addressed in the media fragments proposal for CSS3, which seems not yet implemented widely.

Also, these image hacks look useful, but only work where it's OK to interpose an additional span (or :before mechanism).

Supposing one wants to avoid that, is there perhaps a technique to accomplish this with some clever javascript? For example, is there a practical technique for shipping the one large image to the browser, have javascript slice it up in memory, and assign the individual images to different CSS background rules?

3
  • well, if you don't have to support IE<=7, where is your problem using pseudo-elements?
    – Christoph
    Mar 8, 2012 at 9:36
  • That's certainly a valid question. My main reluctance is with using :before to add a layer of complexity to thousands of DOM elements, and the javascript and CSS which has to address them in a UI-responsive way. It might wind up acceptable, but I am favoring looking at solutions that maintain a simple DOM, possibly costing some up-front calculation, rather than pushing the problem into the DOM.
    – gwideman
    Mar 8, 2012 at 10:18
  • In addition, it introduces complexity as to how the added :before DOM element interacts layout-wise with other nearby elements. If its purpose is to hold a background-image icon for an li, then does the added container element play nicely with the rest of the li text, subsidiary ul's and so on under various resize conditions. Maybe it does, but again, it's at least worth looking at alternatives that avoid increasing the complexity.
    – gwideman
    Mar 8, 2012 at 10:22

2 Answers 2

1

Use data-url. Encode many image in one string data and decode individual image in the string.

You can search "data-url image sprite" to have some more idea.

5
  • Huh, neat, I didn't know about that. That's going to require generating all the CSS for the 100's of classes and their images programatically, which is probably the right thing anyway. On googling, I see there are some downsides to this technique (CSS size, delay while browser crunches it). My main issue would be that the inline data is rather inscrutable, so harder to troubleshoot by eyeball. Anyhow, it's got my thinking for sure. Thanks.
    – gwideman
    Mar 8, 2012 at 10:09
  • Just for consideration: the usage of data-url increases the size by a fair amount. base64-encoding is about 30% more data than the original image.
    – Christoph
    Mar 8, 2012 at 11:37
  • Yes, size increase understood, though evidently you get most of that back with compression. Regardless, I'd expect that swapping say 100 16x16px image files for a single CSS file of even twice the size would be a performance win. Still not sold on the maintainability aspect, but definitely an option to know about.
    – gwideman
    Mar 10, 2012 at 0:03
  • I think it will decrease the size instead. If you use one image for different sprite, there will be some space left behind. By using this methods, you can directly get the image src. Not need to do css style. It will decrease the complexity for rendering the page and may increase the performance (i didn't do any compare).
    – WaiLam
    Mar 11, 2012 at 5:23
  • I'm going to mark this as the answer, as I ended up using it and it worked very satisfactorily, even with the reservations I noted.
    – gwideman
    Mar 12, 2012 at 6:24
1

For example, is there a practical technique for shipping the one large image to the browser, have javascript slice it up in memory, and assign the individual images to different CSS background rules?

On modern browsers it should be possible to use an HTML5 Canvas to load an image, copy portions of that to a second Canvas, and then store the resulting sprite in a data: URI.

1
  • Thanks, that sounds like approximately what I was imagining. Any pointer to where this has been tried and assessed. Some sample javascript to pave the way would be excellent too, of course.
    – gwideman
    Mar 8, 2012 at 10:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.