I ran into an issue when trying to adjust the image and device sizes in next.config.js
.
For my specific use case I do not need all default imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]
and deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
, and as a way to speed up the build time tried to adjust the list of sizes to something more suitable, like deviceSizes: [640, 750, 1080, 1920]
.
It might also be that I do not understand the configuration properly. However, if they are not meant to be customised, then I also do not see the need to specify them in next.config.js
๐
Expected behaviour
The plugin only generates new, optimised images for the specified imageSizes
and deviceSizes
, and adjusts the srcSet
of the image tag to make use of the new sizes.
Observed behaviour
The plugin indeed only generated the sizes specified, but does not adjust the image tag properly so that it includes non-existent files. This breaks the image when the browser window gets too wide or too small.
![image](https://user-images.githubusercontent.com/19748898/163681846-f9b98161-70d5-43fc-aadd-0becffe3477a.png)
![image](https://user-images.githubusercontent.com/19748898/163681793-e5e0daec-c3a8-4f3c-a0b7-fad078c20991.png)
Ways to reproduce the bug
1. Change next.config.js
module.exports = {
images: {
loader: "custom",
nextImageExportOptimizer: {
imageFolderPath: "public/images",
exportFolderPath: "out",
imageSizes: [16, 32],
deviceSizes: [1920, 2048],
quality: 75,
},
},
env: {
storePicturesInWEBP: true,
},
};
2. Run npm run export
3. Resulting out/images
folder
![image](https://user-images.githubusercontent.com/19748898/163681714-9f15deb5-e786-4f5a-8afd-2e071184a5b0.png)
4. Resulting img tag
<img id="test_image" alt="test_image" sizes="100vw"
srcset="images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-640.WEBP 640w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-750.WEBP 750w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-828.WEBP 828w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-1080.WEBP 1080w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-1200.WEBP 1200w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-1920.WEBP 1920w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-2048.WEBP 2048w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-3840.WEBP 3840w"
src="images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-3840.WEBP"
decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;">