nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.31k stars 267 forks source link

[ipx] allow _mock_ extension suffix #726

Open pi0 opened 1 year ago

pi0 commented 1 year ago

When generating image URLs for IPX, the format is usually like /_ipx/f_webp/path/to/image/with/original.ext. While this is totally fine by browsers to use the right mime type and format, it can be confusing (reported many times before by users) and also harder for reverse proxies to determine mime based on path. We can make it better by adding ?.webp (actual format) to the end of IPX generated URLs, however it fixes issues for runtime links, for prerendering, it is impossible.

mrleblanc101 commented 1 year ago

@pi0 I don't feel like it's a huge issue, if it can be changed easily, that would be great. Otherwise, maybe juste a mention in the documentation ? Since there was no information, that' why I was confused.

pi0 commented 1 year ago

Adding docs would be nice first step indeed 👍🏼 As mentioned in description it is mainly to inform and also solve issues with reverse proxy mimes.

fabon-f commented 1 year ago

This problem can be critical when using static hosting with SSG, because hosting service serves WebP image with extension .png as image/png. As far as I tested, browsers seem to prioritize type attribute in source elements over content-type header so it works fine, but I don't know whether this behavior is defined in spec.

As a workaround for now, we can configure header overrides in _headers file and so on, to be concrete Content-Type: image/avif for /_ipx/f_avif* and Content-Type: image/webp for /_ipx/f_webp*.

Hibrix-net commented 6 months ago

I agree this should be solved to avoid any confusion and yes, static hosting services serves WebP with extension .png as image/pgn as @fabon-f said.

ayankcell commented 2 months ago

Is there any advance hook to force ipx appending extra extension for the generated files? eg: /_ipx/f_webp/image/apple.png.webp.

If it is possible, maybe this can be an alternative workaround instead of configuring header overrides for the content-type.