More

    Tutorial – How to Make CSS Sprites for Images Overview- Part 1

    Must Read

    [Tried & Tested] Fix Frozen Windows 10 System Restore

    How long does system restore take?System Restore, taking long hours in Windows 10? Find how long does System Restore...

    Resolved: Error Code 0x80070570 In Windows 10

    When there is something wrong in any process of Windows, it notifies users by displaying an alert box on...

    Custom Front-End Web Development: Back To Basics

    Ever since the internet came into existence in 1983, nothing has ever been the same. From dial-up connection and...
    Tutorial - How to Make CSS Sprites for Images Overview- Part 1 3
    Sreejeshhttps://techgyo.com
    Hi there! I'm +Sreejesh and I am an internet enthusiast. I started writing on this blog as a hobby, now full time blogger. In this blog, I cover topics about blogging, and how to make money online, and also some interesting techy news, tips and tutorials. Checkout archives

    You’ve heard a lot about it, but what is it exactly?

    The name “Sprites” might be misleading, its not a cool drink anyway. As you know  a every image in the page is a HTTP-server request, the more of them on a page makes it less efficient, resulting in a much slower load time. So what you understood is : more images => more HTTP requests (links) => more work for the server.

     

    CSS Sprites is a technique use to append multiple images in to a single one and display parts of this sprite wherever necessary with positioning. This helps reducing the number of HTTP-requests and hence saves the overhead of having to fetch multiple images. Which is faster than having to continually fetch new images. Every single image, whether it’s an <img> tag or an background-image from your “style.css” page is a separate HTTP-Request to the server, so you can imagine how quickly those requests can wrack up.

    Using CSS sprites technique can help save bandwidth, make your site load much faster. Hope you all know that site speed is one of Google’s ranking factors.

     

    Still Confused? Check the below example:

    twitbird_css sprite

    [Sprite Image]

    Tutorial - How to Make CSS Sprites for Images Overview- Part 1 1

    css sprites code

    [CSS coding]

    down arrow css sprites

    [Hover over to see it in action]

    I hope the above example is well understood by all. Most of internet giants like YouTube, AOL, Yahoo have saved million in bandwidth cost and improved the performance of their site. The below is the Yahoo home page where you can see the CSS Sprites usage.

    Yahoo home page css sprites demo
    Yahoo home page

     

    How to Create CSS Sprites and implement them on the page?

    Until few years, it used to be much more intensive since you have to manually combine images and then position the background, finally do the tweaking necessary to make everything work. Fortunately, now there are many online tools that can help you create a CSS sprite with least effort.

     

    However, I realized that many bloggers especially webmasters with little CSS knowledge, are not aware of this technique or don’t really know how to use and implement it on the page. For beginners who don’t understand CSS, it might take some time to learn the basics and get going with it.  Anyway, its not a big thing to learn, most of you should be able to understand it with some basic logic. So, how to use CSS Sprites doesn’t have to be problem.

     

    This was an introduction post to CSS Sprites to give you a better understanding of exactly what they are, what they do, and the benefits that they can provide. Since I have to cut short the length of the page, I will be writing Step by Step CSS Sprites tutorial in the follow up post.

    In the follow up post (PART 2) I will be explaining detailed steps including a video tutorial for using CSS Sprites of your own and implementing them on your page to improve performance and ranking.

     

    Wait for the FOLLOW UP post to learn how to use CSS Sprites. You can subscribe to our email to receive the next post in your inbox or  follow us on twitter and Facebook fan page to get updated when we publish the Follow up post with the step by step instructions for creating CSS Sprites.


    - Advertisement -

    4 COMMENTS

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    - Advertisement -

    A Vivid Picture of What’s Next in the Digital World – #DellTechForum Showed It Right!

    Dell Technologies has once again played the winning cards with the first-ever virtual #DellTechForum. Bringing out a distinct depiction of how the digital future...

    [Tried & Tested] Fix Frozen Windows 10 System Restore

    How long does system restore take?System Restore, taking long hours in Windows 10? Find how long does System Restore take and why?When some data...

    Resolved: Error Code 0x80070570 In Windows 10

    When there is something wrong in any process of Windows, it notifies users by displaying an alert box on the screen having an error...

    Custom Front-End Web Development: Back To Basics

    Ever since the internet came into existence in 1983, nothing has ever been the same. From dial-up connection and AOL to Google Chrome and...

    More Articles Like This

    - Advertisement -