Fix blurry images (volto17) (#6637)

plone · Jan 31, 2025 · bd2403d · bd2403d
1 parent d05192c
commit bd2403d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/news/6637.bugfix b/news/6637.bugfix
@@ -0,0 +1 @@
+Display the appropriately sized image to eliminate blurring from upsizing smaller images in the `srcSet` generation. @giuliaghisini
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap
@@ -21,7 +21,7 @@ exports[`renders a Lead Image block Sidebar component 1`] = `
       height={400}
       sizes="188px"
       src="/image.png/@@images/image-1200.png"
-      srcSet="/image.png/@@images/image-400.png 400w"
+      srcSet="/image.png/@@images/image-400.png 400w, /image.png/@@images/image-1200.png 400w"
       width={400}
     />
   </div>

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
@@ -54,7 +54,14 @@ export default function Image({
     attrs.className = cx(className, { responsive });
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
-      const sortedScales = Object.values(image.scales).sort((a, b) => {
+      const sortedScales = Object.values({
+        ...image.scales,
+        original: {
+          download: `${image.download}`,
+          width: image.width,
+          height: image.height,
+        },
+      }).sort((a, b) => {
         if (a.width > b.width) return 1;
         else if (a.width < b.width) return -1;
         else return 0;

diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -7,7 +7,7 @@ exports[`renders an image component from a catalog brain 1`] = `
   fetchpriority="high"
   height={400}
   src="/image/@@images/image.png"
-  srcSet="/image/@@images/image-400.png 400w"
+  srcSet="/image/@@images/image-400.png 400w, /image/@@images/image.png 400w"
   width={400}
 />
 `;
@@ -19,7 +19,7 @@ exports[`renders an image component from a catalog brain using \`preview_image_l
   fetchpriority="high"
   height={400}
   src="/image.png/@@images/image.png"
-  srcSet="/image.png/@@images/image-400.png 400w"
+  srcSet="/image.png/@@images/image-400.png 400w, /image.png/@@images/image.png 400w"
   width={400}
 />
 `;
@@ -40,7 +40,7 @@ exports[`renders an image component with fetchpriority high 1`] = `
   fetchpriority="high"
   height={400}
   src="/image/@@images/image.png"
-  srcSet="/image/@@images/image-400.png 400w"
+  srcSet="/image/@@images/image-400.png 400w, /image/@@images/image.png 400w"
   width={400}
 />
 `;
@@ -53,7 +53,7 @@ exports[`renders an image component with lazy loading 1`] = `
   height={400}
   loading="lazy"
   src="/image/@@images/image.png"
-  srcSet="/image/@@images/image-400.png 400w"
+  srcSet="/image/@@images/image-400.png 400w, /image/@@images/image.png 400w"
   width={400}
 />
 `;
@@ -65,7 +65,7 @@ exports[`renders an image component with responsive class 1`] = `
   fetchpriority="high"
   height={400}
   src="/image/@@images/image-1200.png"
-  srcSet="/image/@@images/image-400.png 400w"
+  srcSet="/image/@@images/image-400.png 400w, /image/@@images/image-1200.png 400w"
   width={400}
 />
 `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Display the appropriately sized image to eliminate blurring from upsizing smaller images in the `srcSet` generation. @giuliaghisini