Fix: image service warning

[slimluccii]

Changes

Saw this warning in the console:

14:28:39 [WARN] [config] The adapter @astrojs/cloudflare has limited support for "sharp". Certain features may not work as expected.
14:28:39 [WARN] [adapter] Cloudflare does not support sharp. You can use the `compile` image service to compile images at build time. It will not work for any on-demand rendered images.

Moving the image service config to the adapter fixes this.

Associated issue

N.A.

How to test

Compare outputs:

This is where it occured to me: https://github.com/voorhoede/head-start/actions/runs/16499688786/job/46654533282#step:7:13

This has the fix: https://github.com/voorhoede/head-start/actions/runs/16499833417/job/46655076140#step:7:13

Result

Setting imageService to compile, will result in Astro processing the image for every size which is used in the project. The next examples shows how Astro processes the images with imageService: 'compile'. Setting the option to passtrough will result in that the images never get processed.

In this example Astro will prerender the page and process the image during build which will result in multiple versions for the different sizes as you can see in the image:

---
import Layout from '../layouts/Layout.astro';
import { Image } from 'astro:assets';
import testImage from '../assets/test.png';
---

<Layout>
    <Image src={testImage} alt="Cover image" />
    <Image src={testImage} alt="Cover image" width="100" height="100" />
    <Image src={testImage} alt="Cover image" width="50" height="50" />
</Layout>

When setting prerender to false. Astro won't process the image during build, however wil still serve the original image file:

---
import Layout from '../layouts/Layout.astro';
import { Image } from 'astro:assets';
import testImage from '../assets/test.png';

export const prerender = false;
---

<Layout>
    <Image src={testImage} alt="Cover image" />
    <Image src={testImage} alt="Cover image" width="100" height="100" />
    <Image src={testImage} alt="Cover image" width="50" height="50" />
</Layout>

Checklist

• I have performed a self-review of my own code
• I have made sure that my PR is easy to review (not too big, includes comments)
• I have made updated relevant documentation files (in project README, docs/, etc)
• I have added a decision log entry if the change affects the architecture or changes a significant technology
• I have notified a reviewer

[jurgenbelien]

I think I understand the issue being two-fold:

1. Having no image service set on the adapter means it falls back to the default.
2. The default for the adaptor is 'sharp', and not the value as defined in image.service.

Now the question is, what do we want? Do we want to have some pre-building (ie. setting it to compile) in our pipeline, or do we want to pass it to an external image service. For an initial head-start setup, I don't think there's a difference: I think those svgs are only included as a spritesheet that is already optimized, and there are no other graphic files in the repository. Other projects might have large assets that should be optimized by the adapter. If that is the case, the solution is not setting imageService to passthrough, but to compile instead. Please correct me if I'm wrong in that!

[cloudflare-workers-and-pages]

Deploying head-start with    Cloudflare Pages

Latest commit:	e16411e
Status:	✅  Deploy successful!
Preview URL:	https://05beaf29.head-start.pages.dev
Branch Preview URL:	https://fix-image-service-warning.head-start.pages.dev

View logs

[slimluccii]

I've updated the PR to include the result of my testing. We could set it to compile. No harm done there, but right now in the main branch it is already set to passthrough.

[slimluccii]

@jurgenbelien and I decided to set the image service to compile as stated in the PR. compile is the default. Astro will process the image during build time for static pages. The Cloudflare adapter doesn't support on-demand processing of the image. This results in server rendered pages to serve the original image. This way we preserve the default handling as much as possible.