I looking for a decent Image sprite generator. I tried http://spritegen.website-performance.org/ but it's not "smart" enough to handle multiple image dimensions and merge them with few blank spaces between images.
Any suggestions???
An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates. To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.
You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to hide overflow and position:relative; . Then you place your <img> image sprite inside absolutely positioned, which is possible since you positioned the parent. Then use :hover on the image to change position.
ZeroSprites is a CSS sprites generator aimed at area minimization using VLSI floorplaning algorithms. It can generate tighter sprites sheet than Sprite Generator and Spritemapper.
I have used them all and Sprite Cow is by far the best.
Update: There's a really cool new tool called SpritePad. It's an even better solution.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With