Image Sprite Using CSS in MVC 5

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

  • Significantly optimize the performance of your website or web application.
  • Reduces the count of HTTP request.
  • Helps in optimized hover effect.

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. }  
  4.   
  5.   
  6. < link href = "~/Content/Icon.css"  
  7. rel = "stylesheet" / >  
  8.   
  9.     < h2 > Index < /h2>  
  10.   
  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 >  
  36.   
  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>  
  42.   
  43. < /div>  
  44.   
  45.   
  46.   
  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.


Similar Articles