I've seen in many websites, that they store multiple versions of an image, whether it is an icon, or a button, or anything else, in the same PNG file. I even stumbled upon a PNG, where there were 24 different versions of the image, which was used in a keyframe animation. How do I achieve this? Currently, I save all the versions of a single image in different files.

closed as off-topic by JonW Feb 28 '16 at 9:05

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Should be moved to graphic design. – Simon White Feb 28 '16 at 10:28
  • I'm fairly new to the community, and not being so well-versed with the rules, posted my question where it seemed to fit. Is there any way I can shift this question to another category? Or should I just delete it? – Mayank Arora Feb 28 '16 at 11:11

There are CSS sprites for that. CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

More information: https://css-tricks.com/css-sprites/

Not the answer you're looking for? Browse other questions tagged or ask your own question.