Sprite CSS/Image Generator



L/R px


T/B px
    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.
    CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates.
    What do I get and how do I use it?

    This tool generates:

    • - Sprite image files (normal, retina)
    • - Setting & Result JSON text or file
    • - A block of CSS code

    • - Generate both retina and standard sprites
    • - Drag and drop file import
    • - Imported images name can be edited
    • - Imported images sort by name, size
    • - Imported images drag and drop sort
    • - Support DataURL
    • - Export: Sprites image and setting file download
    • - Import: *.sprite.json File ( setting and image data )