A Detailed Explanation of CSS Sprites Technology

I. What are CSS Sprites?
CSS Sprites (often called sprite sheets or image sprites) is a technique that merges multiple small icons or background images into one large image. By using the CSS background-position property to precisely display specific parts of the large image, it reduces the number of HTTP requests and improves webpage loading performance.

II. Why are CSS Sprites Needed?

1. Reduce Server Requests: Each image file requires an HTTP request. Merging images can significantly reduce the number of requests, which was particularly important for the concurrent request limits of early browsers (like IE6-7).
2. Improve Loading Speed: Even with HTTP/2 multiplexing, reducing the number of requests still lowers network overhead.
3. Preloading Effect: The merged large image loads at once, avoiding flickering caused by loading hover images only during user interaction (like hovering).

III. Detailed Implementation Steps
Assume we need to display three 20x20 pixel icons (e.g., Home, Search, Settings).

Step 1: Merge Images

• Use design tools (like Photoshop, Figma) or online tools (like Toptal CSS Sprite Generator) to merge the three icons into one large image.
• The merging can be horizontal (total width 60px, height 20px) or vertical (width 20px, height 60px). Here we use horizontal as an example:

  [Home Icon 20x20][Search Icon 20x20][Settings Icon 20x20]
  

Step 2: Write HTML Structure

• Create container elements (like \u003cli\u003e or \u003cspan\u003e) for each icon and add class names:

  \u003cul class="sprite-container"\u003e
    \u003cli class="icon-home"\u003eHome\u003c/li\u003e
    \u003cli class="icon-search"\u003eSearch\u003c/li\u003e
    \u003cli class="icon-settings"\u003eSettings\u003c/li\u003e
  \u003c/ul\u003e
  

Step 3: Basic CSS Setup

• Set common styles for all icon elements, including referencing the merged large image:

  .sprite-container li {
    width: 20px;
    height: 20px;
    background-image: url("sprites.png"); /* Path to the large image */
    background-repeat: no-repeat; /* Prevent tiling */
    list-style: none; /* Remove default list styling */
  }
  

Step 4: Position Each Icon

• Use background-position to adjust the displayed part of the large image. Coordinate calculation rules:
  • For horizontal arrangement: The first icon position is 0 0, the second is -20px 0 (shift left 20px to show the second icon).
  • For vertical arrangement: The second icon position is 0 -20px (shift up 20px).

  .icon-home {
    background-position: 0 0; /* Show the leftmost part of the large image */
  }
  .icon-search {
    background-position: -20px 0; /* Shift left 20px to show the middle part */
  }
  .icon-settings {
    background-position: -40px 0; /* Shift left 40px to show the right part */
  }
  

IV. Advanced Application: Hover Effects

• If you need to switch icons on hover, you can merge the normal and hover state icons into one image (e.g., two rows of icons) and achieve the switch by adjusting the vertical position:

  .icon-home {
    background-position: 0 0;
  }
  .icon-home:hover {
    background-position: 0 -20px; /* Shift up 20px to show the corresponding icon in the second row */
  }
  

V. Precautions

1. Spacing Management: Leave gaps between icons when merging to avoid adjacent icons being revealed during positioning.
2. Retina Screen Adaptation: Provide a large image at 2x size and scale it using background-size:

   .sprite-container li {
     background-image: url("sprites@2x.png");
     background-size: 60px 40px; /* Half of the original large image dimensions */
   }
   

3. Maintenance Cost: Adding or removing icons requires regenerating the large image and adjusting CSS. Automation tools (like Webpack) can help.

VI. Modern Alternatives

• Icon Fonts (e.g., Font Awesome): Vector scaling is lossless, but colors are limited.
• SVG Sprites: Vector characteristics, support multiple colors, and can be referenced via the \u003cuse\u003e tag.
• HTTP/2 Multiplexing: Reduces the necessity of minimizing request counts, but CSS Sprites are still suitable for scenarios with a large number of small icons.