spritegen.comCSS Sprite Generator

Optimize your website using CSS Sprites! Generate CSS Sprites to speed up your website by reducing HTTP requests. CSS Sprites About FAQ News CSS Sprites CSS sprites allow you to combine multiple images into a single file. This reduces the number of HTTP requests, speeding up page loading. If you need your sprites to be responsive, use the Responsive . 1: Upload Your Images Select up to 20 files, total 8MB. 2: Choose Options Output Type: PNG - Recommended JPEG GIF JPEG Settings JPEG Artefact Removal: JPEG Quality: Other Settings CSS Class Prefix: Padding between images: 0px 1px 2px 3px 4px 5px 10px 20px (This will make your file slightly larger but can prevent images bleeding into each other) 3: Create Your Sprite About By RoBorg What is a CSS Sprite? A CSS Sprite is a load of images lumped together into a single image file. They're used as a technique to make your websites load faster, by decreasing the number of HTTP requests your users have to make. Each request will contain the overhead of HTTP headers (including cookies) and the connection's latency. By using a single image file instead of many, you can dramatically decrease the time it take your pages to load. What do I get and how do I use it? This tool generates: An image file A block of CSS code First upload the image file and add the CSS to your stylesheet. Then replace your images with code to load the sprite. CSS classes are generated from the image filenames you upload, so for example: <img src="icon.png"> might become <div class="icon"></div> Frequently Asked Questions Who wrote this? Greg, AKA RoBorg did - I'm a professional PHP programmer for Just Say Please . You can follow me on Twitter How do I report a bug? At the moment just via Twitter . How long do you store my source images and sprite for? They're not stored on the server. Are images I upload private? Yes. Is there an API? Yes - see the CSS Sprites API page. Is this project open source Not at the moment, but if I receive enough interest I might clean up the code and release it. How is this website written? The sprite generator is written in PHP, using the GD image functions. The transparent PNGs are manually generated. Latest News Aug 2017 Improved API May 2014 Improved CSS Improved error handling Increased memory limit Jan 2014 New UI - HTML5 uploader instead of Flash New API Use data URIs instead of storing files Sub-sort files by name Jul 2011 Improved error handling Upgraded to YUI 2.9.0 Added Chrome warning Nov 2010 Fixed off-by-one error in certain circumstances Added padding option Added CSS class prefix Changed layout algorithm for when all images are the same width - now uploading lots of icons will result in a square image instead of a giant column Upgraded to PHP 5.3 - now grayscale PNGs are loaded correctly! Added PNG compression and filters...