fix: responsive images on item page

apps/web/components/Gallery/Gallery.vue

@@ -26,8 +26,8 @@
             fit="fill"
             class="object-contain h-full w-full"
             :quality="80"
-            :src="productImageGetters.getImageUrl(image)"
-            sizes="2xs:100vw, md:700px"
+            :srcset="getSourceSet(image)"
+            sizes="2xs:370px xs:720px sm:740px md:1400px"
             draggable="false"
             :loading="index === 0 ? 'eager' : 'lazy'"
             :fetchpriority="index === 0 ? 'high' : 'auto'"
@@ -138,6 +138,20 @@ const lastVisibleThumbnailIntersected = ref(true);
 const activeIndex = ref(0);
 const imagesLoaded = ref([] as unknown as { [key: string]: boolean });
 
+const getSourceSet = (image: ImagesData) => {
+  const dpr = 2;
+  const secondPreview = productImageGetters.getImageUrlSecondPreview(image);
+  const preview = productImageGetters.getImageUrlPreview(image);
+  const middle = productImageGetters.getImageUrlMiddle(image);
+  const full = productImageGetters.getImageUrl(image);
+
+  return `
+    ${secondPreview} ${370 * dpr}w,
+    ${preview} ${700 * dpr}w,
+    ${middle} ${720 * dpr}w,
+    ${full} ${1400 * dpr}w
+  `;
+};
 onMounted(() => {
   nextTick(() => {
     for (const [index] of props.images.entries()) {

docs/changelog/changelog_en.md

@@ -46,6 +46,7 @@
 
 ### 🩹 Fixed
 
+- Item image now loads image url based on format and viewport
 - Shop logo is now preloaded.
 - Fixed the REST call to fetch the remote configuration in the build process.
 - Fixed: middleware calls being stuck in an infinite loop