Srcset not created for Static Images about next-image-export-optimizer HOT 28 CLOSED

Hi @terijaki,

Is it now working as expected?

I noticed two things in your use of the library:

1. When you specify a width and height, you are telling Next.js that this is the size you want it to be displayed. So naturally, it omits the other sizes in the srcset and only uses the requested size in the image element (or the nearest larger size in the sizes array). If you want to have a dynamic behavior, you can specify fill, and then it will generate the complete srcset.

If you take this example of your website: https://github.com/terijaki/vcmuellheim/blob/1728c28829fad49e30b97f25567f438b8445e20e/app/components/homepage/HomeIntro.tsx#L21-L28
and remove the unoptimized prop, you get the expected behavior.

2. You are using unoptimized in several places, any reasons for that?

from next-image-export-optimizer.

@terijaki Thanks a lot! Nice to hear that it is useful!

Let me know if you come across a situation again where it is not working as you would expect.

from next-image-export-optimizer.

Hi @el-j,

thanks for the codesandbox. It works as expected:

When you load a page with that small width, the correct src is the smallest source in the deviceSizes array. Which is 640px.

The behavior of most browsers is that once you load a larger image file (in the case you had the browser larger at one point and then made it smaller) that it just uses the larger image.

from next-image-export-optimizer.

That should work as you have it. Can you send a screenshot from the next.config.js please?

from next-image-export-optimizer.

@Niels-IO ok sooooo: i moved my images all into the project, out of the public folder. and TADA it works.

the second line in the code example from the docs doing import me from '../photos/me.jpg'
nextjs wants them to be in the src-folder if u want them static... hmpf

they should add this line to the docs...
i really appreciate your help! thank u very much! u have done a very helpful package here!

from next-image-export-optimizer.

any help would be much appreciated as i want to put the page online but suffering form this problem a lot. maybe i do anything wrong? from you working online example i saw that, the width and height of the container and the width and height of the image is changed when dragging the slider.

so does it mean i need a width and height in px on container and image? then i got the idea of this package wrong, maybe?

from next-image-export-optimizer.

Hi @el-j,

I tested your setup in the example app in this repository. It works, and I get all the different sizes in the srcset. Can you create a minimal reproduction so that I can debug it?

When you use the statically imported images, you do not have to specify any width or height.

from next-image-export-optimizer.

I'm having the same problem (https://github.com/terijaki/vcmuellheim)

Optimized Images are generated fine with "next dev" but are not present with "next build && next-image-export-optimizer"

Note: I'm not using && next export since this is deprecated in Next14 and cause build failures: https://nextjs.org/docs/advanced-features/static-html-export

from next-image-export-optimizer.

@terijaki Can you point me to a specific code section of your repo where it doesn't work?

from next-image-export-optimizer.

@Niels-IO ofc

• https://github.com/terijaki/vcmuellheim/blob/main/app/%5Bpostorpage%5D/page.tsx (see line 150 at the very end)
• this part is handling the dynamic blog post. example:
  • https://vcmuellheim.de/2024-01-19-5-spieltag-der-saison-fur-damen-i
  • the images are stored in public/images/blog/[year]/[month]/[day] : https://github.com/terijaki/vcmuellheim/tree/main/public/images/blog/2024/01/19/optimized

another area is a picture gallery:

• https://github.com/terijaki/vcmuellheim/blob/main/app/fotos/page.tsx
• https://vcmuellheim.de/fotos

from next-image-export-optimizer.

Damn! I am using https://github.com/actions/configure-pages/ during my build and deploy process.
I didn't notice before that it disables image optimisation. Completely messes things up.

from next-image-export-optimizer.

@Niels-IO it is working as expected in most places yes. 🤗

I have totally forgotten about the unoptimised parameter.... I've added it to the images on the homepage above the fold because I didn't like the blur effect. That being said the issue was also that the optimised webp images were not being used, so the blur effect was display too long, until the large jpgs were loaded.

Not that things are working, I'll go over every place to review what I've done this past month in terms of specific sizes and unoptimised flags 😅

In some places it is intended for sure (sponsor/brand logos). Other area's are ok-ish but not perfect yet.

Thanks for your help, creating and maintaining this tool!

from next-image-export-optimizer.

@terijaki i tried to get this work but sadly without luck. if i put the fill prop the srcset is created. but i cannot use fill as it destroys my layout. here is the running export build as pre-release.

maybe u have any idea why this is?
https://el-j.github.io/fabianalthaus.de

otherwise, can give me the link to the codesandbox where u tried the example?

from next-image-export-optimizer.

@el-j the fill property can be tricky to work with but once you got the hang of it, this is the way to go.
btw this has nothing to do with Niels-IO work as it using the NextJs image component.

See: https://nextjs.org/docs/pages/api-reference/components/image#fill

The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.

In some situations it might be a valid solution to put a wrapper around your images and set their position to relative.

from next-image-export-optimizer.

@terijaki indeed i tried with a wrapper to trick the fill prop but this does not work for me.
so i am in need for the srcSet get created correctly. but it does not as u see from the exported-code. i am wondering where i can find the example @Niels-IO is talking about, as i would like to check against my code.

from next-image-export-optimizer.

Hi @el-j,

here is a good section of the Next.js docs to understand responsive images:
https://nextjs.org/docs/pages/api-reference/components/image#responsive-images

I hope that helps for your use case

from next-image-export-optimizer.

hi @Niels-IO no it does not. if it would help i wouldn't have created this issue. i have test and tried all these, without getting a good srcSet. so in fact with fill, and wrapper it just breaks the whole layout so its not a solution.

so any idea how i get the srcSet written to the output dom? i mean... all the versions of images are created and sitting there... just the image-srcset does not know them so cannot use them.

from next-image-export-optimizer.

@el-j
I think there is very likely a CSS solution that allows you to use any solution in the previous link and won't break your layout.

Without access to the source code of your page, there is nothing I can do.

from next-image-export-optimizer.

hi again, so i created a codesandbox that shows the issue. for me it just seems the srcSet is just ignored ...

from my point of view, it should not load the 1080p variant on a size of 100px'ish width...

sandbox

myproject-issue:

from codesandbox issue is the same:

from next-image-export-optimizer.

and as i see from my own screenshots now, in my project for every source size it's always the 1080p file in the attributes,
in the codesandbox the list is correct, but not correctly used...

from next-image-export-optimizer.

that is so strange...when i reload the codesandbox it really works. but if i do it with my project i just have always the biggest version loaded after the opt-10 version. does not matter which view-port size i have...

when i investigate deeper the srcSet always have the same sizes for all variantes.
build on github:

local dev:

@Niels-IO u have any idea why the list of srcSet always contains just the biggest version for every size?

from next-image-export-optimizer.

@el-j Can you screenshot how you are using the ExportedImage component?

from next-image-export-optimizer.

@Niels-IO here is the screenshot. it's not so clean as i sadly have to transfrom the incoming string to match the correct image from the staticImagesObject .

the image-object is ontop of this code like:

import "foo" from "../imagepath/foo.jpg"
import "bar" from "../imagepath/bar.jpg"
const staticImagesObject = { foo, bar } as { [key: string]: ExportedImageProps["src"] };

so everywhere where i need an image. i use the Images-Component and give it a "src" attribute that chooses the right image from the staticImagesObject and uses that for the ExportedImage-Component that is returned

from next-image-export-optimizer.

@el-j What would happen if you remove the wrapping div? I think the bug might be related to CSS styling

from next-image-export-optimizer.

@Niels-IO then i am back where i was before with the same result: all srcset variants contain the biggest version.

from next-image-export-optimizer.

@el-j
I would recommend to start with a fresh page, add one image and see if this works. Then continuously add the complexity that you currently have in your code and see where it breaks.

from next-image-export-optimizer.

@Niels-IO
so now i made a dev-page. ueing my Images component and the ExporteImage component:

which results in the same behaviour:

any idea? i dont understand why this is not working in my case.

from next-image-export-optimizer.

this is my config:

and meanwhile i was so keen to investigate what u are doing and stumbled about these comment lines:

could this be a reason? sorry i am guessing wild ...
ooh... i have little idea what could be a reason ... tinkering

from next-image-export-optimizer.