DeprecateBgsizes
Discourages use of the lazysizes bgset extension 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.
Anchor to ExamplesExamples
The following examples contain code snippets that either fail or pass this check.
Anchor to ✗ Fail✗ Fail
The following example includes a lazyload class and a data-bgset attribute:
<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>
Anchor to ✓ Pass✓ Pass
The following example uses the CSS image-set() attribute instead of data-bgset:
<!-- 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>
Anchor to Disabling this checkDisabling this check
This check is safe to disable.
Was this page helpful?