high warren
This part of the documentation
https://docs.astro.build/en/guides/images/#choosing-image--vs-img
Says that only local images are optimized by Astro, but this part
https://docs.astro.build/en/guides/images/#using-images-from-a-cms-or-cdn
Says that images from CDNs can use all image options. I'm not quite sure what that means… Will Astro optimise images hosted on a CDN, or is local the only option for auto scaling etc?
ivory mapleBOT
Hi @high warren. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, Astro does support optimization of images from a CDN or any remote source. However, to enable this, you need to configure lists of authorized image source URL domains and patterns for image optimization using image.domains and image.remotePatterns in your Astro configuration file. This is an extra layer of safety to protect your site when showing images from an external source. Here is an example of how to do this:
export default defineConfig({
image: {
domains: ["astro.build"],
}
});
This configuration will only allow remote images from astro.build to be optimized. If you want to allow remote images from HTTPS hosts, you can use the following configuration:
export default defineConfig({
image: {
remotePatterns: [{ protocol: "https" }],
}
});
Remember that remote images from other sources will not be optimized, but using the <Image /> component for these images will prevent Cumulative Layout Shift (CLS) ^1^.
Also, note that the <Image /> component optimizes your image and infers width and height (of local images) based on the original aspect ratio to avoid CLS. You should use the HTML <img> element when you cannot use the <Image /> component, for example, for unsupported image formats, when you do not want your image optimized by Astro, or to access and change the src attribute dynamically client-side ^2^.