I got a bad score 32 of "combine images using CSS sprites" from gtmetrix.com so I go to css.spritegen.com to generates my image and css code as follows:

[size=3]Your Image
Right-click to save this image.[/size=3]
[img]https://3dlens.com/images/sprites.png[/img]
I save the image at /images/sprites.png

[size=3]Your CSS
Save this to your CSS file.[/size=3]
.loyalty-points, .paypal-payment, .rapidssl, .bank-transfer, .china,
.japan, .taiwan, .close, .littlecart1, .minipadlock,
.sreviewcart, .sreviewcarthg
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.loyalty-points { background-position: -2px -0px; width: 72px; height: 34px; }
.paypal-payment { background-position: -2px -36px; width: 68px; height: 34px; }
.rapidssl { background-position: -2px -72px; width: 52px; height: 34px; }
.bank-transfer { background-position: -2px -108px; width: 51px; height: 34px; }
.china { background-position: -2px -144px; width: 30px; height: 20px; }
.japan { background-position: -34px -144px; width: 30px; height: 20px; }
.taiwan { background-position: -2px -166px; width: 30px; height: 20px; }
.close { background-position: -34px -166px; width: 21px; height: 21px; }
.littlecart1 { background-position: -56px -72px; width: 16px; height: 16px; }
.minipadlock { background-position: -56px -90px; width: 16px; height: 16px; }
.sreviewcart { background-position: -55px -108px; width: 12px; height: 12px; }
.sreviewcarthg { background-position: -55px -122px; width: 12px; height: 12px; }

[size=3]Your HTML
Use this to insert your sprite images.[/size=3]
<div class="loyalty-points"></div>
<div class="paypal-payment"></div>
<div class="rapidssl"></div>
<div class="bank-transfer"></div>
<div class="china"></div>
<div class="japan"></div>
<div class="taiwan"></div>
<div class="close"></div>
<div class="littlecart1"></div>
<div class="minipadlock"></div>
<div class="sreviewcart"></div>
<div class="sreviewcarthg"></div>

My question is how to integrate above image and code into my site,
Anyone knows how to do it?

Hi

To be very honest all that is really going to do is to get you a better score on gtmetrix, any gains for users will be minimal. It's not going to be possible to use the CSS Sprites for the store generated images though. You could try copy and paste with the flags as a test for example.

Andy

Please feel free to review / rate our software