Merge remote-tracking branch 'upstream/canary' into required-server-files

Author: ijjk

docs/api-reference/next/image.md

@@ -93,7 +93,9 @@ Try it out:
 
 ### sizes
 
-A string mapping media queries to device sizes. Defaults to [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes).
+A string mapping media queries to device sizes. Defaults to `100vw`.
+
+We recommend setting `sizes` when `layout="responsive"` and your image will not be the same width as the viewport.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
 

packages/next/client/image.tsx

@@ -151,9 +151,7 @@ function generateImgAttrs({
     .join(', ')
 
   if (!sizes && kind === 'w') {
-    sizes = widths
-      .map((w, i) => (i === last ? `${w}px` : `(max-width: ${w}px) ${w}px`))
-      .join(', ')
+    sizes = '100vw'
   }
 
   src = callLoader({ src, quality, width: widths[last] })

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

@@ -222,9 +222,7 @@ function runTests(mode) {
       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
         '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w'
       )
-      expect(await browser.elementById(id).getAttribute('sizes')).toBe(
-        '(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px'
-      )
+      expect(await browser.elementById(id).getAttribute('sizes')).toBe('100vw')
       await browser.setDimensions({
         width: width + delta,
         height: height + delta,
@@ -264,9 +262,7 @@ function runTests(mode) {
       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
         '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w'
       )
-      expect(await browser.elementById(id).getAttribute('sizes')).toBe(
-        '(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px'
-      )
+      expect(await browser.elementById(id).getAttribute('sizes')).toBe('100vw')
       await browser.setDimensions({
         width: width + delta,
         height: height + delta,
@@ -306,9 +302,7 @@ function runTests(mode) {
       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
         '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w'
       )
-      expect(await browser.elementById(id).getAttribute('sizes')).toBe(
-        '(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px'
-      )
+      expect(await browser.elementById(id).getAttribute('sizes')).toBe('100vw')
       expect(await getComputed(browser, id, 'width')).toBe(width)
       expect(await getComputed(browser, id, 'height')).toBe(height)
       const delta = 150