How to: Use CSS Sprites in WordPress Blog?
If have checked your website’s page speed and come across “Combine images using CSS sprites” speed issue then I assure you that you are on the right page. In this article, I’ve described everything about CSS sprites.
CSS sprite can really make your website faster if you use it on your website rather than having multiple small background images. CSS sprite is necessary part in order to speed up your site.
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 article.
CSS sprite means a collection of small background 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 #2) also use css sprites:
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.
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.
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.
i was having same problem, although i cant figure out how to do it ?
Have resolved your problem walking through this article @Priya
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. 🙂
Yes, I know.. I’m a bit busy these days.. That’s why I’m not able to do it at the moment…
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 🙂
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.
thanks for share.. my site is very slowly…
I can’t figure out how to change my CSS line attributes and CSS code 🙁
Hi @Abdelrahman Zohairy,
Eventually if you are not able to solve this technical you can contact me after all I’ll help you.
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
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;
}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..
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.
¿What do you mean by?: ‘with the help of export CSS coding’
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…
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?
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.
Oh good . i like you . tanks for help
i was having same problem -thanks for help
Thanks for sharing.
I have improved my website speed.