How To Use CSS Sprites With Light And Dark Mode

CSS sprites are a technique used in web development to reduce the number of HTTP requests made by a web page. They involve combining multiple small images into a single larger image file and then using CSS to display specific sections of that image as individual elements on the web page.

The primary benefit of using CSS sprites is that they can help improve the page load time for a website. Every time an image is loaded on a web page, it requires a separate HTTP request, which can slow down the loading process. By combining multiple images into a single sprite image, we can reduce the number of HTTP requests needed to load the page. This can result in a faster and more responsive website, especially for sites with many small images like icons and buttons.

Using CSS sprites also allows us to take advantage of browser caching. When a user visits a website, their browser will cache the sprite image after the first request. This means that subsequent requests for individual elements on the web page that are using the sprite image will be much faster since the browser will already have the image in its cache.

CSS Sprites Aren’t As Popular As They Once Were

CSS sprites are still commonly used to improve site speed, although they may not be as popular as they once were. Because of high bandwidth, webp formats, image compression, content delivery networks (CDN), lazy loading, and strong caching technologies, we don’t see as many CSS sprites as we used to on the web… although it’s still a great strategy. It’s especially useful if you have a page that is referencing a multitude of small images.

CSS Sprite Example

To use CSS sprites, we need to define the position of each individual image within the sprite image file using CSS. This is typically done by setting the background-image and background-position properties for each element on the web page that uses the sprite image. By specifying the x and y coordinates of the image within the sprite, we can display individual images as separate elements on the page. Here’s an example… we have two buttons in a single image file:

If we want the image on the left to be displayed, we can provide the div with arrow-left as the class so the coordinates only display that side:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

And if we wish to display the right arrow, we would set the class for our div to arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

CSS Sprites For Light And Dark Mode

One interesting use of this is with light and dark modes. Perhaps you have a logo or image that has dark text on it that isn’t visible on a dark background. I did this example of a button that has a white center for light mode and a dark center for dark mode.

Using CSS, I can display the appropriate image background based on whether the user is using light mode or dark mode:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

Exception: Email Clients May Not Support This

Some email clients, such as Gmail, do not support CSS variables, which are used in the example I provided to switch between light and dark modes. This means that you may need to use alternative techniques to switch between different versions of the sprite image for different color schemes.

Another limitation is that some email clients do not support certain CSS properties that are commonly used in CSS sprites, such as background-position. This can make it difficult to position individual images within the sprite image file.