How To Combine Images Into CSS Sprites To Increase Blog Speed

Socialize It →

Tweet

12

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.

Introduction: How To Accelerate Blog Speed & Load Time? - Series

Tutorial #1: How To Analyze Your Site Speed With Online Tools?

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

About the Editorial Team

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