#Assets (Experimental) which service to use
2 messages · Page 1 of 1 (latest)
Astro uses Squoosh by default to transform your images. This supports all JavaScript environments. However, if you're deploying to a Node environment, you may want to use sharp, which offers faster performance but requires Node.
Here are some pros and cons of using Squoosh and sharp:
Squoosh:
- Pros: Supports all JavaScript environments.
- Cons: Some features are not supported by Squoosh, such as the
fit,position, andbackgroundproperties when using<Image />or<Picture />components.
Sharp:
- Pros: Offers faster performance and more fine-grained control of image transformations. It supports more features, such as the
fit,position, andbackgroundproperties when using<Image />or<Picture />components. - Cons: Requires a Node environment. It's not currently supported on Cloudflare SSR,
@astrojs/deno,@astrojs/netlify/edge-functions, and@astrojs/vercel/edge.
To use sharp, you need to install it first using npm, pnpm, or Yarn:
npm install sharp
pnpm install sharp
yarn add sharp
Then, enable Astro’s sharp image service in your config:
import { defineConfig, sharpImageService } from "astro/config";
export default defineConfig({
experimental: {
assets: true,
},
image: {
service: sharpImageService(),
},
});