Reduce HTTP requests: Combine images into CSS sprite

[chirag-v]

For those who have several payment methods active, all images generate individual HTTP request. CSS sprites have to be generated manually, which involves generating one image of all logo. Uploading it to server. Pasting the appropriate css in stylesheet.

Would be great if this is possible out of the box.

We need a combined image of logos (preferably in all possible combinations) such as this: http://s16.postimg.org/3wss2n4ol/payment_methods_logos.png

Then make use of background-position property to render it in correct location.

Right now this can be done by adding something like this to style sheet:

//payment logo sprite
ul.accepted-payment-methods li.american-express span {
background-image: url("../images/amex.png");
background-image: url("/path/to/image/payment-methods-logo-stripe.png");
background-position: -6px -6px;
}
ul.accepted-payment-methods li.cash-on-delivery span {
background-image: url("../images/cod.png");
background-image: url("/path/to/image/payment-methods-logo-stripe.png");
background-position: -6px -90px;
}
ul.accepted-payment-methods li.mastercard span {
background-image: url("../images/mastercard.png");
background-image: url("/path/to/image/payment-methods-logo-stripe.png");
background-position: -6px -174px;
}
ul.accepted-payment-methods li.visa span {
background-image: url("../images/visa.png");
background-image: url("/path/to/image/payment-methods-logo-stripe.png");
background-position: -6px -258px;
}

[jameskoster]

Feel free to send a PR, I don't have time to do this myself atm.

[chirag-v]

Have sent through with all necessary changes.