Add comments and changelog

Author: vcua-mobify

packages/template-retail-react-app/CHANGELOG.md

@@ -9,6 +9,7 @@
 - Allow store to be selectable in StoreLocator [#2187](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2187)
 - [BUG] Fixed "getCheckboxProps is not a function" when rendering checkout page in generated app.[#2140](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2140)
 - Replace transfer basket call with merge basket on checkout [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
+- [BUG] Fix images being fetced multiple times on Safari [#2223](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223)
 
 ### Accessibility Improvements
 - [a11y] Fix LinkList component to follow a11y practise [#2098])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2098)

packages/template-retail-react-app/app/utils/responsive-image.js

@@ -38,6 +38,9 @@ export const getResponsiveImageAttributes = ({src, widths, breakpoints = default
     themeBreakpoints = breakpoints
     breakpointLabels = getBreakpointLabels(themeBreakpoints)
 
+    // Order of these attributes matter! If src is not last, Safari will refetch images
+    // multiple times (once when it processes src and again when it processes sizes / srcSet)
+    // See https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223
     return {
         sizes: mapWidthsToSizes(widths),
         srcSet: mapWidthsToSrcSet(widths, src),