Responsive Background Images

Lightweight (< 2kb minified) vanilla JS plugin for loading dynamic background images.

Reuses already loaded images, to avoid loading a smaller image when we already have a bigger one.

This featured can be individually tweaked to force loading of those smaller images (useful when image art differs between sizes).

Usage

Add the JS at the end of the body. The script initializes automatically on load and adds a resize handler that sets the corresponding background-image on breakpoint change.

<script src="responsive-background-images.min.js" defer></script>

Add the element with responsive background images

<div 
  data-background-image-srcset="
  img.450.jpg 450w, 
  img.850.jpg 850w, 
  img.1280.jpg 1280w, 
  img.1740.jpg 1740w">
</div>

If you need any size to be always loaded, add "force" to the set

<div 
  data-background-image-srcset="
  img.450.jpg 450w, 
  img.850.jpg 850w force, 
  img.1280.jpg 1280w, 
  img.1740.jpg 1740w">
</div>