Generate a default srcset for an image returned by the Shopify CDN

.changeset/wild-rabbits-reflect.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+[#1245] - Generate a default srcset for an image returned by the Shopify CDN on the Image component and allow using a custom set of `widths.`

docs/components/primitive/image.md

@@ -74,6 +74,7 @@ export default function ExternalImageWithLoader() {
 | height         | <code>height &#124; string</code>                              | The integer or string value for the height of the image. This is a required prop when `src` is present.                                                                                                        |
 | loader?        | <code>(props: ShopifyLoaderParams &#124; LoaderOptions) => string</code> | A custom function that generates the image URL. Parameters passed in are either `ShopifyLoaderParams` if using the `data` prop, or the `LoaderOptions` object that you pass to `loaderOptions`. |
 | loaderOptions? | <code>ShopifyLoaderOptions &#124; LoaderOptions</code>       | An object of `loader` function options. For example, if the `loader` function requires a `scale` option, then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop is used, the object shape will be `ShopifyLoaderOptions`. When the `src` prop is used, the data shape is whatever you define it to be, and this shape will be passed to `loader`. |
+| widths?         | <code>(number &#124; string)[]</code>                              | An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`. It only Applies to images from the Shopify CDN.       
 
 ## Component type
 

packages/hydrogen/src/components/Image/Image.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import {getShopifyImageDimensions, shopifyImageLoader} from '../../utilities';
+import {
+  getShopifyImageDimensions,
+  shopifyImageLoader,
+  addImageSizeParametersToUrl,
+} from '../../utilities';
 import type {Image as ImageType} from '../../storefront-api-types';
 import type {PartialDeep, Simplify, SetRequired} from 'type-fest';
 
@@ -62,6 +66,10 @@ export type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
    * 'src' shouldn't be passed when 'data' is used.
    */
   src?: never;
+  /**
+   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.
+   */
+  widths?: (HtmlImageProps['width'] | ImageType['width'])[];
 };
 
 function ShopifyImage({
@@ -71,6 +79,7 @@ function ShopifyImage({
   loading,
   loader = shopifyImageLoader,
   loaderOptions,
+  widths,
   ...rest
 }: ShopifyImageProps) {
   if (!data.url) {
@@ -107,6 +116,20 @@ function ShopifyImage({
     });
   }
 
+  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width
+  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original
+  const maxWidth =
+    width && finalWidth && width < finalWidth ? width : finalWidth;
+  const finalSrcset =
+    rest.srcSet ??
+    internalImageSrcSet({
+      ...loaderOptions,
+      widths,
+      src: data.url,
+      width: maxWidth,
+      loader,
+    });
+
   /* eslint-disable hydrogen/prefer-image-component */
   return (
     <img
@@ -117,6 +140,7 @@ function ShopifyImage({
       src={finalSrc}
       width={finalWidth ?? undefined}
       height={finalHeight ?? undefined}
+      srcSet={finalSrcset}
     />
   );
   /* eslint-enable hydrogen/prefer-image-component */
@@ -213,3 +237,48 @@ function ExternalImage<GenericLoaderOpts>({
   );
   /* eslint-enable hydrogen/prefer-image-component */
 }
+
+type InternalShopifySrcSetGeneratorsParams = Simplify<
+  ShopifyLoaderOptions & {
+    src: ImageType['url'];
+    widths?: (HtmlImageProps['width'] | ImageType['width'])[];
+    loader?: (params: ShopifyLoaderParams) => string;
+  }
+>;
+// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions
+// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag
+const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+function internalImageSrcSet({
+  src,
+  width,
+  crop,
+  scale,
+  widths,
+  loader,
+}: InternalShopifySrcSetGeneratorsParams) {
+  const hasCustomWidths = widths && Array.isArray(widths);
+  if (hasCustomWidths && widths.some((size) => isNaN(size as number)))
+    throw new Error(
+      `<Image/>: the 'widths' property of 'ShopifyLoaderOptions' must be an array of numbers`
+    );
+
+  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
+  if (
+    !hasCustomWidths &&
+    width &&
+    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]
+  )
+    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
+  return setSizes
+    .map(
+      (size) =>
+        `${srcGenerator({
+          src,
+          width: size,
+          crop,
+          scale,
+        })} ${size}w`
+    )
+    .join(', ');
+}

packages/hydrogen/src/components/Image/tests/Image.test.tsx

@@ -144,6 +144,23 @@ describe('<Image />', () => {
         alt: 'Fancy image',
       });
     });
+
+    it('generates a default srcset', () => {
+      const mockUrl = 'https://cdn.shopify.com/someimage.jpg';
+      const sizes = [352, 832, 1200, 1920, 2560];
+      const expectedSrcset = sizes
+        .map((size) => `${mockUrl}?width=${size} ${size}w`)
+        .join(', ');
+      const image = getPreviewImage({
+        url: mockUrl,
+      });
+
+      const component = mount(<Image data={image} />);
+
+      expect(component).toContainReactComponent('img', {
+        srcSet: expectedSrcset,
+      });
+    });
   });
 
   describe('External image', () => {