next-export-optimize-images icon indicating copy to clipboard operation
next-export-optimize-images copied to clipboard

picture component always using default sizes

Open robiiiiiiiiiiiin opened this issue 11 months ago • 1 comments

Describe the bug When using the picture component, if we set custom deviceSizes, the sizes used in the <source> tag are still the default sizes.

To Reproduce Add custom deviceSizes in next.config.js

const withExportImages = require('next-export-optimize-images');

module.exports = withExportImages({
  output: 'export',
  images: {
    deviceSizes: [300, 430, 600, 768, 1024, 1536, 2048, 2560],
    imageSizes: [],
  }
})

Use the picture component

import Picture from "next-export-optimize-images/picture";
import test from "@public/images/test3.jpg";

const Home = () => {

  return (
    <div>
      <Picture src={test} alt="test" sizes="100vw" />
    </div>
  );
}
export default Home

The result is the following

<picture>
    <source
        srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_640.webp 640w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_750.webp 750w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_828.webp 828w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1080.webp 1080w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1200.webp 1200w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1920.webp 1920w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.webp 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_3840.webp 3840w"
        type="image/webp" width="7441" height="4961" sizes="100vw">
        <img alt="test" loading="lazy" width="7441"
        height="4961" decoding="async" data-nimg="1" style="color:transparent" sizes="100vw"
        srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_300.jpg 300w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_430.jpg 430w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_600.jpg 600w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_768.jpg 768w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1024.jpg 1024w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1536.jpg 1536w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.jpg 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg 2560w"
        src="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg">
</picture>

In the srcset of the <source> tag, the following sizes are used [640, 750, 828, 1080, 1200, 1920, 2048, 3840] instead of [300, 430, 600, 768, 1024, 1536, 2048, 2560] as set in next.config.js. And the image files are only generated with the following sizes [300, 430, 600, 768, 1024, 1536, 2048, 2560] so it causes a 404 error.

Expected behavior

<picture>
    <source
        srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_300.webp 300w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_430.webp 430w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_600.webp 600w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_768.webp 768w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1024.webp 1024w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1536.webp 1536w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.webp 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.webp 2560w"
        type="image/webp" width="7441" height="4961" sizes="100vw">
        <img alt="test" loading="lazy" width="7441"
        height="4961" decoding="async" data-nimg="1" style="color:transparent" sizes="100vw"
        srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_300.jpg 300w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_430.jpg 430w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_600.jpg 600w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_768.jpg 768w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1024.jpg 1024w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1536.jpg 1536w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.jpg 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg 2560w"
        src="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg">
</picture>

Thank you for the library !

robiiiiiiiiiiiin avatar Jan 22 '25 08:01 robiiiiiiiiiiiin

As far as I've checked, it doesn't seem to be reproducible. Can you provide a simple reproduction code?

dc7290 avatar Mar 19 '25 11:03 dc7290