Is it possible to use Astro <Image/> but not have Astro optimize the image, only add width and height attributes?
#Skip image optimization in Image component
strange bear
cosmic questBOT
Hi @strange bear. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it is possible to use the Astro <Image /> component without optimizing the image while still adding width and height attributes. This can be achieved by configuring a no-op passthrough image service in your Astro configuration.
To do this, you can use the passthroughImageService() in your astro.config.mjs file. Here's how you can set it up:
import { defineConfig, passthroughImageService } from 'astro/config';
export default defineConfig({
image: {
service: passthroughImageService()
}
});
By configuring this passthrough service, Astro will not perform any image transformation or processing. However, you'll still benefit from other features of the <Image /> component, including:
- Avoiding Cumulative Layout Shift (CLS)
- Enforcing the
altattribute - Maintaining a consistent authoring experience
This approach is particularly useful for environments that don't support Astro's built-in Sharp image optimization, such as Deno or Cloudflare. It allows you to use the <Image /> component while only adding width and height attributes without optimizing the image itself.
Configuration Reference provides more details on configuring image options in Astro.