W-17609247 - Fix Safari bug where the same image loads several times (#2223)

* Move src to be below srcSet

* 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,10 +38,13 @@ 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 {
-        src: getSrcWithoutOptionalParams(src),
         sizes: mapWidthsToSizes(widths),
-        srcSet: mapWidthsToSrcSet(widths, src)
+        srcSet: mapWidthsToSrcSet(widths, src),
+        src: getSrcWithoutOptionalParams(src)
     }
 }