Fix Image srcset to ensure the component's width is the largest possible image

packages/next/client/image.tsx

@@ -104,29 +104,45 @@ function callLoader(loaderProps: CallLoaderProps) {
 
 type SrcSetData = {
   src: string
-  widths: number[]
-  quality?: string
+  unoptimized: boolean
+  width: number | undefined
+  quality: string | undefined
 }
 
-function generateSrcSet({ src, widths, quality }: SrcSetData): string {
+function generateSrcSet({
+  src,
+  unoptimized,
+  width,
+  quality,
+}: SrcSetData): string | undefined {
   // At each breakpoint, generate an image url using the loader, such as:
   // ' www.example.com/foo.jpg?w=480 480w, '
+  if (unoptimized) {
+    return undefined
+  }
+  let widths = configSizes
+  if (typeof width === 'number') {
+    widths = configSizes.filter((size) => size <= width)
+    if (widths.length === 0) {
+      widths = [configSizes[0]]
+    }
+  }
   return widths
-    .map((width: number) => `${callLoader({ src, width, quality })} ${width}w`)
+    .map((w) => `${callLoader({ src, width: w, quality })} ${w}w`)
     .join(', ')
 }
 
 type PreloadData = {
   src: string
-  widths: number[]
+  unoptimized: boolean
+  width: number | undefined
   sizes?: string
-  unoptimized?: boolean
   quality?: string
 }
 
 function generatePreload({
   src,
-  widths,
+  width,
   unoptimized = false,
   sizes,
   quality,
@@ -142,13 +158,23 @@ function generatePreload({
         as="image"
         href={computeSrc(src, unoptimized, quality)}
         // @ts-ignore: imagesrcset and imagesizes not yet in the link element type
-        imagesrcset={generateSrcSet({ src, widths, quality })}
+        imagesrcset={generateSrcSet({ src, unoptimized, width, quality })}
         imagesizes={sizes}
       />
     </Head>
   )
 }
 
+function getInt(x: unknown): number | undefined {
+  if (typeof x === 'number') {
+    return x
+  }
+  if (typeof x === 'string') {
+    return parseInt(x, 10)
+  }
+  return undefined
+}
+
 export default function Image({
   src,
   sizes,
@@ -165,6 +191,13 @@ export default function Image({
   const thisEl = useRef<HTMLImageElement>(null)
 
   if (process.env.NODE_ENV !== 'production') {
+    if (!src) {
+      throw new Error(
+        `Image is missing required "src" property. Make sure you pass "src" in props to the \`next/image\` component. Received: ${JSON.stringify(
+          { width, height, quality, unsized }
+        )}`
+      )
+    }
     if (!VALID_LOADING_VALUES.includes(loading)) {
       throw new Error(
         `Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(
@@ -200,58 +233,23 @@ export default function Image({
     }
   }, [thisEl, lazy])
 
-  // Generate attribute values
-  const imgSrc = computeSrc(src, unoptimized, quality)
-  const imgSrcSet = !unoptimized
-    ? generateSrcSet({
-        src,
-        widths: configSizes,
-        quality,
-      })
-    : undefined
-
-  let imgAttributes:
-    | {
-        src: string
-        srcSet?: string
-      }
-    | {
-        'data-src': string
-        'data-srcset'?: string
-      }
-  if (!lazy) {
-    imgAttributes = {
-      src: imgSrc,
-    }
-    if (imgSrcSet) {
-      imgAttributes.srcSet = imgSrcSet
-    }
-  } else {
-    imgAttributes = {
-      'data-src': imgSrc,
-    }
-    if (imgSrcSet) {
-      imgAttributes['data-srcset'] = imgSrcSet
-    }
-    className = className ? className + ' __lazy' : '__lazy'
-  }
-
+  let widthInt = getInt(width)
+  let heightInt = getInt(height)
   let divStyle: React.CSSProperties | undefined
   let imgStyle: React.CSSProperties | undefined
   let wrapperStyle: React.CSSProperties | undefined
   if (
-    typeof height !== 'undefined' &&
-    typeof width !== 'undefined' &&
+    typeof widthInt !== 'undefined' &&
+    typeof heightInt !== 'undefined' &&
     !unsized
   ) {
     // <Image src="i.png" width={100} height={100} />
     // <Image src="i.png" width="100" height="100" />
-    const quotient =
-      parseInt(height as string, 10) / parseInt(width as string, 10)
+    const quotient = heightInt / widthInt
     const ratio = isNaN(quotient) ? 1 : quotient * 100
     wrapperStyle = {
       maxWidth: '100%',
-      width,
+      width: widthInt,
     }
     divStyle = {
       position: 'relative',
@@ -266,8 +264,8 @@ export default function Image({
       width: '100%',
     }
   } else if (
-    typeof height === 'undefined' &&
-    typeof width === 'undefined' &&
+    typeof widthInt === 'undefined' &&
+    typeof heightInt === 'undefined' &&
     unsized
   ) {
     // <Image src="i.png" unsized />
@@ -288,6 +286,41 @@ export default function Image({
     }
   }
 
+  // Generate attribute values
+  const imgSrc = computeSrc(src, unoptimized, quality)
+  const imgSrcSet = generateSrcSet({
+    src,
+    width: widthInt,
+    unoptimized,
+    quality,
+  })
+
+  let imgAttributes:
+    | {
+        src: string
+        srcSet?: string
+      }
+    | {
+        'data-src': string
+        'data-srcset'?: string
+      }
+  if (!lazy) {
+    imgAttributes = {
+      src: imgSrc,
+    }
+    if (imgSrcSet) {
+      imgAttributes.srcSet = imgSrcSet
+    }
+  } else {
+    imgAttributes = {
+      'data-src': imgSrc,
+    }
+    if (imgSrcSet) {
+      imgAttributes['data-srcset'] = imgSrcSet
+    }
+    className = className ? className + ' __lazy' : '__lazy'
+  }
+
   // No need to add preloads on the client side--by the time the application is hydrated,
   // it's too late for preloads
   const shouldPreload = priority && typeof window === 'undefined'
@@ -298,7 +331,7 @@ export default function Image({
         {shouldPreload
           ? generatePreload({
               src,
-              widths: configSizes,
+              width: widthInt,
               unoptimized,
               sizes,
               quality,

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

@@ -19,7 +19,7 @@ const Page = () => {
         data-demo="demo-value"
         src="bar.jpg"
         loading="eager"
-        width={300}
+        width={1024}
         height={400}
       />
       <Image

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

@@ -9,7 +9,7 @@ const Lazy = () => {
         id="lazy-top"
         src="foo1.jpg"
         height={400}
-        width={300}
+        width={1024}
         loading="lazy"
       ></Image>
       <div style={{ height: '2000px' }}></div>

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

@@ -44,15 +44,13 @@ function runTests() {
   it('should add a srcset based on the loader', async () => {
     expect(
       await browser.elementById('basic-image').getAttribute('srcset')
-    ).toBe(
-      'https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60 1600w'
-    )
+    ).toBe('https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60 480w')
   })
   it('should add a srcset even with preceding slash in prop', async () => {
     expect(
       await browser.elementById('preceding-slash-image').getAttribute('srcset')
     ).toBe(
-      'https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1600 1600w'
+      'https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w'
     )
   })
   it('should support the unoptimized attribute', async () => {
@@ -73,7 +71,7 @@ function lazyLoadingTests() {
       'https://example.com/myaccount/foo1.jpg?auto=format&w=1600'
     )
     expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(
-      'https://example.com/myaccount/foo1.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo1.jpg?auto=format&w=1600 1600w'
+      'https://example.com/myaccount/foo1.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w'
     )
   })
   it('should not have loaded the second image immediately', async () => {
@@ -105,7 +103,7 @@ function lazyLoadingTests() {
 
     await check(() => {
       return browser.elementById('lazy-mid').getAttribute('srcset')
-    }, 'https://example.com/myaccount/foo2.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo2.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo2.jpg?auto=format&w=1600 1600w')
+    }, 'https://example.com/myaccount/foo2.jpg?auto=format&w=480 480w')
   })
   it('should not have loaded the third image after scrolling down', async () => {
     expect(
@@ -153,7 +151,9 @@ function lazyLoadingTests() {
     ).toBe('https://example.com/myaccount/foo4.jpg?auto=format&w=1600')
     expect(
       await browser.elementById('lazy-without-attribute').getAttribute('srcset')
-    ).toBeTruthy()
+    ).toBe(
+      'https://example.com/myaccount/foo4.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo4.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo4.jpg?auto=format&w=1600&q=60 1600w'
+    )
   })
 
   it('should load the fifth image eagerly, without scrolling', async () => {

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

@@ -88,7 +88,7 @@ function runTests(mode) {
 
       await hasRedbox(browser)
       expect(await getRedboxHeader(browser)).toContain(
-        'Next Image Optimization requires src to be provided. Make sure you pass them as props to the `next/image` component. Received: {"width":1200}'
+        'Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":200}'
       )
     })