#how to generate an optimized remote image

9 messages · Page 1 of 1 (latest)

covert root
#

how to generate an optimized remote image

ocean wyvernBOT
#

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

#

To generate an optimized remote image using Astro's <Image /> component, you need to pass a full URL to the src attribute and include a value for alt. Since the <Image /> component cannot determine the original file format of a remote image, you must provide an output format (e.g., png, avif) to transform your remote image. You must also either provide width and height, or one of the dimensions plus an aspectRatio to avoid content layout shifts because the <Image /> component does not know the dimensions of a remote image. All other properties are optional.

Here's an example of generating an optimized remote image:

---
import { Image } from '@astrojs/image/components';
const remoteImage = "https://picsum.photos/id/957/300/200.jpg";
const remoteAlt = "A low-angle view of a forest during the daytime";
---

<Image src={remoteImage} width={300} aspectRatio="1:1" format="png" alt={remoteAlt} />

In this example, the remote image URL is passed to the src attribute, the width is set to 300, the aspect ratio is set to 1:1, the output format is set to png, and an alt text is provided.

Source: Astro's Image Integration - Remote Images (https://docs.astro.build/en/guides/images#remote-images)

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

Astro Documentation
Images

Learn how to use images in Astro.

#

@covert root kapa.ai is still learning and improving, please let us how it did by reacting below

covert root
vernal zenith
#

@ocean wyvern can I use astro:assets ?

ocean wyvernBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can use the astro:assets module to optimize images in Astro. However, the <Image /> component from astro:assets is designed for local images and not remote images. To use it, you need to import the image from a relative file path or an import alias and then use the import as the src attribute for the <Image /> component.

Here's an example of using the astro:assets module for a local image:

---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---

<!-- `alt` is mandatory on the Image component -->
<Image src={myImage} alt="A description of my image." />

Keep in mind that the <Image /> component from astro:assets cannot be used in framework components and is available only in .astro and .mdx files.

Source: astro:assets module (https://docs.astro.build/en/guides/assets#astroassets-module)

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

Astro Documentation
Assets (Experimental)

Learn how to enable experimental asset support in Astro.