CSS Introduction | Advanced CSS | Image Sprite

Tags:

• CSS
• WEB

CSS Image Sprite

An image sprite is an image that combines several images into a single image for easier management.

When images are used on a web page, the browser requests each image from the server in order to download it.
If many images are used, the browser must send as many requests as there are images, which increases the page loading time.

Using an image sprite can reduce the number of server requests needed to download images to just a few.
On platforms with limited resources, such as mobile environments, this helps shorten web page loading time.
It is also convenient because you only need to manage a small number of sprite image files instead of many individual image files.

<style>
    .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
    .up { width: 21px; height: 20px; background-position: 0 0; }
    .down { width: 21px; height: 20px; background-position: -21px 0; }
    .right { width: 22px; height: 20px; background-position: -42px 0; }
    .left { width: 22px; height: 20px; background-position: -65px 0; }
</style>