next-runtime icon indicating copy to clipboard operation
next-runtime copied to clipboard

[Bug]: Webp image format is returned for Safari 13.1.1

Open summera opened this issue 1 year ago • 0 comments

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

  1. Create a Next site with v12.2.3
  2. Use a png image on a page using the next/image component
  3. Deploy the site to Netlify
  4. 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

  • [ ] I am building using the CLI
  • [ ] I am building using file-based configuration (netlify.toml)

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
# Paste logs here

Function logs

Function logs
# Paste logs here

.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.

summera avatar Aug 14 '22 22:08 summera