Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Next/Image] Images on Safari are getting downloaded multiple times in different sizes

See original GitHub issue

Bug report

Describe the bug

The image component is only requesting the image in the original size on safari for some reason, the requested Url always looks like this http://localhost:3000/_next/image?url=%2Fitalian-fabric-dark-blue.jpg&w=3840&q=75.

Code:

export default function Home() {
  return (
    <div className="max-w-screen p-16">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-full max-h-full">
        <div className="relative">
          <Image
            src="/italian-fabric-dark-blue.jpg"
            width={3984}
            height={2656}
            alt=""
          />
        </div>
      </main>
    </div>
  )
}

html output:

<main class="max-w-full max-h-full">
  <div class="relative">
    <div
      style="
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        margin: 0;
      "
    >
      <div style="box-sizing: border-box; display: block; max-width: 100%">
        <img
          style="max-width: 100%; display: block"
          alt=""
          aria-hidden="true"
          role="presentation"
          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzk4NCIgaGVpZ2h0PSIyNjU2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="
        />
      </div>
      <img
        alt=""
        src="/_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=3840&amp;q=75"
        decoding="async"
        style="
          visibility: visible;
          position: absolute;
          top: 0px;
          left: 0px;
          bottom: 0px;
          right: 0px;
          box-sizing: border-box;
          padding: 0px;
          border: none;
          margin: auto;
          display: block;
          width: 0px;
          height: 0px;
          min-width: 100%;
          max-width: 100%;
          min-height: 100%;
          max-height: 100%;
        "
        srcset="
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=3840&amp;q=75 1x
        "
      />
    </div>
  </div>
</main>

and when adding the sizes attributes two images are requested at the same time http://localhost:3000/_next/image?url=%2Fitalian-fabric-dark-blue.jpg&w=3840&q=75 and http://localhost:3000/_next/image?url=%2Fitalian-fabric-dark-blue.jpg&w=640&q=75

code:

export default function Home() {
  return (
    <div className="max-w-screen p-16">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-full max-h-full">
        <div className="relative">
          <Image
            src="/italian-fabric-dark-blue.jpg"
            width={3984}
            height={2656}
            sizes="50vw"
            alt=""
          />
        </div>
      </main>
    </div>
  )
}

output

<main class="max-w-full max-h-full">
  <div class="relative">
    <div
      style="
        display: block;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        margin: 0;
      "
    >
      <div
        style="
          display: block;
          box-sizing: border-box;
          padding-top: 66.66666666666666%;
        "
      ></div>
      <img
        alt=""
        src="/_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=3840&amp;q=75"
        decoding="async"
        style="
          visibility: visible;
          position: absolute;
          top: 0px;
          left: 0px;
          bottom: 0px;
          right: 0px;
          box-sizing: border-box;
          padding: 0px;
          border: none;
          margin: auto;
          display: block;
          width: 0px;
          height: 0px;
          min-width: 100%;
          max-width: 100%;
          min-height: 100%;
          max-height: 100%;
        "
        sizes="50vw"
        srcset="
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=640&amp;q=75   640w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=750&amp;q=75   750w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=828&amp;q=75   828w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=1080&amp;q=75 1080w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=1200&amp;q=75 1200w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=1920&amp;q=75 1920w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=2048&amp;q=75 2048w,
          /_next/image?url=%2Fitalian-fabric-dark-blue.jpg&amp;w=3840&amp;q=75 3840w
        "
      />
    </div>
  </div>
</main>

Our production server is also crashing every time it is visited from a Safari browser (seems to happen more on iOS) and this error is logged

Killed
error Command failed with exit code 137.

To Reproduce

here is a minimal codeSandbox.

open the sandbox in Safari
open network tab
notice the image is loaded in the original size
add the sizes attribute the Image component
notice the image loaded twice in the network tab

Expected behaviour

The Image component should load the correct image like in other browsers

System information

OS: macOS 11.0.1
Browser Safari
Version of Next.js: 10.0.3
Version of Node.js: 14.15.0
Deployment: next start

Additional context

Add any other context about the problem here.

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

rmhowecommented, Feb 3, 2021

We’re also running into this issue with Safari on macos. Requests to the next server when using next/image cause the image resizing process to fail on the first request and so images are not displayed, but subsequent requests seem to succeed. Seen on Safari 13.1.2 on macos 10.13.6 and Safari 14.0.3 on macos 11.2. Next.js 10.0.5 node 10.15.3

2reactions

joshourismancommented, Dec 22, 2020

I am seeing this issue as well, also with no image being shown on the frontend as in @ericvrp’s case. In my case I am getting a broken image in Safari 14.0.2 on macOS (11.1), as well as Safari on iPadOS, but the image displays in Safari on iOS as well as Firefox (83.0) on macOS.

[Error: ENOENT: no such file or directory, unlink '/workspaces/pingpong.travel/.next/cache/images/SSDihwa5Rpid9WOaqGHXieWcPjQ6g2nmnDshXVzX3go=/1608666754323.MI1ZB4n+pBxN1kBxzEgjaVzIn06EztpKwvpNVKl0jy0=.webp'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'unlink',
  path: '/workspaces/pingpong.travel/.next/cache/images/SSDihwa5Rpid9WOaqGHXieWcPjQ6g2nmnDshXVzX3go=/1608666754323.MI1ZB4n+pBxN1kBxzEgjaVzIn06EztpKwvpNVKl0jy0=.webp'
}