feat(astro): add experimental image service

[ascorbic]

Adds an experimental Astro Image Service. This is enabled by adding it like this:

import { defineConfig } from "astro/config";
import { imageService } from "@unpic/astro/service";
export default defineConfig({
  image: {
    service: imageService(),
  },
});

You can then use the normal Astro image component and all images will use Unpic, with automatically optimised image CDN URLs and responsive layout.

---
import { Image } from "astro:assets";
import lighthouse from "../formentor.jpg";
---
<Image src={lighthouse} alt="Lighthouse" width={600} />
<Image
  src="https://images.unsplash.com/photo-1617718295766-0f839c2853e7"
  alt=""
  width={400}
  height={300}
/>

You can specify a fallback service for local or non-CDN images, which can be any supported CDN or sharp or squoosh (which uses the local Astro image endpoint). By default it will try to detect if a service is available on the hosting platform, which for now means Netlify or Vercel, and otherwise it will use sharp.

import { defineConfig } from "astro/config";
import { imageService } from "@unpic/astro/service";
export default defineConfig({
  image: {
    service: imageService({
        fallbackService: "cloudinary"
    }),
  },
});

Currently the layout is always "constrained", and neither densities or widths are supported because it uses the standard Unpic constrained breakpoints.

Currently support in Markdown is rather limited, because image services are only used for local images and so it can't transform remote URLs. There's also no way of setting the size or other props, so you're generally better off using MDX if possible, but this has the benefit of being a drop-in addition that magically makes your images better.

I would still recommend using the @unpic/astro component when possible, for most flexibility, as you can set layout and other options.

[netlify]

✅ Deploy Preview for unpic-svelte ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-svelte/deploys/65b03936d25b870009c13c06
😎 Deploy Preview	https://deploy-preview-450--unpic-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: Accessibility: Best Practices: SEO: PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-solid ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-solid/deploys/65b03936a1b8f40008b27115
😎 Deploy Preview	https://deploy-preview-450--unpic-solid.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-vue ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-vue/deploys/65b0393671b1d20008e2104b
😎 Deploy Preview	https://deploy-preview-450--unpic-vue.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-astro ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-astro/deploys/65b039368646bc0008b5b353
😎 Deploy Preview	https://deploy-preview-450--unpic-astro.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 97 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-webc ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-webc/deploys/65b03936f159070008c04bb2
😎 Deploy Preview	https://deploy-preview-450--unpic-webc.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-next ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-next/deploys/65b03936e406b90008bf20a5
😎 Deploy Preview	https://deploy-preview-450--unpic-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-preact canceled.

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-preact/deploys/65b039368d438a000854008c

[netlify]

✅ Deploy Preview for unpic-qwik ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-qwik/deploys/65b0393699c4b9000825f9d1
😎 Deploy Preview	https://deploy-preview-450--unpic-qwik.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: Accessibility: Best Practices: SEO: PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-docs ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-docs/deploys/65b03936916a600008868ed8
😎 Deploy Preview	https://deploy-preview-450.preview.unpic.pics
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-angular ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-angular/deploys/65b03936ed15bf00083ae78b
😎 Deploy Preview	https://deploy-preview-450--unpic-angular.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for unpic-lit ready!

Name	Link
🔨 Latest commit	86fc5b1
🔍 Latest deploy log	https://app.netlify.com/sites/unpic-lit/deploys/65b039369c04cf0008fa6834
😎 Deploy Preview	https://deploy-preview-450--unpic-lit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.