doesn't generate other formats on "nuxt generate"

[letoast]

Working with

"@nuxt/image-edge": "^1.0.0-rc.1-28164352.ad7c010",
"nuxt": "^3.6.5",

image: {
    format: ['webp'],
    provider: 'ipx',
    ipx: {
        modifiers: {
            quality: '80',
            format: ['webp']
        }
    }
}

tried on macbook air m2 and netlify builds. The images are transformed but no other formats are generated.

[Sadarex]

The multiformat feature isn't part of the rc-1 release. Use the edge version for that.

See: https://github.com/nuxt/image/issues/893

[letoast]

The multiformat feature isn't part of the rc-1 release. Use the edge version for that.

See: #893

@Sadarex which version is the "edge version"? You can see above that I provided that i use @nuxt/image-edge in my package.json

[Sadarex]

I can't give you a specifc version. At my setup i use "@nuxt/image-edge": "latest"

[letoast]

I can't give you a specifc version. At my setup i use "@nuxt/image-edge": "latest"

The version you use is written in the package-lock.json or in yarn.lock if you use yarn.

Also if I understand correctly the format option works with your setup and .webp is actually generated?

[Sadarex]

The version in my lock file is: "version": "1.0.0-rc.1-28143901.afe4120"

And yes, i could provide multiple formats. Which formats to you want in the end? In your code example you only configured webp which is the default anyway.

[letoast]

The version in my lock file is: "version": "1.0.0-rc.1-28143901.afe4120"

And yes, i could provide multiple formats. Which formats to you want in the end? In your code example you only configured webp which is the default anyway.

Thanks I'll try 1.0.0-rc.1-28143901.afe4120.

I only want webp and it doesn't generate it. It only compresses and transforms the images without converting them to a different format. The original file formats are left the same, no webp is generated.

[Sadarex]

The original files are never touched. IPX is always creating new ones (even for jpg). (Can't say how netlify works)

You used <nuxt-picture> to implement the images?

[letoast]

The original files are never touched. IPX is always creating new ones (even for jpg). (Can't say how netlify works)

You used <nuxt-picture> to implement the images?

I know that the originals aren't touched, I'm talking about the output files. Also I used <nuxt-img> https://v1.image.nuxtjs.org/components/nuxt-img#format

Just to make sure you know what I mean - this is being generated ("webp" in the folder name but the images themselves have the original format):

[Sadarex]

Now i get what you mean. This is a bug (?) with the filenames. When you check the file, you can see that it is indeed a webp image.

• Download file
• Open with texteditor: In the first line there should be a "WEBPVP8"

[letoast]

Now i get what you mean. This is a bug (?) with the filenames. When you check the file, you can see that it is indeed a webp image.

• Download file
• Open with texteditor: In the first line there should be a "WEBPVP8"

Ahh, I see, you're right, it does say WEBPVP8, but this is not okay at all. Lighthouse gives you a bad score for not using modern formats, because it looks at the filenames.

[Sadarex]

This issue is quite old: https://github.com/nuxt/image/issues/584 https://github.com/nuxt/image/issues/442

[letoast]

I also found this https://github.com/unjs/ipx/issues/54

[letoast]

I managed to solve this for my special (not recommended to anyone) example where i generate the page. I pretty much on nitro prerender:route go through all of the _ipx folders and manually rename the image files to have the proper format and also on prerender:generate go through all of the generate html files and find and replace any src="...png/jpg" or srcset="...png/jpg" to have the .webp extension. I also had to copy the src of this repo to include a line in src/runtime/image.ts inside of the getImage function that checks if the process is not server, it properly renames the returned string to have the proper format....

I hope this stuff gets solved officially though

[AndrewTannerNA]

I'm also finding this issue on both "@nuxt/image-edge": "^1.0.0-rc.1-28180077.d51e794" and "@nuxt/image": "^1.0.0-rc.1".

While running dev mode the images are reporting image/webp in the browser, but following generate, they're image/png.

I'm on Nuxt 3.6.5 running on macOS and using the $img utility with the format option set to webp.

I don't necessarily mind the file suffix being .png but it seems that images are not being formatted correctly.

[Sadarex]

I'm also finding this issue on both "@nuxt/image-edge": "^1.0.0-rc.1-28180077.d51e794" and "@nuxt/image": "^1.0.0-rc.1".

While running dev mode the images are reporting image/webp in the browser, but following generate, they're image/png.

I'm on Nuxt 3.6.5 running on macOS and using the $img utility with the format option set to webp.

I don't necessarily mind the file suffix being .png but it seems that images are not being formatted correctly.

The files are correct. Just the file extension is wrong. Don't look at the identified mimetype in the browser, because it is just derived from the file extension.

As @letoast already found out it's not directly a bug from nuxt-image, but from the ipx provider: https://github.com/unjs/ipx/issues/54

So if we want the correct file extentions in nuxt-image we either need a new feature or the ipx provider must be fixed here.

[AndrewTannerNA]

@Sadarex I forgot to mention that macOS Finder was also identifying the files as PNG following generate. As I mentioned, I'm not particularly bothered about the file extension itself, so I can only rely on the mimetype, and as it stands it appears incorrect.

[Sadarex]

I don't own a mac but i guess it's only looking at the extension too. Just open the file with a text-editor and look at the first line. There should be "WEBPVP8" for webp images for example.

[AndrewTannerNA]

@Sadarex Thanks for your prompt replies.

I opened with a text editor, no suggestion of webp in there.

The expected mimetype is image/webp during dev mode, so that does suggest there is a bug with generated builds.

[alexiokay]

Build command also doesnt generate .webp format anymore..

[Sadarex]

@AndrewTannerNA @alexiokay I would suggest to open new issues and provide a reproduction. -> https://github.com/nuxt/image/issues/new

letoast already confirmed what the issue in his case is. Creating comments for problems which potentially have another root cause isn't helpful.

[alexiokay]

You're right. I already overcome that, the issue is connected to the IPX provider. I used custom provider and now everything works as it should.

[rahulkumarsingh73690]

Nuxt image module is full of bugs

[Preout69]

@alexiokay

You're right. I already overcome that, the issue is connected to the IPX provider. I used custom provider and now everything works as it should.

Would you share how you have done it? I'm facing the same problem

[alexiokay]

Follow these instructions: https://image.nuxtjs.org/providers/twicpics

It's not perfect, because sometimes the images doesn't show on development server since they are not pushed to the production after you setup your domain link on twicpics website, so you can use ipx to just make it visible on development or expose your local port in your network router settings and add your public IP address + exposed port in the twicpics settings, but it's optional.

[schnetzi]

I just added a small reproduction project for the issue. As already mentioned, the underlying cause is https://github.com/unjs/ipx/issues/54

https://github.com/schnetzi/nuxt-image-webp-error