CSS Image Sprites

CSS image sprites are a technique used in web development to combine multiple small images into a single larger image called a sprite sheet. By doing so, the browser only needs to load one image, reducing the number of HTTP requests and improving page loading times.

Here’s how CSS image sprites work:

1. Create a Sprite Sheet: Gather all the small images you want to combine into a sprite sheet. Arrange them in a grid-like fashion, placing each image next to one another. The sprite sheet can be in any image format like PNG, JPEG, or GIF.
2. Define CSS Classes: For each image in the sprite sheet, you need to define a CSS class that specifies the width, height, and background position of the individual image within the sprite sheet. For example:

css

.icon {
  width: 32px;
  height: 32px;
  background-image: url('spritesheet.png');
}

3. Set Background Position: To display a specific image from the sprite sheet, use the background-position property to specify the coordinates of the desired image within the sprite sheet. The coordinates are typically given as negative values, where the x-coordinate represents the horizontal offset and the y-coordinate represents the vertical offset. For example:

css

.icon-home {
  background-position: 0px 0px; /* Display the image at the top-left position */
}

.icon-email {
  background-position: -32px 0px; /* Display the image shifted 32px to the left */
}

4. Apply CSS Classes: Now, you can use the defined CSS classes in your HTML markup by adding the corresponding class to an element. For example:

html

<div class="icon icon-home"></div>
<div class="icon icon-email"></div>

By using CSS image sprites, you can reduce the number of HTTP requests made by the browser, leading to faster page load times and a more efficient website.