CSS Image sprites are used to reduce the number of HTTP requests sent to the server. Collection of different images put together to form a single image at defined X and Y coordinates. After defining this generated image to relevant page elements, using the background-position CSS property we can then shift the visible area to the required component image.
CSS Image sprites are generally used for designing a graphic social media bar or a navigation bar to make it more attractive and efficient at the same time. It is just a method in HTML and CSS to implement a more efficient way of putting images and designing web pages.
Why we use image sprites:
To lower down the bandwidth used to load multiple images on a webpage.
To decrease the page loading time: A web page with more images, particularly many small images, such as icons, buttons, etc. can take a more time to load and generates multiple server requests.
Image Sprites - Create a Navigation List
To create a navigation list, you want to use an image sprite then use the HTML list because it can be a link and also supports a background image.
Image Sprites - Hover Effect
By using below code, you can add hover effect: