Astro + Cloudflare Image Service Integration

Quick Setup

Cloudflare provides an IMAGES binding when deploying Astro on Workers. This enables on-the-fly image optimization without separate infrastructure.

// astro.config.mjs
export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
  image: {
    service: {
      entrypoint: '@astrojs/cloudflare/image-service',
    },
  },
});

Usage in Components

---
import { Image } from 'astro:assets';
import src from '@/assets/my-image.jpg';
---

<Image src={src} alt="Description" width={800} height={600} />

Cloudflare automatically handles resizing, format negotiation, and global caching.

Performance Considerations

• Images are cached at Cloudflare’s edge locations
• Format conversion (WebP, AVIF) is automatic
• No additional worker code required
• Responsive variants can be generated on-demand