How To Combine Images Into CSS Sprites To Increase Blog Speed

Advertisements
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.

Tutorial #2: How To Combine Images into CSS Sprites To Reduce Load Time?
Tutorial #3: How To Compress JavaScripts To Improve Site Speed?
Tutorial #4: How To Avoid Useless Widgets That Increases Blog 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.

<style>
#mblsprites { width: 400px; margin: 8px auto; }

#mblsprites li {
  list-style-type:none;
font-size:2em;
}

#mblsprites li a {
background-position: left center;
background-repeat: no-repeat;
padding: 0 0 0 5px;
display: block;
height: 120px;
}

#mblsprites  li a.item1 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54zsI5mUV5aZ_i9vbH1BGEksbPovdTWAL2mbiSfROXz0XcXDmmWUH2xRSLnka28dQ4pNpSWmrNKjOuU-jxZ5v_m3cpkvHH-IS-tKyUdI3SWFTL4lwiWjY9fAZTAi7kjnvHEPAZCRjXrE/s1600/MBL.png')}
#mblsprites  li a:hover.item1 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzss8xeXSMIp0ehVidnv4a1q_lGjFHxhyicRtKYEpxnTdXOgTub4RaQnPR8SgSQ8Uh1QadIfY4f56BV2T_Ps35XxdBgvZfWy_uEyzlxJnPtm72wSp2UA12V6N_7sDBJHcK2-9SVzsD6JE/s1600/MBL_Color.png')}

#mblsprites  li a.item2 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4No87aho3v2T3zN90lXbc8TOWbo04-0BJ80t1U3CzNobiwo_6ukpTHgMRGixW6HFGrBEoNcToNMsLMYJWv6PvKyNhYWYt8FC5DKC81o4UzP2Mo_vJGHnVdbAoEfRt9CUdeaozDrS12Ww/s1600/HTML_BLACK.png')}
#mblsprites  li a:hover.item2 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirepE0Tj6QunRAILuspe2FsIPtEFn2RUQHTxR-Kpw-s-Zf3J9rO00jEhFmaWaH6gR3Ya4A1SWISx_9Lb8imxR6Nyp4u1QbGqlssuPlP-TK7lUISQq10kidwR_TwQlS10GGxKKdDNyMP9M/s1600/HTML_COLOR.png')}

#mblsprites  li a.item3 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3Hwa3hqcMkcGU87MvtCw2xfYtXrXYxDuc7tUYY5nsw9WNZDBuRO6-4FDvWlR-JaFLNRuZxha3mH3CIMibohWyB8pkjvF56QvTInKFlD9am7Y6OtmMCVQ5tsGY1cNMHrS55HdTksv_o8/s1600/BLOGGER_NOCOLOR.png')}
#mblsprites  li a:hover.item3 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsP7dmtYKI2Di0FuzhQaEpH0Po5UAQ0Fs5uDv3_nJuj4HR-xSCCl-n8lEA1l30jSoeqsWuJ5lYIIDC1_SnofIoljZaxex6ZJCBMcu25NGbzaBmQ0g-UOPMN4z8XNcSL-8-Tsc6jCJW4o/s1600/BLOGGER-COLOR.png')}

#mblsprites  li a.item4 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdANkZ4DFC8kZwNdF9W403BXh47at33sSI7om5B39o2YqhszZfP0gL_Lon1v01iJwNh2zo-5IjpTKZT1OKCZtUT8-owaL7rc6_oUkOIgdAy5-d1KzQ7Y1KQaz6kI4QnsZHVJcVfnYpimE/s1600/CSS_BLACK.png')}
#mblsprites  li a:hover.item4 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfB7Bok62Kxnm5BEBGERKagFrEaL_WVjP0kyahjqe5xVA6Gz2Essl_xe7YwJbfskr90VOKqidFObny7EiXZ4gKWR2l6C4KRuzS5zvaG3T9i-fFblKTJ0Joy-ei8XL4tmAVemaNk66aYE/s1600/CSS_COLOR.png')}

#mblsprites  li a.item5 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinVRXByRZPe1AHD79MuUwmkHgiemPiO3sn8ntif1NP2fCSulo7YeA_eBfMC2f4snY4wISguHDyQ5XkFp8N4jNZAjl10YUMxPMn815oWCZKWTykrmYzInpVThtNS4eXCi4K9O4l1w03sKc/s1600/Jquery_Black.png')}
#mblsprites  li a:hover.item5 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYBcIJQNbXbCZaeGZy7Ie7PqngOFb9immcjnPm5CRHLswaRLCtFq2AGz5YfCl4VfczA2KmgtfMIu7UPFJ2-CSZs5k-eoxQDwtKXS0lQjyPocEZBJ2LpqGad1cfDR5ibODWpJq7gZsjrQg/s1600/Jquery_Color.png')}
</style>

<ul id="mblsprites">
     <li><a class="item1" href="#" title="Some Link 1"></a></li>
     <li><a class="item2" href="#" title="Some Link 2"></a></li>
     <li><a class="item3" href="#" title="Some Link 3"></a></li>
     <li><a class="item4" href="#" title="Some Link 4"></a></li>
     <li><a class="item5" href="#" title="Some Link 5"></a></li>
    </ul>
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.

<style>
.mblsprites {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8bk_fYW04mJd3eOlbiWtb7AvDKuPKh32KyaUF1BuHC5vunEFJrZu-zdPQLlDVY4bPrEIVL0OmIp1wihrO0sXi9s-7FaGBIKJoTvabNWhNANkLUuHjsVu5_AiwaZ-yZF0EY_HlPuf_nk/s1600/NEW.png);
background-color: transparent;
background-repeat: no-repeat;
 }

 #MBLLOGO {
   height:104px;
   width:201px;
   margin-bottom:5px;
   background-position:-0px -104px;
 }
 #MBLLOGO:hover {
   background-position:-0px 0px;
 }

 #BLOGGERLOGO {
   height:104px;
   width:104px;
   margin-bottom:5px;
   background-position:-201px -104px;
 }
 #BLOGGERLOGO:hover {
   background-position:-201px 0px;
 }

 #HTML5LOGO {
   height:104px;
   width:104px;
   margin-bottom:5px;
   background-position:-305px -104px;
 }

 #HTML5LOGO:hover {
   background-position:-305px 0px;
 }

 #CSS3LOGO {
   height:104px;
   width:104px;
   margin-bottom:5px;
   background-position:-409px -104px;
 }

 #CSS3LOGO:hover {
   background-position:-409px 0px;
 }

 #JQUERYLOGO {
   height:104px;
   width:125px;
   margin-bottom:5px;
   background-position:-513px -104px;
 }
 #JQUERYLOGO:hover {
   background-position:-513px 0px;
 }
</style>

<div class="mblsprites" id="MBLLOGO"></div>
<div class="mblsprites" id="BLOGGERLOGO"></div>
<div class="mblsprites" id="HTML5LOGO"></div>
<div class="mblsprites" id="CSS3LOGO"></div>
<div class="mblsprites" id="JQUERYLOGO"></div>

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. 
  • Just Save the Image Sprite (Left click + Save Image As) and upload it onto your web hosting.
  • 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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

12 comments

November 6, 2012 at 11:37 AM

Greay post; thanks

November 6, 2012 at 7:25 PM

Nice :)

November 6, 2012 at 8:18 PM

I am extremely sorry brother but I still could not understand the concept of Css sprites.

Editorial Team MOD
November 6, 2012 at 11:49 PM

Dude In short its a technique in which you combine images into CSS and which increases the Speed of a Page. For Example In Image Sprites you will attach all different pictures into one File.

While if you use 20 different image files then it will reduce the page speed. and hence it will damage your visiotors. Hope that helps. Peace

November 7, 2012 at 1:22 AM

Good Awesome post. Thanks for sharing :)

Regards
Rahul Kashyap
Blog: SDWallpic.com

November 7, 2012 at 5:47 AM

now thats a awesome post! i want to post on MBL! ;)

Best Regards,
MyPremiumTricks

Anonymous
November 7, 2012 at 12:47 PM

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...

Editorial Team MOD
November 7, 2012 at 12:59 PM

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

November 30, 2012 at 9:53 AM

brother,ur blog is awesome , love it .. I was looking for css sprite guidance and glad to find it here
I just wanted to know how to replace url in this case

#newsletter .widget-title {
background: url("") no-repeat scroll 243px 1px transparent;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
text-transform: none;



lets assume I have the codes with me

.sprites {
background-image : url(http://1.bp.blogspot.com/-l2m2ucFt5SY/ULjmo4jZSWI/AAAAAAAAK2I/i_3Prh7btiA/index.png);
background-color : transparent;
background-repeat : no-repeat;
}

#image_19809996822148956_png {
height : 2px;
width : 2px;
background-position : -0px -2px;
}



HTML

div class="sprites" id="image_19809996822148956_png"> </div

May 31, 2013 at 7:16 AM

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.html
I am SO bookmarking this blog! ;-D

February 9, 2014 at 4:49 AM

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 work
visit 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

Editorial Team MOD
February 10, 2014 at 11:14 AM

I suppose yes

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.