Astro-Better Image Service vs. Cloudflare Images: When to Choose Each Edge-Optimized Solution

Author’s note:

Question: What is the Astro-Better Image Service, when should I use it, and what do I use if I’m on Cloudflare already?

Context: Context:

https://github.com/risu729/astro-better-image-service

Executive Summary

For developers building high-performance sites with Astro, image optimization is often a trade-off between long build times and expensive runtime services. The Astro-Better Image Service (ABIS) offers a compelling middle ground by offloading image processing to serverless edge functions (using Sharp + Vite) rather than generating every asset at build time. This approach can slash build times by approximately 40% for large sites ¹.

However, if you are already in the Cloudflare ecosystem, Cloudflare Images provides a robust managed alternative. While ABIS offers zero-runtime storage costs and deep customization via the Sharp API, Cloudflare Images delivers a “set-it-and-forget-it” CDN solution with a generous free tier of 5,000 monthly transformations ².

Key Decision Drivers:

• Choose ABIS if you need to cut build latency, require complex custom filters (e.g., dynamic watermarking), or want to avoid the storage fees associated with managed hosting.
• Choose Cloudflare Images if you want a managed CDN, need simple URL-based resizing without code changes, or have a traffic volume that fits within the free tier limits.

Introduction: Why Image Pipelines Matter

In modern web development, image optimization is not optional. Images often account for the majority of a page’s weight, directly impacting Core Web Vitals, SEO rankings, and user retention. The challenge lies in how these images are processed.

Traditional static site generation (SSG) processes images at build time. For a site with thousands of images, this can balloon build times from minutes to hours. Astro-Better Image Service addresses this by moving processing to the “edge”—generating optimized variants only when a user requests them. This “Just-in-Time” (JIT) approach contrasts with managed services like Cloudflare Images, which also perform JIT processing but store and serve the results from a dedicated global CDN infrastructure.

Astro-Better Image Service (ABIS): Core Concepts

The Astro-Better Image Service is a community-driven plugin designed to replace Astro’s default image processing with a more dynamic, edge-friendly solution.

How It Works

Instead of resizing images during the npm run build process, ABIS defers this work until a user actually requests the image.

1. Request Interception: When a browser requests an image, the service intercepts the call.
2. On-Demand Processing: It uses Sharp, a high-performance Node.js image library, to resize, compress, or transform the original asset on the fly ¹.
3. Edge Compatibility: The service is designed to run in serverless environments like Cloudflare Workers, Netlify Edge, or Vercel Edge, provided they support the necessary Node.js compatibility (specifically Node >= 14) ¹.

Key Benefits

• Reduced Build Times: By skipping image generation during the build, CI/CD pipelines finish significantly faster.
• Full Sharp API Access: Developers can leverage the full power of Sharp for advanced manipulations like compositing, color space adjustments, and custom filters ¹.
• No Storage Lock-in: Transformed images are cached by your CDN but not permanently stored in a proprietary bucket, avoiding long-term storage fees.

Cloudflare Images: Managed Service Overview

Cloudflare Images is an end-to-end solution for storing, resizing, optimizing, and delivering images. It integrates tightly with Cloudflare’s global network.

The Managed Model

Unlike ABIS, which is code you run, Cloudflare Images is a service you consume.

• Storage & Delivery: You can upload images directly to Cloudflare’s storage or use “Transformations” to optimize images stored externally (e.g., in an S3 bucket or your own server) ¹.
• URL-Based API: Transformations are applied via URL parameters or named variants (e.g., variant=hero), requiring no backend code changes ².
• Automatic Optimization: The service automatically serves the most efficient format (AVIF, WebP) based on the user’s browser support ³.

Pricing Structure

Cloudflare operates on a usage-based model:

• Free Tier: Includes 5,000 unique transformations per month ².
• Paid Tier: Costs $5 per 100,000 stored images and $1 per 100,000 delivered images. Transformations beyond the free limit cost $0.50 per 1,000 unique transformations ².

Feature-by-Feature Comparison

The following table breaks down the technical and operational differences between running your own image service (ABIS) and using a managed one (Cloudflare).

When to Choose Astro-Better Image Service

You should opt for ABIS when you need control, cost efficiency at scale, or specific technical capabilities that managed services lack.

1. You Need Complex Transformations

If your design requires dynamic text overlays, complex watermarking, or specific color channel manipulations, ABIS exposes the underlying Sharp instance. Cloudflare Images supports basic resizing and cropping but lacks the granular programmatic control of Sharp ^{1 3}.

2. You Want to Avoid Vendor Lock-in

With ABIS, your images live where you put them. You are not tied to Cloudflare’s storage buckets. If you decide to move from Cloudflare Workers to Vercel or Netlify, your image logic moves with your code.

3. High-Volume, Low-Variety Traffic

If you have a site with millions of views but relatively few unique image variants, ABIS can be cheaper. You pay for the compute time to generate the image once, and then the CDN caches it. Cloudflare Images charges for “delivery” on stored images, which can add up for high-traffic sites ².

When to Stick with Cloudflare Images

If you are already using Cloudflare, their native image service offers simplicity and robust infrastructure that is hard to beat with custom code.

1. “Set It and Forget It” Simplicity

Cloudflare Images requires zero maintenance. You don’t need to worry about updating the Sharp library, managing Node.js compatibility on the edge, or debugging memory limits in serverless functions. You simply change a URL, and it works ⁴.

2. Predictable Performance

Cloudflare’s global network ensures that image resizing happens close to the user. While ABIS running on Cloudflare Workers is also fast, Cloudflare Images is optimized specifically for this task at the infrastructure level, often resulting in faster “Time to First Byte” for new image variants.

3. You Fit Within the Free Tier

For small to medium projects, 5,000 unique transformations per month is generous. A “unique transformation” is defined by the parameters, not the number of requests. If you resize image.jpg to 100x100, that counts as one transformation, regardless of how many times it is served ².

Implementation Walkthroughs

Scenario A: Setting up ABIS in Astro

To use ABIS, you install the plugin and configure it to use the Sharp service.

import { defineConfig } from 'astro/config';
import betterImage from 'astro-plugin-better-image';

export default defineConfig({
 integrations: [
 betterImage({
 // Configuration options for Sharp
 service: 'sharp',
 }),
 ],
});

In your Astro components, you would use the provided <Image /> component which interfaces with this service to generate the correct runtime URLs.

Scenario B: Using Cloudflare Images

If you choose Cloudflare, you don’t need an Astro plugin for the processing itself. You simply construct URLs that point to Cloudflare’s delivery network.

Direct URL Transformation:

<!-- Resizing an external image via Cloudflare -->
<img src="/cdn-cgi/image/width=300,quality=75/https://mysite.com/hero.jpg" alt="Hero Image">

Using Cloudflare Image Resizing (Workers): If you are using Cloudflare Workers, you can fetch and resize images programmatically:

fetch(imageURL, {
 cf: {
 image: {
 width: 300,
 quality: 85,
 format: 'auto'
 }
 }
})

Risks and Gotchas

1. The “Binary” Problem with ABIS

Running Sharp on the edge (like Cloudflare Workers) can be tricky because Sharp relies on native binaries. Cloudflare Workers has a strict sandbox that doesn’t allow arbitrary binary execution. You typically need to use a specific build of Sharp (Wasm-based) or ensure your deployment platform (like Vercel or Netlify) supports the necessary Node.js filesystem bindings ¹.

2. Cloudflare Free Tier Limits

If you exceed the 5,000 monthly transformations on the Cloudflare Free plan, new transformations will fail with a 9422 error. Existing cached images will continue to serve, but any new variant request will break. You must upgrade to a paid plan to avoid this hard stop ².

3. Error Handling

• ABIS: If the image generation fails (e.g., source image is corrupt), your serverless function may throw a 500 error. You need to implement try/catch blocks in your image service code to return a fallback image.
• Cloudflare: You can use the onerror parameter in the URL to redirect to a fallback image if the transformation fails ².

Bottom Line

Recommendation: Start with Cloudflare Images if you are already in their ecosystem. The integration is seamless, and the free tier covers most personal and small business needs. Switch to ABIS only if you hit specific limitations (cost at scale, need for custom filters) or if you are deploying to a platform where Cloudflare integration is less native.

References