diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md
index 36b8b8e2380..b912ac2b95f 100644
--- a/src/LazyImage/README.md
+++ b/src/LazyImage/README.md
@@ -37,6 +37,9 @@ page has been rendered:
{{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
data-hd-src="{{ asset('image/large.png') }}"
+ srcset="{{ asset('image/small.png') }} 1x, {{ asset('image/small2x.png') }} 2x"
+ data-hd-srcset="{{ asset('image/large.png') }} 1x, {{ asset('image/large2x.png') }} 2x"
+
{# Optional but avoids having a page jump when the image is loaded #}
width="200"
height="150"
diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js
index ef8a138fe1f..309c5d97baa 100644
--- a/src/LazyImage/Resources/assets/dist/controller.js
+++ b/src/LazyImage/Resources/assets/dist/controller.js
@@ -5,9 +5,15 @@ class controller extends Controller {
const hd = new Image();
hd.addEventListener('load', () => {
this.element.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ this.element.srcset = this.element.getAttribute('data-hd-srcset');
+ }
this._dispatchEvent('lazy-image:ready', { hd });
});
hd.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ hd.srcset = this.element.getAttribute('data-hd-srcset');
+ }
this._dispatchEvent('lazy-image:connect', { hd });
}
_dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
diff --git a/src/LazyImage/Resources/assets/src/controller.ts b/src/LazyImage/Resources/assets/src/controller.ts
index 403cab71875..5d0354342da 100644
--- a/src/LazyImage/Resources/assets/src/controller.ts
+++ b/src/LazyImage/Resources/assets/src/controller.ts
@@ -17,10 +17,16 @@ export default class extends Controller {
hd.addEventListener('load', () => {
this.element.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ this.element.srcset = this.element.getAttribute('data-hd-srcset');
+ }
this._dispatchEvent('lazy-image:ready', { hd });
});
hd.src = this.element.getAttribute('data-hd-src');
+ if (this.element.getAttribute('data-hd-srcset')) {
+ hd.srcset = this.element.getAttribute('data-hd-srcset');
+ }
this._dispatchEvent('lazy-image:connect', { hd });
}
diff --git a/src/LazyImage/Resources/assets/test/controller.test.ts b/src/LazyImage/Resources/assets/test/controller.test.ts
index aee473991e8..3d96b621f3e 100644
--- a/src/LazyImage/Resources/assets/test/controller.test.ts
+++ b/src/LazyImage/Resources/assets/test/controller.test.ts
@@ -34,10 +34,13 @@ describe('LazyImageController', () => {
beforeEach(() => {
container = mountDOM(`
-
+
`);
});