Astro nos ofrece una poderoza herramienta para trabajar con imágenes y poder optimizarlas de manera automática. En este artículo aprenderemos como utilizar el componente Image, la diferencia entre el directorio 📂/public y 📂/assets ¿Donde debería guardar mis imágenes?

Tanto al agregar imgenes en public como en Assets debes ser capaz de acceder a ellas sin problemas.

astro-project/
│
├── public/
│   └── profile.png
│
│
├── src/
│   └── assets        
│   │   └── profile.png
│   │     
│   │    
│   └──components/
│   │  ├── header.astro
│   │  └──footer.astro
│   │     
│    pages/
│   └── index.scss      

astro-project/
│
├── public/
│   └── profile.png
│
│
├── src/
│   └── assets        
│   │   └── profile.png
│   │     
│   │    
│   └──components/
│   │  ├── header.astro
│   │  └──footer.astro
│   │     
│    pages/
│   └── index.scss      

Pues bien, aquí la principal diferencia es que cuando agregues las imagenes en el directorio 📂/assets, están pueden ser optimizadas por astro. Mientras que las que coloques en public se matendrán igual.

Vamos a ver un ejemplo de como es importar una imagern utilizando la etiqueta img y la imagen desde 📂/assets

--- 
import Layout from '.../ layouts/Layout.astro';
import image from '.../assets/bg_home. jpg '
---

<Layout>
	<h1>Inicio</h1>
	<img src={image.src}  />
</Layout>

--- 
import Layout from '.../ layouts/Layout.astro';
import image from '.../assets/bg_home. jpg '
---

<Layout>
	<h1>Inicio</h1>
	<img src={image.src}  />
</Layout>

Verás que la imagen se muestra sin ningún problema. Sin embargo, al utilizar la etiqueta img, astro no realizara ningúna optimizacion.

Componentes de astro para imágenes

Astro nos proporciona dos componentes integrados para imágenes <Image/> y <Picture/> . Vamos a ver uno por uno.

<Image/>

Utiliza el componente <Image/> para mostrar versiones optimizadas de tus imágenes desde:

• Tus imágenes locales dentro del directorio src/
• Imagenes remotas previamente configuradas y de origenes autorizados

El compoente <Image/> puede transformar las dimensiones, tipop de archivo y calidad sobre tus imagenes locales o remotas. Esta conversión ocurre durante el tiempo de construcción para paginas precargadas. Cuando tu pagina se renderiza bajo demanda, esta conversión ocurre en el momento en que la pagina es visible.

<Picture />

Utiliza el componente <Picture /> para generar una etiqueta <picture> con multiples formatos y/o tamaños de tu imagen. Esto te permitirá especificarel formato de imagen preferido para mostrar y al mismo tiempo, nos provee una imagen de fallback. Al igual que con el componente <Picture/> las imágenesserán procesadas en tiempo de construcción para páginas precargadas. Cuando tu pagina se renderiza bajo demanda, esta conversión ocurre en el momento en que la pagina es visible.

---
import { Picture } from 'astro:assets';
import myImage from '../assets/my_image.png'; /
---

<!-- `alt` is mandatory on the Picture component -->
<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />

---
import { Picture } from 'astro:assets';
import myImage from '../assets/my_image.png'; /
---

<!-- `alt` is mandatory on the Picture component -->
<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />