I would like to create a horizontal image sprite for use in a jQuery animation, how would i create a sprite from 190 images in a folder (around 220kb each file) into a single horizontal sprite?


4 Answers 4


As I write code a lot too, I know your pain with this task. Luckily there are dozens of

Sprite Generators

out there. I don't even save the link, as you always find a fitting one soon. The above linked generator takes a ZIP file. Luckily they don't only give you the resulting sprite image/sprite, but write the CSS for you as well.

Sidenote/Hint: Pay attention how you name stuff. They normally order stuff by names. So if you got :active and :hover states, you should name them accordingly:

  • layer_active.ext,
  • layeractive.ext or
  • layer-active.ext.

The only thing that's now left is to write the (pretty intense) mark-up :)

  • 1
    That sounds pretty slick.
    – Anonymous
    Feb 12, 2013 at 10:15

Well the obvious answer is to create a batch process to do it for you so you don't have to do it 190 times.

But maybe you can use one of Photoshop's automated processes to do it for you. In the old version of photoshop I use there's a Contact Sheet II process available. Perhaps you could set it up to include all the images you want to turn into a sprite, and then set the width to be the total width you expect all of the images to be, the height to be the max height of the individual images (so for example it'd be something crazy like 15,000 px X 200 px)

And then you'd set the "thumbnails" to be 190 columns and 1 row. Then turn off "Use Filename as Caption".

Oh and playing around with the spacing may help.


You have to open all images in your photohshop then you have to place them in one file which will be containing your horizontal image. next to each other this will be a big task and pain,

if you found any another way(rather than your mentioned script) of this please let us know

  1. Tips for making css sprites
  2. how to create css sprites
  • I dont want to be a pain in the ass.. but I couldnt help but commenting as this is the kind of stuff that happens to me. But if you check out Xavier's comment to his own question..
    – Joonas
    Oct 5, 2011 at 7:41
  • lol seems you dont like my posts, i answered this question coz i wanted to and that's it.
    – Jack
    Oct 5, 2011 at 9:14
  • I know. Relatively rarely people posts things online on against their own will, but you said in your answer "if you found another way of this please let us know" and that is what he has already done in his comment to his own question... Just wanted to point that out.
    – Joonas
    Oct 5, 2011 at 9:25
  • lollero you are awesome :)
    – Jack
    Oct 5, 2011 at 9:33

Although not directly related to Photoshop, I'd like to recommend TexturePacker.

I've used it in the past I'm pretty happy with it: light, fast, easy to use, affordable and it generates clean code for most targets/frameworks out there(including css sprites).

The full version also offers command line access which makes it super easy to automate workflows.

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.