#Assets (Experimental) which service to use

2 messages · Page 1 of 1 (latest)

misty muralBOT
#

Hi @steep perch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

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, and background properties 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, and background properties 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(),
 },
});

For more information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/assets#using-sharp) and the Astro integrations guide (https://docs.astro.build/en/guides/integrations-guide/image#installation).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: