Cache-Busting Background Images in SCSS

Caching is a common practice browsers use to store resources locally, enhancing load times. However, it can become problematic when developers make updates to images. Without cache-busting, users might continue to view outdated images from their local cache. This is where cache-busting comes into play. Cache-busting is a technique employed to overcome browser caching and guarantee that users always receive the most recent version of assets. In this article, we'll explore the significance of cache-busting for background images and introduce a handy SCSS mixin for implementing it effectively.

Introducing the SCSS Mixin

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url('#{$url}?v=#{$verId}'),
      comma
    );
  }
  background-image: $backgroundImages;
}

We can cache-bust our single or multiple background images with this mixin. Let's go over it in detail and explore the implementation of this SCSS mixin in 7 steps:

Unique Identifier
Mixin Definition
Variable Initialization
Loop through URLs
Cache Busting
Final Property
Implementing Cache-Busting

Unique Identifier

$verId: unique_id();

Adds a unique identifier ($verId) generated by the unique_id() function. This identifier is appended to each background image URL as a query parameter, ensuring that the browser recognizes the updated versions of the images.

Mixin Definition

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
}

Defines a mixin named cacheBustBgImages that accepts a variable number of arguments representing background image URLs.

Variable Initialization

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();
}

Initializes an empty list ($backgroundImages) to store processed background image URLs.

Loop through URLs

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
  }
}

Initiates a loop to iterate through each URL passed to the mixin.

Cache Busting

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url('#{$url}?v=#{$verId}'),
      comma
    );
  }
}

Appends each URL to the $backgroundImages list, adding a cache-busting query parameter (?v=#{$verId}) to ensure browser retrieval of the latest image version. The comma argument specifies that each URL should be separated by a comma.

Final Property

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url('#{$url}?v=#{$verId}'),
      comma
    );
  }
  background-image: $backgroundImages;
}

Sets the background-image property using the list of processed background images.

Implementing Cache-Busting

To utilize this mixin, include it in your SCSS and use it wherever background images need cache-busting:

.hero {
  @include cacheBustBgImages(
    'asset/images/hero__banner-lines.png',
    'asset/images/hero__banner-filter.jpg'
  );
}

Conclusion

Cache-busting is a critical technique in frontend development, ensuring that users always experience the latest version of background images. The provided SCSS mixin simplifies the implementation of cache-busting, appending a version parameter to each image URL. By grasping the importance of cache-busting and employing the mixin in your projects, you can guarantee a seamless and up-to-date user experience.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you're on a generous day, you can even buy me a coffee. 🙃

Serhat Bek