Css sprites and problems you may face


working during the last couple of days. I did some speed improvements in my latest work. I always try to optimize my code, use advanced cache techniques that Umbraco offers and many other things (recently I am following the html5 boilerplate standards). Don’t forget speed is the best SEO technique, that’s all Google people say and that’s so normal if you just think about it.

You all know about CSS sprites etc. I’ve heard like you many many times a few years ago but never really used that technique. The reason is that takes time of course and client never pay for that time. On the other hand is that really makes a difference on load time because of the minimum of requests that browser does when the page starts loading. So do use this technique to make the web faster (lol that’s a Google moto).

Well I will share a nice tool with you that found a couple of months ago, the service is free for up to two sprites/projects but you can buy a subscription with more options. The guys from Kiss introduced the spritepad, it’s so easy to get started with drag and drop functionality and export ready css rules and the sprites png file. You can also share your project with other co-developers or save it on the cloud until the next use.

Give it a go and make your life easier.

What about some problems you may face by using the css sprites technique. The only thing I had a problem is when I had to align right a background image. For example we have a dynamic navigation menu that we don’t really know the width of it.

.menuItem{background:url(../imgs/myalignedright.gif) right top no-repeat;}

For this problem without using css sprites we would have a long gif or whatever that will fit for all possible texts on our menu. So it could be a 200px width. The solution is so simple, all you need is to make your sprite as wide as you need and then align the css rule for that element right and use only a value for the top.

.menuItem{background:url(../imgs/sprites.png) right -280px;}

It’s the same you would do without sprites.All you need is to known what’s the max width the graphic will need for the repeat, so stick it on the right and make sure on its left is nothing so there will be no conflicts.

Testing my page with Google speed insights I managed to score 94 out of 100 while before the small fixes the score was 75 out of 100. All I did was minimize http requests by combining all jQuery files in one and use a CSS sprite for my graphics. So simple and so effective.

Now I’ll put an annotation in Google analytics so I have a time stamp of when things changed on the website so I can compare differences using the advanced new analytics speed and network data we have available on our reports. We can talk about that section on another post.

Leave a reply

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

Back to Top