withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.35k stars 2.45k forks source link

Image component passThroughImageService saves huge files when used with remote CDN. #11760

Closed regisphilibert closed 2 months ago

regisphilibert commented 2 months ago

Astro Info

Astro                    v4.14.2
Node                     v20.13.0
System                   macOS (arm64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/netlify
Integrations             @astrojs/tailwind
                         tnd-forms

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

No response

Describe the Bug

While using astro Image component with the config pasted below, and using an image transforming API like the Sanity CDN, the saved file is as big, sometime bigger than the original.

  image: {
    remotePatterns: [{ protocol: "https" }],
    service: passthroughImageService()
  },

Consider the following:

<Image alt="https://cdn.sanity.io/images/vw15areo/production/7c1490690ac40b980268f307995266acecd65233-1344x896.png?auto=format&dpr=2&w=600&fit=scale" inferSize />

This image URL https://cdn.sanity.io/images/vw15areo/production/7c1490690ac40b980268f307995266acecd65233-1344x896.png?auto=format&dpr=2&w=600&fit=scale from the popular sanity CDN, once fetched shouldn't download a file heavier than 50ko (~45ko on Chrome). But when passed as src to the <Image /> component in conjunction with the passThroughImageService, a 2.1Mo file ends up being passed through to /dist/_astro

This is bigger than the original image (untransformed when served by the CND: https://cdn.sanity.io/images/vw15areo/production/7c1490690ac40b980268f307995266acecd65233-1344x896.png)

What's the expected result?

The resulting file passed through to /dist/ should be roughly the same size as if downloaded from the browser.

Link to Minimal Reproducible Example

https://github.com/regisphilibert/astro-issue-11760

Participation

Princesseuh commented 2 months ago

The reproduction does not seem to work, I get a fetch failed.

regisphilibert commented 2 months ago

mmm, I'll try and setup a new repo today! Sorry about that.

regisphilibert commented 2 months ago

@Princesseuh I updated the description with the new repro example repo! Thanks for your patience.

regisphilibert commented 2 months ago

This is not a bug, CDN could't guess the desired format as this is called outside of a browser context. Just had to user a different parameter. Closing this, thanks for your time!