Fix next/image being downloaded multiple times on Safari

packages/next/client/image.tsx

@@ -150,7 +150,6 @@ function generateImgAttrs({
   const last = widths.length - 1
 
   return {
-    src: loader({ src, quality, width: widths[last] }),
     sizes: !sizes && kind === 'w' ? '100vw' : sizes,
     srcSet: widths
       .map(
@@ -160,6 +159,14 @@ function generateImgAttrs({
           }${kind}`
       )
       .join(', '),
+
+    // It's intended to keep `src` the last attribute because React updates
+    // attributes in order. If we keep `src` the first one, Safari will
+    // immediately start to fetch `src`, before `sizes` and `srcSet` are even
+    // updated by React. That causes multiple unnecessary requests if `srcSet`
+    // and `sizes` are defined.
+    // This bug cannot be reproduced in Chrome or Firefox.
+    src: loader({ src, quality, width: widths[last] }),
   }
 }
 

test/integration/image-component/basic/pages/index.js

@@ -7,6 +7,13 @@ const Page = () => {
   return (
     <div>
       <p>Hello World</p>
+      <Image
+        id="image-with-sizes"
+        src="/test-sizes.jpg"
+        width={2000}
+        height={100}
+        sizes="100vw"
+      />
       <Image
         id="basic-image"
         src="foo.jpg"

test/integration/image-component/basic/test/index.test.js

@@ -283,6 +283,18 @@ describe('Image Component Tests', () => {
         )
       ).toBe(false)
     })
+    it('should only be loaded once if `sizes` is set', async () => {
+      // Get all network requests
+      const resourceEntries = await browser.eval(
+        'window.performance.getEntries()'
+      )
+
+      // "test-sizes.jpg" should only occur once
+      const requests = resourceEntries.filter((entry) =>
+        entry.name.includes('test-sizes.jpg')
+      )
+      expect(requests.length).toBe(1)
+    })
     describe('Client-side Errors', () => {
       beforeAll(async () => {
         await browser.eval(`(function() {