Image Optimization loads also original image

[marco910]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #109-Ubuntu SMP Wed Jan 12 16:49:16 UTC 2022
Binaries:
  Node: 14.15.3
  npm: 6.14.9
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.0
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome 100.0.4896.75

How are you deploying your application? (if relevant)

next start (PM2)

Describe the Bug

I'm using the built-in image optimization of Next.js to optimize the images from my headless CMS. When I have a look in the Network tab of the dev tools in Chrome I see that there is also the original image requested from the CMS. Is that the correct behavior? I don't think so because then I could also display the original image directly on the page without optimization.

The original images are more than 1 MB in some cases on my site, which influences the performance of the site negatively.

Expected Behavior

The expected behavior is that Next.js requests the original image from the CMS on the server-side, optimizes it, and responses to the client with only the optimized image.

To Reproduce

1. Upload an image to a webserver or anywhere else, where you can request it from.
2. Use this code to display it on your Next.js site:

<Image
 src={imageURL}
placeholder="blur"
blurDataURL={imageURL}
layout="fill"
objectFit="cover"
alt={altText}
title={titleText}
draggable="false"
/>

3. Run the Next.js site with npm start in production and check your Network tab when reloading the page.

[noobyogi0010]

@balazsorban44 I would love to work on this issue if no one else has already taken it up.

[balazsorban44]

The issue here is that you set blurDataURL to the source image URL.

From the docs:

Must be a base64-encoded image. It will be enlarged and blurred, so a very small image (10px or less) is recommended. Including larger images as placeholders may harm your application performance.

https://nextjs.org/docs/api-reference/next/image#blurdataurl

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.