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.
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/