Summary
I have a site using Next v12.2.3. I haven't customized any of the configuration. I deployed it to Netlify and I'm using some next/image tags on some pages. Images were loading fine in Chrome and Firefox. When I opened the site on Safari 13.1.1 I noticed that the images were broken. Safari 12.2.3 doesn't support webp but it seems that the site was returning images in webp format anyway.
The image request Accept header for Safari 13.1.1 was image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5. The response content-type header was image/webp.
I couldn't figure out how to fix it and ended up setting NEXT_DISABLE_EDGE_IMAGES to true so that it's forced to return the original format for all browsers, png.
I know that the ipx function is involved here, but I'm not sure why it's choosing to return webp in this case or where the content-type response header is being set.
Any idea why this might be happening?
Steps to reproduce
- Create a Next site with v12.2.3
- Use a png image on a page using the
next/image component
- Deploy the site to Netlify
- Load the page in Safari 12.2.3
A link to a reproduction repository
No response
Plugin version
4.14.2
More information about your build
What OS are you using?
Mac OS
Your netlify.toml file
`netlify.toml`
# Paste content of your `netlify.toml` file here
Your public/_redirects file
`_redirects`
# Paste content of your `_redirects` file here
Your next.config.js file
`next.config.js`
const nextConfig = {
reactStrictMode: true,
experimental: {
newNextLinkBehavior: true,
images: {
allowFutureImage: true,
},
},
}
module.exports = nextConfig
Builds logs (or link to your logs)
Build logs
Function logs
Function logs
.next JSON files
generated .next JSON files
# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.
Summary
I have a site using Next v12.2.3. I haven't customized any of the configuration. I deployed it to Netlify and I'm using some
next/imagetags on some pages. Images were loading fine in Chrome and Firefox. When I opened the site on Safari 13.1.1 I noticed that the images were broken. Safari 12.2.3 doesn't support webp but it seems that the site was returning images in webp format anyway.The image request Accept header for Safari 13.1.1 was
image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5. The response content-type header wasimage/webp.I couldn't figure out how to fix it and ended up setting
NEXT_DISABLE_EDGE_IMAGEStotrueso that it's forced to return the original format for all browsers,png.I know that the
ipxfunction is involved here, but I'm not sure why it's choosing to returnwebpin this case or where the content-type response header is being set.Any idea why this might be happening?
Steps to reproduce
next/imagecomponentA link to a reproduction repository
No response
Plugin version
4.14.2
More information about your build
netlify.toml)What OS are you using?
Mac OS
Your netlify.toml file
`netlify.toml`
# Paste content of your `netlify.toml` file hereYour public/_redirects file
`_redirects`
# Paste content of your `_redirects` file hereYour
next.config.jsfile`next.config.js`
Builds logs (or link to your logs)
Build logs
Function logs
Function logs
.next JSON files
generated .next JSON files