What is image sprite in CSS

It is a technique to optimize the performance of website / web application in which all the images (mainly icons or header footer images) are combined in to the single image and this single image is loaded and using only a portion of image required for the control is displayed using CSS.

What are the benefits of sprite image

How to implement spite image in MVC 5

Step 1: Create your simple application having images / icons,

images

Step 2: Multiple free websites are available which helps you to create the sprite image and also generate .css file mentioned image sprite.

Some of the examples are:

  1. csssprites.com
  2. css.spritegen.com
  3. spritecow.com

Also there are software available which helps you to generate sprite image, I have tried by uploading all my icons and got my spite image as in the following,

spite

So I have included all these images in my solution.

solution

Step 3: Also include the css file which will give you separated icons as below,

  1. .sprite
  2. {
  3. background: url('Images/sprite.png') no - repeat top left;width: 204 px;height: 204 px;
  4. }
  5. .sprite.im1
  6. {
  7. background - position: 0 0;
  8. width: 256 px;
  9. height: 256 px;
  10. background - size: 20 % ;
  11. }
  12. .sprite.im2
  13. {
  14. background - position: 0 - 266 px;
  15. width: 256 px;
  16. height: 256 px;
  17. background - size: 20 % ;
  18. }
  19. .sprite.im3
  20. {
  21. background - position: 0 - 532 px;
  22. width: 204 px;
  23. height: 204 px;
  24. background - size: 20 % ;
  25. }
  26. .sprite.im4
  27. {
  28. background - position: 0 - 746 px;
  29. width: 204 px;
  30. height: 204 px;
  31. background - size: 20 % ;
  32. }
Step 4: Create the sample index page and add the following code,

Note: I have created two section Normal images and Sprite Images. In Normal Image all images are individually downloaded and in sprite image section use the css file mentioned in step 3.
  1. @ {
  2. ViewBag.Title = "Index";
  3. }
  6. < link href = "~/Content/Icon.css"
  7. rel = "stylesheet" / >
  9. < h2 > Index < /h2>
  11. < fieldset >
  12. < div id = "dvCategoryResults" >
  13. < b > Normal Images < /b> < table >
  14. < tr >
  15. < td >
  16. < img src = "~/Content/Images/next.jpg"
  17. alt = "Image"
  18. height = "50"
  19. width = "50" / >
  20. < br >
  21. < img src = "~/Content/Images/Pause.jpg"
  22. alt = "Image"
  23. height = "50"
  24. width = "50" / >
  25. < br >
  26. < img src = "~/Content/Images/prev.jpg"
  27. alt = "Image"
  28. height = "50"
  29. width = "50" / >
  30. < br >
  31. < img src = "~/Content/Images/stop.jpg"
  32. alt = "Image"
  33. height = "50"
  34. width = "50" / >
  35. < br >
  37. < /td> < /tr> < /table> < br >
  38. < br >
  39. < b > Sprite Images < /b> < table >
  40. < tr >
  41. < td class = 'sprite im1' > < /td> < td class = 'sprite im2' > < /td> < td class = 'sprite im3' > < /td> < td class = 'sprite im4' > < /td> < /tr> < /table>
  43. < /div>
  47. < /fieldset>
Step 5: Run the application and you will get as below,

index

Step 6: Performance test using Firebug,

test
As shown in above results 5 images are downloaded out of which 4 are for normal images section that collectively takes more time than the single image sprite.png which only takes 2 ms.

Also there are 4 that get response for normal way but for sprite way only on request for image section.

I hope you understood the concept attached project will help you to understand in more detail way.