How To Combine Images Into CSS Sprites To Increase Blog Speed

Do you know what does the CSS Sprites mean? Do you understand them? The name might prove out to be a little bit misleading because sprites are not small size pictures as you might be thinking. A sprite is a real large image that has different types of pictures in one image file. Still confused? Have you ever noticed an image which changes its color whenever someone hovers over it? We call that functionality CSS Sprites. Adding numberless pictures into a single image file and then combining it into CSS Sprites could surely boost the speed of a website. Now a person might be thinking that Combining Images into Sprites would be extremely complicated. However, it’s not that much difficult. Today we will discuss How to Combine Images into Sprites to reduce load time.

What are CSS Sprites and How it Works:

Before, we get towards our tutorial its essential to understand how the CSS Sprites works. Fundamentally we add two pictures perpendicular to each other having different colors. Now with the help of CSS Sprites, we allocate the images to their desire positions. It’s not combination of 3 or 2 images into 1 because a developer can even combine unlimited images into one. The word “sprites” is an ancient word which comes from a computer graphic industry. The idea was to fetch all the graphical data into memory and later on display it in the form of images. It was a perfect invention because it was extremely straightforward to fetch images once rather than fetching again and again. Following screenshot would surely clear your misconceptions.

How To Combine Images Into CSS Sprites:

Well, the process is not complicated at all. However, it’s essential that a person should combines different pictures into one file with perfection. We have divided the tutorial into two portions so that we can see the improvement we get after combining images into CSS Sprites.

Before Example: Let’s start the proceeding by showing the Before EXAMPLE (Demo). Notice the following CSS coding, where ten different images are combined rather than one. Therefore, HTTP request rises, and that cause the load time of a website to increase.

After Example: The main idea behind using a CSS sprite is to reduce the load time of a web page. Instead of having 10 different pictures, it’s essential to incorporate all pictures into one. We can easily combine them into one long picture. Now let’s demonstrate the After EXAMPLE (Demo). Notice in the following CSS coding that there is only one Image file in which 10 different pictures are combined and with the help of CSS Paddings plus Margins we can assign them with ease.

It decreases the number of HTTP requests, so it verifies that combining images into CSS sprites is something that every single webmaster should practice in his website. It’s a delightful achievement for such a small example. Just think of it, using this technique a person could convert his website into a paradise.

That’s Sounds Difficult? Try Some CSS Sprites Tools:

Well, things are not hard but we made them difficult for our self. However, this technique is not that much problematic, but it is complicated for those users who have no background about CSS and HTML. Nevertheless, there are few tools that would create CSS sprites without doing any coding whatsoever. Follow the following instructions.

Go to www.css-sprit.es (The best tool we found so far). Once the website gets load there will be three different tabs. Just select “Standard Upload” tab but later you can experiment with its other options in depth.

Input Images Files: We would recommend you to upload a picture that you want to combine into CSS. A person can also upload multiple images and this tool will automatically combine them into one.

Output Options: Select the Picture extension, we would endorse PNG file because it is highly compressed. Then Select CSS from the drop down menu and proceed to the next step.

Hover Image Processing: Now select the effect that a person want to see on his images whenever someone will hover over it. There are numerous effects available on the Rollover Effect drop down menu that includes Sepia, Invert and more. Once everything is wrap up just press the “Create CSS Sprites” button. NOTE: If you don't want to add any hover effect then select "None" from the drop down list.

After pressing the “Create CSS Sprites” button, just beneath that tool you will be able to see the PREVIEW, Image Sprite, CSS Code, and HTML Coding.

Now Copy the CSS coding. If you are using Blogger platform then go to Blogger.com >> Template >> Edit HTML >> Proceed. Search for ]]></b:skin> and above it paste the CSS coding. (Remember: From the CSS coding replace /your/image/url.png with the URL of the picture that you uploaded preciously). Finally, Save the Template.

Now Paste the HTML code wherever you want to display those image sprites. It could be in the header, footer and anywhere a person want them.

Some Popular Website That Uses CSS Sprites Technique:

What do you think website giants like Yahoo, Google, Bing disregards CSS Sprites? Well, all these gigantic websites use CSS sprites technique from the time they landed on the internet. It’s quite clear that this technique play’s significant role in reducing the HTTP Request and Load time of a website. Following are the few CSS Sprite Example that we collected from high quality websites.

From The Editor's Desk:

We are also using CSS Sprites in our Footer. However, we are thinking to use this splendid technique on the other part of our blog too. We are quite sure that this technique will increase the speed of websites by a large margin because Images soaks lots of memory and takes a while to load. Combining large pictures into CSS gives boost to site speed and provides user friendly experience. As we are marching towards the end of the series, the tutorials are getting more exciting. What do you think about the CSS Sprites? Suggest any Tip that we forgotten to include. Take care of your family pals till then, Peace, Blessings and Happy Learning.

As mentioned "Just Save the Image Sprite (Left click + Save Image As) and upload it onto your web hosting." What does this mean??? We have to upload to flickr or picasa like sites??? Am i corret?? Please rectify...

You can Upload the Image On Any Hosting that you like Either Picasa or any other website. As long as no one deletes it.

The main reason behind uploading image is that, you have to use it into CSS so you can't use your a image that is saved in your computer hard drive. For that reason we have to upload it on any hosting that you like. Peace

OMG YOU ARE AMAZING!!! This is THE BEST post ever!!! And believe me when I say this because I've been A LOT of other blogs, A LOT!!! and none of them could direct me like you did. I first tried it out on Adobe Dreamweaver and it works PERFECTLY! Check it out, I used it as my selection tabs. -http://francocreations.blogspot.com/p/start-page.htmlI am SO bookmarking this blog! ;-D

I want to use this method for my website ... so I have a image marquee widget so suppose I make a image sprite an now i have all the html, image and css file with me...will it workvisit my website http://www.couponlelo.in/ and there are 2 image marquees first on the top right side and second below the image slider ...... so will this work for the same

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

About MyBloggerLab

MyBloggerLab is a free online Blogger resource site. MBL was founded in the early days of 2012 by Syed Faizan Ali. The purpose of creating this site is to provide highly professional tips, top quality Tutorials, Practical SEO tips and methods to earn online.