Astro Info

Astro                    v3.4.3
Node                     v20.5.1
System                   macOS (arm64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/mdx
                         @astrojs/tailwind
                         @astrojs/vue

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

• The noop image service only copies contents into the target file
• Some things enable it implicitly (e.g. @astrojs/cloudflare)
• When multiple dimensions are used for a single image (multiple <Image> tags for the same image, with different dimensions), it produces multiple files even if they have the exact same contents (= same as original image)
• This unnecessarily leads to multiple requests — different <img> tags requesting different URLs, even if they all have the exact same content (untransformed content, same as source image)

Reproduction steps (don't have the time to set up a Stackblitz example right now):

1. Add an image (src/example-image.png)
2. Add this code to any page:

   <Image src={importedImage} width="100" alt="foo" />
   <Image src={importedImage} width="200" alt="bar" />

3. Use passthroughImageService() in your Astro config
4. Run a static build and notice example-image.png, example-image.hash1.webp, example-image.hash2.webp in your dist/_astro
5. Browser requests both example-image.hash1.webp and example-image.hash2.webp even if they have the same contents

What's the expected result?

Only produce a single .webp file, or none at all and just use the original format.

Don't think this can be solved in packages/astro/src/assets/services/noop.ts since that only deals with the contents of the output file. The path to the output file is probably handled by the code that calls noopService.

Link to Minimal Reproducible Example

See the bug description

Participation

• I am willing to submit a pull request for this issue.