Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

picture component always using default sizes #1122

Open
robiiiiiiiiiiiin opened this issue Jan 22, 2025 · 0 comments
Open

picture component always using default sizes #1122

robiiiiiiiiiiiin opened this issue Jan 22, 2025 · 0 comments

Comments

@robiiiiiiiiiiiin
Copy link

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 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant