a0d44ca311
Currently, the image component doesn't handle use of the `sizes` property with `layout="fill"` and `layout="responsive"` very well for small viewports. It will never include sizes smaller than the smallest viewport (640px) in the srcset, so even if you specify `sizes="30vw"` in your image, you have to download the full-viewport-width image on small devices. This PR adds logic such that if you use `layout="fill"` and include a `sizes` property, the image component will include the full range of image sizes in the `srcset`. It also includes an optimization where it finds the smallest `vw` value in the sizes value and combines that with the smallest viewport width, and uses that as the floor of the srcset. It does this so it doesn't unnecessarily increase transfer size by including ALL sizes. This is still a conservative optimization--for 95% of cases, taking the _largest_ `vw` size would work, but I don't see a way to do that without breaking a few corner cases. The case of a sizes prop with `px` values is fixed but not optimized--though generally that case is less of a good fit for the fill or responsive layout anyway. |
||
|---|---|---|
| .. | ||
| dev | ||
| experimental-script.tsx | ||
| head-manager.ts | ||
| image.tsx | ||
| index.tsx | ||
| link.tsx | ||
| next-dev.js | ||
| next.js | ||
| normalize-trailing-slash.ts | ||
| page-loader.ts | ||
| performance-relayer.ts | ||
| polyfills.js | ||
| request-idle-callback.ts | ||
| route-loader.ts | ||
| router.ts | ||
| use-intersection.tsx | ||
| with-router.tsx | ||