When imgur goes down, my server shouldn't

The problem

My project pages show a lot of screenshots: desktop shots, laptop mockups, phone screens. All of them are hosted on i.imgur.com.

From time to time, imgur is slow or down. And every time that happened, my whole website felt it: pages hung, requests piled up, and the server looked like it was down, even though my code hadn't changed.

An image host having a bad day should mean some images are missing. It should never mean my site is down.

The details

The images were rendered with the standard Next.js component:

<Image src="https://i.imgur.com/GLH3iQY.png" width={1000} height={1000} alt="..." />

That looks harmless, but by default next/image does not let the browser load the image directly. The browser requests:

/_next/image?url=https://i.imgur.com/GLH3iQY.png&w=1080&q=75

and then my server:

1. downloads the original from imgur,
2. resizes and re-encodes it,
3. sends the result back to the visitor.

So every visitor on a project page triggered several server-to-imgur requests. When imgur responded slowly, each of those requests stayed open on my server, waiting. A few visitors at the same time was enough to tie up the server.

The image optimizer turns a third-party dependency into a server-side dependency. If the third party is slow, you are slow.

The challenges

• It was intermittent. imgur works most of the time, so the bug was impossible to reproduce on demand. Everything looked fine whenever I checked.
• The failure looked like my bug. From the outside, it was "the site is down", not "imgur is slow". Nothing in my code pointed at imgur.
• Empty images made it worse. New projects had "" as the image URL while I was still preparing screenshots, which next/image doesn't handle gracefully either.
• I didn't want to lose the page. One broken screenshot should not take the rest of the project page with it.

The solution

I wrapped next/image in a small SafeImage component with three rules:

const isRemote = (src) => typeof src === 'string' && /^https?:\/\//.test(src);

const SafeImage = ({ src, alt, onError, unoptimized, ...props }) => {
  const [failed, setFailed] = useState(false);
  useEffect(() => setFailed(false), [src]);

  if (!src || failed) return null;          // 1. nothing to show -> show nothing

  return (
    <Image
      {...props}
      src={src}
      alt={alt}
      unoptimized={unoptimized ?? isRemote(src)} // 2. remote -> browser loads it directly
      onError={(e) => { setFailed(true); onError?.(e); }} // 3. failed -> hide it
    />
  );
};

1. Missing image → render nothing. No crash on empty URLs.
2. Remote image → unoptimized. The browser downloads it straight from imgur. My server is no longer in the middle, so it can't be held hostage by imgur's response time.
3. Failed image → hide it. If imgur is down, the visitor sees the rest of the page, not a broken-image icon.

Local images (like the laptop and phone frames) still go through the optimizer, because they live on my own server and are safe to process.

Lessons learned

• Know which side of the network your code runs on. next/image looks like a frontend component, but with remote URLs it makes server-side requests.
• Every third-party dependency needs a failure plan. Ask: "if this service is down, what does my user see?" The answer should never be "nothing".
• Degrade, don't crash. A missing screenshot is acceptable. A missing website is not.
• The real long-term fix is ownership. Moving the images into my own public/ folder removes the dependency completely, and lets Next.js optimize them again safely.