ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

9 Free Online CSS Sprite Generator

CW
9 Free Online CSS Sprite Generator

We have already discussed about How to use CSS sprites and How to add image hover effect using CSS sprites. Both the tutorial requires manual work and now this time, I’m going to share some online CSS sprite generator which will help you to generate CSS sprites online.

Few days back we let you know about Google started ranking website based on speed and its high time for all the bloggers and website developers that we should optimize our site for speed as much as possible. One of the simplest way to optimize your WordPress blog is by using super cache plugin, Smush.it plugin and using CSS sprites.

Why do we need online Sprite generator?

Anyone, who have a website and you are serious about it, CSS sprites will be very useful for faster loading of your site. We have already shared how to create CSS sprites manually, but everyone is not as good in coding and in such cases these online CSS Sprite generator tool, will be very handy to create sprites quickly.

Advantages & disadvantages of using CSS sprites Generator:

The IDEA behind CSS sprites is very genius. For those who does not know about CSS sprites , CSS sprites group multiple images into one big image and display them using CSS background positioning. This helps in decreasing no. of concurrent connections and your site will be faster:

  • A single big image uses less bandwidth as compare to various smaller ones.
  • Less images ==Less http requests = faster loading overall

The only disadvantage of using CSS sprites is that it  does not work consistently in all browsers like IE and Opera,Chrome and Firefox are more close to the standards. Though, if you don’t care about outdated IE browsers, you need not need to worry much. A bit of CSS tweak can make your complete code cross-browser compatible.

Useful list of online CSS sprite generator:

CSS-Sprit.es

css sprites

Website Performace CSS Sprite Generator

This is best of all Online and Offline CSS Sprite Generator. It lets you upload images, ignore duplicate images, resize images, output images option etc. <Link>

Data URI Sprites

Data URI

Duris.ru is a multi-purpose tool for Web-designers. It offers multiple features like Image compression, Image optimization, Compress or merge Js, Compress or merge CSS. <link>

Drupal CSS Sprites Generator Module

This is fairly simple but powerful online CSS Sprites generator tool, lets you to create simple CSS Sprites Images

CSS Sprite Generator

This tool allows you to upload multiple files and generate a sprite out of them. It also gives you the CSS code (the background-position value) for each image in the sprite.

csssprites 300x56

css sprites

Projekt Fondue CSS Sprite Generator

This generator lets you ignore duplicate images, resize source images, define horizontal and vertical offset, define background and transparency color, assign CSS class prefixes and various other things.

Sprite Creator 1.0

This tool allows you to upload an image and create the CSS code for selected areas of the sprite.

SpriteMe : One click CSS sprite generator

Sprite me
When invoked, SpriteMe automatically identifies potential images to be grouped into a sprite, gives you one-click sprite creation through csscoolrunnings.com and re-inserts the new sprite into your site on the fly for testing.

All of these web generators are equally efficient with easy to use interface, I recommend you to must try creating sprites for your site. If you create one then please share.

Do let us know which Sprite generator site are you using to create CSS sprite online?  Are you using CSS sprites into your website to optimize your blog for speed?

  • Author Bio

  • Latest Post

Article by ishanbanga

ishan has written 2 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 12 comments… add one }

  • John Knauber

    I like this one a lot:
    http://www.freespritegenerator.com/

    You can generate sprites by entering a website URL and it will take images from CSS and IMG tags to generate a sprite for you. Of course you can also just upload images if you wish, but it’s 100% free. I use it all the time.

    Reply
  • Jorge Bastida

    Try this one too http://gluecss.com

    Reply
  • Raje

    Spriteme is good.Thanks for the list.

    Reply
  • Jeff Carter

    Here is another good one:

    http://www.spritemeister.com

    Reply
  • Saket

    Spriteme isn’t opening, looks like its down. Can anyone confirm this?

    Reply
  • Vikram Rout

    Very Nice information about Online Css generator. I am using in my blog site. Thanks for sharing this information

    Reply
  • Suresh Khanal

    This is totally new concept for me. After reading your post I started to think

    “Does it justify to use sprite which is not consistent to different browsers just for the sake of a bit speed improvement of blog?”

    Would you suggest honestly? (I understand the services are great, no doubt)

    Reply
    • ishan

      [1]Percentage of people using IE or opera is very less …and the percentage decreases if you have a tech blog.
      [2]Sprites are beneficial for blog such as shoutmeloud with large traffic…It could decrease bandwidth …..
      [3]and good for seo.

      Depending upon which factor is significant in your case ,you can choose whether to choose sprites or not

      Reply
  • Shabnam Sultan

    I will try using these online CSS generators on my blog.

    Reply
  • P.K.ARUN

    No dude i’m not using it in my blog bec i’m a designer :)

    Reply
  • jai prakash

    Online css generator nice .Now my work will be easy.great hidden post.

    Reply
  • Mani Viswanathan

    This will work gr8, also after that don’t forget to Smush it! :-)

    Reply

Leave a Comment