Discourages use of the [lazysizes bgset extension](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset) instead of the CSS `image-set` attribute to load responsive background images.

You should avoid using third-party libraries over native browser features to avoid large JavaScript bundle sizes and slow load times. [Learn more about theme performance](/docs/storefronts/themes/best-practices/performance).

## Examples

The following examples contain code snippets that either fail or pass this check.

### ✗ Fail

The following example includes a `lazyload` class and a `data-bgset` attribute:



```html

<script src="ls.bgset.min.js"></script>
<script src="lazysizes.min.js"></script>
<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
</div>

```



### &#x2713; Pass

The following example uses the CSS `image-set()` attribute instead of `data-bgset`:



```html

<!-- CSS Stylesheet -->
.box {
  background-image: -webkit-image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}

<!-- HTML -->
<div class="box"></div>

```



## Disabling this check

This check is safe to [disable](/docs/storefronts/themes/tools/theme-check/configuration).