---
title: DeprecateBgsizes
description: >-
  Discourages use of the bgset extension instead of the image-set attribute for
  loading background images.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes
  md: >-
    https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes.md
api_name: liquid
---

# Deprecate​Bgsizes

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](https://shopify.dev/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 className="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
</div>
```

### ✓ 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 className="box"></div>
```

***

## Disabling this check

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

***