How to: Use CSS Sprites in WordPress Blog?

I know, the very first question will be arising in your mind, what is CSS sprite? Have any idea! No, Okay. Today, let’s have a ride towards  CSS sprite, which is the most necessary part in order to speed your site up, Happy .

What CSS sprite is, what can we do with it and what would be the benefit of using CSS sprite? All of these parts will be cover in this post. Hope you are happy just after hearing this.

CSS Sprites in WordPress

Short Intro:

CSS sprite means a collection of images placed in one image called CSS sprite. This maybe be use in our blog with the help of using CSS codes with the suffix of {background-image: url(images/sprites.png); and then specify the image’s background-position: 0 0; }.

Oops, don’t confuse  looking at codes, it just a short intro the complete guide is right here. We’ll walk through many codes but you don’t need to be confuse because we can handle it right away. Let’s go,  so the very first question from all of you or maybe some of you is right here.

What, If don’t use CSS sprite?

If you don’t have a CSS sprite then your server gets lots of requests, I mean to say that a web page containing many images sends lots of requests to the server, to decrease those server requests, save bandwidth and in order to let your site load faster we use it.

As we know CSS sprite refer to a collection of images placed in only one image, got it! Let’s suppose, if your site uses over 10, 20, 30 and so on background images then you may not hide the outcome means the more your site have background images the more your server have requests in this way it’s not possible to complete all those requests in seconds simultaneously users of your site get bored, and be able to leave it as soon as possible.

Me, you and everyone knows that in this world no one have the time to wait. Okay leave it! Let’s see that Facebook (the biggest social network in the world although the global alexa rank of Facebook is #1) also uses CSS sprite click here to check it out.

Use CSS Sprites in WordPress

The very first benefit of using CSS sprite is that your site will load very faster. These server requests will be resolved just by using CSS sprite.

What’s spriteme? It’s a very awesome site to make CSS sprites finds background images, group them into sprites, generate sprite, make exactly CSS background-position declaration for your website, and did you know? The very great thing is that It’s out of cost  Yeah it’s correct.

Instructions:

1. Anyways, getting back to the work. Let’s run spriteme in your browser, on the front page of that website, you’ll see the installation process of spriteme. If you’ve installed it right in your browser, try making a sprite for your site.

2. How to make an sprite, look what I did?

I just go through my site when it get loaded completely in the browser at the moment I clicked the SpriteMe tab from Bookmarks bar. Spriteme automatically caught all the background images that used in my site, and also tells non-sprited images. The SpriteMe automatically makes sprite for your site just by clicking the tab “make sprite” for both vertical as well as horizontal.

CSS Sprites in WordPresss

3. You have successfully made an sprite for your site, the next step is to download that sprite and upload it in your WordPress theme’s root images directory (wp-content/themes/your theme/images).

4. On the same page click on Export CSS, you’ll get the CSS codes for the created sprite.

CSS Sprites in WordPresss spriteme

5. Go through your WordPress admin panel Appearance > Editor and replace the images links with the help of export CSS coding.

For example:

Looking at the image above, background-image url before is:

background-image: url(http://www.yourdomain.com/wp-content/themes/streamline/images/categories.png);

Change above URL like:

background: #fff url(images/gp_sprite.png) center left no-repeat;
background-position: -10px -10px;

OR

background: #fff url(wp-content/themes/your theme/images/gp_sprite.png) center left no-repeat;
background-position: -10px -10px;

Keep in mind, before image URL has no background-position within CSS codes okay. But after making a sprite we’ve to increase a CSS declaration which is background-position to specify the image’s background position because in the sprite there are lots of images present to make them load clearly we use background-position declaration in the specific CSS selector.

Now what, kindly change all of the background images URLs with the help of export CSS coding. We’ve all done.

How People found this article:

19 Responses

  1. Priya Chopra December 17, 2012 / 4:15 am

    i was having same problem, although i cant figure out how to do it ?

    • Muhammad Haroon December 17, 2012 / 5:47 am

      Have resolved your problem walking through this article @Priya

  2. Didi January 10, 2013 / 10:23 am

    I have same problem. I’ve checked this site on google pagespeed insight. Your site still has problem with CSS sprites. I’m not sure to do your advice. But, thanks for your explanation. :)

    • Muhammad Haroon January 10, 2013 / 10:26 am

      Yes, I know.. I’m a bit busy these days.. That’s why I’m not able to do it at the moment…

  3. ross June 27, 2013 / 6:10 pm

    I am having the very came problem. Using GT Metrix it is telling me to combine sprites. I am using WO Social Booster plugin and that seems to be the big problem. I am getting an “F” at 33% for page speed grade! That’s terrible, any solutions to this problem that work 100%? Thanks :)

    • Muhammad Haroon June 27, 2013 / 6:32 pm

      Hi there, thanks for letting me know about your problem @Ross. Well, you can follow my article on how to get 95 score on Google Page Speed Insights here:

      10 Steps to speed up WordPress

      I hope, you will be able to get better result on Gtmetrix too if you follow this article.

  4. Mr. Kim July 17, 2013 / 3:32 pm

    thanks for share.. my site is very slowly…

  5. Abdelrahman Zohairy September 15, 2013 / 1:02 pm

    I can’t figure out how to change my CSS line attributes and CSS code :(

    • Muhammad Haroon September 15, 2013 / 1:53 pm

      Hi @Abdelrahman Zohairy,
      Eventually if you are not able to solve this technical you can hire me after all I’ll help you.

  6. MaxW October 8, 2013 / 12:01 am

    i have a question.. in the theme i used for this site it is layout.css that has what export CSS told me to input.. however, when i look at it – shows like this…

    .menu-header-left {
    background: url(“../images/menu-bg-left.png”) 0 0 no-repeat;
    width: 5px;
    height: 61px;
    position: absolute;
    top: 0;
    left: -5px;

    it doesn’t have the full url, i.e. (from SpriteMe export CSS):
    .menu-header-left {
    background-image: url(“http://1-ps.googleusercontent.com/h/www.testingforchildren.com/wp-content/themes/prospect/images/xmenu-bg-left.png.pagespeed.ic.41rIW8XxpZ.png”);
    background-image: url(“http://www.jaredhirsch.com/coolrunnings/public_images/1a948af1a2/spriteme1.png”);
    background-position: -10px -10px;
    }

    so my question is.. can i just replace background: url(“../images/menu-bg-left.png”) 0 0 no-repeat; with this:

    background: url(“../images/spriteme1.png”) -10px -10px no-repeat;

    or do i have to use the full url and do i have to do anything like adjust/remove width, height, etc

    • Muhammad Haroon October 8, 2013 / 10:50 am

      Hi @MaxW, Hope you doing well… And by the way the answer of your question is:

      Either upload the sprite image on your server in the theme’s directory of yourblog.com/wp-content/themes/your-theme/images/spriteme1.png or simply use full url like this also neglect the first URL.

      .menu-header-left {
      
      background-image: url(“http://1-ps.googleusercontent.com/h/www.testingforchildren.com/wp-content/themes/prospect/images/xmenu-bg-left.png.pagespeed.ic.41rIW8XxpZ.png”);
      // Remove this background-image selector.
      background-image: url(“http://www.jaredhirsch.com/coolrunnings/public_images/1a948af1a2/spriteme1.png”); background-position: -10px -10px;
      }
      • MaxW October 8, 2013 / 5:51 pm

        Muhammad,

        i have already upload the sprite to images

        so even though in my cpanel when i go into layout.css it doesn’t show the full url, i.e. it shows like this

        background-image: url(……/images/xmenu-bg-left.png)

        should i just replace the xmenu-bg.left.png with spriteme1.png??? or do i put in the full url (yourblog.com/wp-content/themes/your-theme/images/spriteme1.png)??

        that was what i meant..

        • Muhammad Haroon October 9, 2013 / 8:54 am

          Hey @MaxW,

          Yes you can replace the file name (spriteme1.png) in the css file if you think that the file (xmenu-bg-left.png)is also available in the same directory where yours spriteme1.png. It’s that simple man.

  7. Andres December 8, 2013 / 10:42 pm

    ¿What do you mean by?: ‘with the help of export CSS coding’

    • Muhammad Haroon December 8, 2013 / 11:19 pm

      Hi Andres, I mean to say that as we just created a sprite and you can see a button in the spriteme tab Export CSS by clicking the tab Spriteme will create a coding the sprite image that you can directly replace in the style.css file…

  8. Andres December 18, 2013 / 2:57 am

    Hello Muhammad,

    Should I run spriteme on the website homepage? or also in on internal urls?
    Cos if I run it on homepage it gives me one sprite, but if I run it on internal pages, it gives me another.

    If I have to run it on both homepage and internal, how do I post the link, since both call spritme1.png?

    • Muhammad Haroon December 18, 2013 / 1:13 pm

      Hi Andress,
      By the way, if you are having different images when running the spriteme on homepage and internal post url then don’t keep the same name while uploading both of these sprite images on the server but all the difference will be the background-position css selector. Hope you understand.

  9. graph January 23, 2014 / 8:22 pm

    Oh good . i like you . tanks for help

  10. subtitle January 25, 2014 / 2:28 am

    i was having same problem -thanks for help

Leave a Reply

Your email address will not be published. Required fields are marked *


× 6 = thirty six

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>