Only include the original image in the Image component if the image does not have all the scales present. Fixed and update tests.

.github/workflows/readme-link-check.yml

@@ -26,5 +26,6 @@ jobs:
           --exclude https://my-server-DNS-name.tld/api
           --exclude 2021.ploneconf.org
           --exclude https://www.lanku.eus/
+          --exclude https://medium.com/
           '**/README.md'
           'PACKAGES.md'

docs/source/conf.py

@@ -94,6 +94,7 @@
     r"https://browsersl.ist/#",
     r"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors#Identifying_the_issue",
     r"https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0",
+    r"https://medium.com",
 ]
 linkcheck_anchors = True
 linkcheck_timeout = 5

docs/source/upgrade-guide/index.md

@@ -333,6 +333,20 @@ We pinned the version of `sass` to `1.32.0`, which is the one before they introd
 It is unlikely that using this version will cause problems since no real new features were added in later versions that are relevant for Volto developers.
 In case that you need a later version of `sass` in your project or add-on, you can override it in your project's {file}`package.json` file.
 
+### The image component now includes the original image only if necessary
+```{versionadded} Volto 19.0.0-alpha.18
+```
+
+The `Image` component has been optimized to include the original image URL only when necessary.
+Now it is only included if the image does not have all the defined scales present, which could happen if the image uploaded originally is smaller than the defined scales.
+In other scenarios where all the scales are present, including the original image could lead the browser to choose it over the scaled versions, impacting performance.
+This happened especially in high-density resolution screens where the largest scale available was not enough for the browser to pick a scaled version.
+
+This is a breaking change for projects that relied on the original image always being present, for example, in those projects where the original image was always included for large displays, such as televisions or wide-screen displays.
+A pair of additional scales were added to cover those use cases, enough to cover the highest density screens at the largest common resolutions.
+Additionally, if your project relied on the original image to always be present, then you need to either add an additional scale to cover your use case, run the upgrade steps defined in `plone.volto>=6.0.0a0`, or, in Plone 6.2, to use the new image scales named `2k` and `4k`.
+
+
 (upgrading-to-volto-18-x-x)=
 
 ## Upgrading to Volto 18.x.x

packages/volto/news/7655.bugfix

@@ -0,0 +1 @@
+Only include the original image in the Image component if the image does not have all the scales present. Fixed and update tests. @sneridagh

packages/volto/src/components/manage/Blocks/Image/ImageSidebar.test.jsx

@@ -15,6 +15,7 @@ it('renders an Image Block Sidebar component', () => {
       create: {},
       data: {},
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
     intl: {
       locale: 'en',
       messages: {},

packages/volto/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -16,6 +16,7 @@ test('renders a Lead Image block Sidebar component', () => {
       locale: 'en',
       messages: {},
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
   });
 
   const component = renderer.create(

packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -64,6 +64,7 @@ const TeaserDefaultTemplate = (props) => {
                       alt=""
                       loading="lazy"
                       responsive={true}
+                      sizes="auto, (max-width: 940px) 100vw, 940px"
                     />
                   </div>
                 )

packages/volto/src/components/manage/TemplateChooser/TemplateChooser.test.jsx

@@ -13,6 +13,7 @@ test('renders a TemplateChooser component', () => {
       locale: 'en',
       messages: { templateid: 'Template default translation' },
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
   });
 
   const component = renderer.create(

packages/volto/src/components/manage/Toolbar/PersonalTools.test.jsx

@@ -23,6 +23,11 @@ describe('Toolbar Personal Tools component', () => {
       userSession: {
         token: jwt.sign({ sub: 'admin' }, 'secret'),
       },
+      site: {
+        data: {
+          'plone.image_scales': { preview: {}, listing: {} },
+        },
+      },
       content: {
         data: {
           '@type': 'Folder',
@@ -74,6 +79,11 @@ describe('Toolbar Personal Tools component', () => {
       userSession: {
         token: jwt.sign({ sub: 'admin' }, 'secret'),
       },
+      site: {
+        data: {
+          'plone.image_scales': { preview: {}, listing: {} },
+        },
+      },
       content: {
         data: {
           '@type': 'Folder',
@@ -126,6 +136,11 @@ describe('Toolbar Personal Tools component', () => {
       userSession: {
         token: jwt.sign({ sub: 'admin' }, 'secret'),
       },
+      site: {
+        data: {
+          'plone.image_scales': { preview: {}, listing: {} },
+        },
+      },
       content: {
         data: {
           '@type': 'Folder',

packages/volto/src/components/manage/Widgets/ImageWidget.jsx

@@ -296,7 +296,13 @@ const UnconnectedImageInput = (props) => {
       {selected && <ImageToolbar {...props} />}
       {/* If it's relation choice (preview_image_link) */}
       {isRelationChoice ? (
-        <Image item={value} width="fit-content" height="auto" loading="lazy" />
+        <Image
+          item={value}
+          width="fit-content"
+          height="auto"
+          loading="lazy"
+          sizes="320px"
+        />
       ) : (
         <Image
           className={props.className}

packages/volto/src/components/manage/Widgets/RegistryImageWidget.test.jsx

@@ -20,6 +20,7 @@ const createStore = () =>
       locale: 'en',
       messages: {},
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
   });
 
 describe('RegistryImageWidget', () => {

packages/volto/src/components/theme/Image/Image.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { useSelector } from 'react-redux';
 import {
   flattenToAppURL,
   flattenScales,
@@ -26,6 +27,9 @@ export default function Image({
   className = '',
   ...imageProps
 }) {
+  const site = useSelector((state) => state.site.data);
+  const siteImageScales = site?.['plone.image_scales'] || {};
+
   if (!item && !src) return null;
 
   // TypeScript hints for editor autocomplete :)
@@ -61,11 +65,16 @@ export default function Image({
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
       const sortedScales = Object.values({
         ...image.scales,
-        original: {
-          download: `${image.download}`,
-          width: image.width,
-          height: image.height,
-        },
+        ...(Object.keys(siteImageScales).length >
+        Object.keys(image.scales).length
+          ? {
+              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;