Specify sizes where we use the Image component

Author: davisagli

frontend/packages/volto-light-theme/src/components/Blocks/Listing/GridTemplate.jsx

@@ -46,6 +46,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                     className="item-image"
                     item={item}
                     imageComponent={PreviewImageComponent}
+                    sizes="auto, (max-width: 940px) 100vw, 940px"
                   />
                 )}
                 <Card.Summary a11yLabelId={props.a11yLabelId}>

frontend/packages/volto-light-theme/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -44,6 +44,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                   item={item}
                   showPlaceholderImage={true}
                   imageComponent={PreviewImageComponent}
+                  sizes="auto, (max-width: 768px) 100vw, 220px"
                 />
                 <Card.Summary a11yLabelId={props.a11yLabelId}>
                   <Summary item={item} HeadingTag="h3" />

frontend/packages/volto-light-theme/src/components/Blocks/Slider/DefaultBody.jsx

@@ -117,6 +117,7 @@ const SliderBody = ({
                   alt=""
                   loading="lazy"
                   responsive={true}
+                  sizes="100vw"
                 />
               </div>
             )}

frontend/packages/volto-light-theme/src/components/Blocks/Slider/SliderVariants.jsx

@@ -124,6 +124,7 @@ const SliderVariants = ({
                   alt=""
                   loading="lazy"
                   responsive={true}
+                  sizes="auto, (max-width: 768px) 100vw, 50vw"
                 />
               </div>
             )}

frontend/packages/volto-light-theme/src/components/Blocks/Teaser/DefaultBody.tsx

@@ -31,6 +31,7 @@ const TeaserDefaultTemplate = (props) => {
         item={!data.overwrite ? href : { ...href, ...filteredData }}
         image={data.overwrite ? image : undefined}
         imageComponent={Image}
+        sizes="auto, (max-width: 940px) 100w, 940px"
       />
       <Card.Summary>
         <Summary

frontend/packages/volto-light-theme/src/components/Theme/ImageView.jsx

@@ -30,7 +30,13 @@ const ImageView = ({ content }) => {
       <h1 className="documentFirstHeading">{content.title}</h1>
       {content?.image?.download && (
         <figure>
-          <Image item={content} imageField="image" alt="" responsive={true} />
+          <Image
+            item={content}
+            imageField="image"
+            alt=""
+            responsive={true}
+            sizes="auto, (max-width: 940px) 100vw, 940px"
+          />
           <Caption
             title={content.title}
             description={content.description}

frontend/packages/volto-light-theme/src/primitives/Card/Card.tsx

@@ -94,10 +94,12 @@ type CardImageProps = {
   imageComponent?: React.ComponentType<any>;
   children?: React.ReactNode;
   showPlaceholderImage?: boolean;
+  sizes?: string;
 };
 
 const CardImage = (props: CardImageProps) => {
-  const { src, item, image, imageComponent, showPlaceholderImage } = props;
+  const { src, item, image, imageComponent, showPlaceholderImage, sizes } =
+    props;
   const Image = imageComponent || DefaultImage;
 
   return (
@@ -115,6 +117,7 @@ const CardImage = (props: CardImageProps) => {
             alt=""
             loading="lazy"
             responsive={true}
+            sizes={sizes}
           />
         )
       ) : (