Imágenes en public vs src para View Transition API con Astro

Cuando estás desarrollando una web con Astro, uno de los puntos que tarde o temprano se cruza en tu camino es:

¿Dónde guardo mis imágenes?

Y la respuesta no es tan obvia, especialmente si empiezas a jugar con optimización, View Transition y rendimiento.

Hoy te quiero contar de forma clara qué pasa cuando usas imágenes en la carpeta public versus usarlas dentro de src, y las cosas que debes tener en cuenta cuando combinas esto con transiciones.

📁 public: la forma clásica

Si colocas tus imágenes en la carpeta public, Astro las sirve tal cual:

/public/images/foto.webp

<img src="/images/foto.webp" alt="Una foto bonita" />

✅ Ventajas:

• No cambia el nombre, la URL es clara y predecible.
• Tú decides la calidad y el peso de la imagen.
• Ideal si configuras manualmente tus Cache-Control headers desde Vercel o tu CDN.
• Compatible con View Transition porque la URL no cambia entre páginas.

⚠️ Desventajas:

• No hay optimización automática.
• No genera variantes para srcset o responsive de forma nativa.

💡 src + astro:assets: optimización automática

Si en lugar de public importas imágenes desde src y usas astro:assets:

import foto from '../assets/foto.webp'

Astro optimiza, cambia la URL y puede generar algo así:

<img src="/_astro/foto.8f3ab9d7.webp" alt="Una foto bonita" />

✅ Ventajas:

• Astro optimiza y genera imágenes adaptadas.
• Menos preocupaciones por formatos (webp, avif, jpg…).

Control de tamaños y calidad en tiempo de build.

⚠️ Desventajas:

• La URL de la imagen cambia por cada build (hash en el nombre).

• En transiciones con View Transition API la coincidencia de URL es esencial, y ese hash rompe la continuidad: aunque sea la misma imagen, el navegador las considera diferentes, haciendo que la transición fade por defecto también se aplique a la imagen.

🎬 View Transition API y las imágenes

Cuando usas la API de View Transition, el navegador necesita identificar que un elemento es el mismo para poder hacer una animación fluida.

Por eso, si en una página de listado usas:

<img src="/images/foto.webp" transition:name="foto-img" />

Y en la página detalle usas exactamente:

<img src="/images/foto.webp" transition:name="foto-img" />

✅ Funciona perfecto: la URL es igual y transition:name es el mismo.

❌ Pero si usas imágenes desde astro:assets, la URL final se ve diferente en cada build por el hash, aunque la imagen sea la misma.

Eso rompe la magia de la transición de movimiento en la imagen, y lo que verás será un simple fade (o a veces un salto visual).

🧠 Buenas prácticas si usas View Transition:

• Usa imágenes desde /public cuando quieras aprovechar animaciones fluidas y deseas que la imagen tenga una transición de movimiento en lugar de fade.

• Mantén la misma URL y mismo transition:name en ambas vistas (listado/detalle).

• Cuida que las imágenes tengan atributos como width y height definidos, para evitar saltos de layout.

• Configura Cache-Control en producción para no re-descargar la imagen en cada navegación.

✅ Conclusión

Uso	Recomendado para View Transition	Notas
/public	✅ Sí	La URL es estable y predecible.
astro:assets	⚠️ No recomendado	Las URLs tienen hash y cambian en cada build.

¡Gracias por leer!