responsive-css.spritegen.comResponsive CSS Sprite Generator

Optimize your website using CSS Sprites! Generate CSS Sprites to speed up your website by reducing HTTP requests. Responsive CSS Sprites About FAQ News Responsive 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. Ordinary sprites are a fixed size, but responsive sprites are able to be resized, for example using max-width: 100%; If you don't need your sprites to be responsive, you're better off using a normal CSS Sprite Generator . 1: Upload Your Images Select up to 20 files, total 2MB. 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 single image file that contains multiple individual images. You can use sprites 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 does Responsive mean? There are a few definitions, but in this case we mean that the image is able to be resized to fit the screen, for example using max-width: 100%; . Normally this doesn't work with CSS sprites, but the technique on this page allows it. What do I get and how do I use it? This tool generates: An image file A block of CSS code An <img> tag for each image First upload the image file and add the CSS to your stylesheet. Then replace your images with <img> tag to load the sprite. CSS classes are generated from the image filenames you upload, so for example: <img src="icon.png"> might become <img class="icon" alt="" src="data:..."> 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? Not at the moment. Tweet me if you're interested. 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. What's all that suspicious-looking "data:" stuff? That's a base-64 encoded transparent PNG file, the size of the orignal image. This is used to get the aspect ratio right. Latest News May 2014 Improved error handling Increased memory limit Jan 2014 Invented responsive CSS sprites!...