diff --git a/src/pages/es/guides/images.md b/src/pages/es/guides/images.md index b75077818333d..40193fa577099 100644 --- a/src/pages/es/guides/images.md +++ b/src/pages/es/guides/images.md @@ -18,19 +18,19 @@ Astro usa las etiquetas estándar de HTML `` o `` para mostrar imág // src/pages/index.astro import rocket from '../images/rocket.svg'; --- - + Astro Un cielo nocturno estrellado. -Un cohete en el espacio. +Un cohete en el espacio. ``` ### En archivos `.md` -Puedes usar la sintaxis estándar de Markdown `![]()` o las etiquetas estándar de HTML `` en tus archivos `.md` para mostrar imágenes locales en tu carpeta `public/` o imágenes remotas en otro servidor. +Puedes usar la sintaxis estándar de Markdown `![]()` o las etiquetas estándar de HTML `` en tus archivos `.md` para mostrar imágenes locales en tu carpeta `public/` o imágenes remotas en otro servidor. ```md // src/pages/post-1.md @@ -58,7 +58,7 @@ import rocket from '../images/rocket.svg'; # Mi página MDX // Imagen local almacenada en src/images/rocket.svg -Un cohete en el espacio. +Un cohete en el espacio. // Imagen local almacenada en public/assets/stars.png ![Un cielo nocturno estrellado.](/assets/stars.png) @@ -113,30 +113,20 @@ Consulta la [guía de la integración image](/es/guides/integrations-guide/image La integración oficial de Astro, image, proporciona dos componentes Astro para renderizar imágenes optimizadas: `` y ``. Después de [instalar la integración](/es/guides/integrations-guide/image/#installation), puedes importar y usar estos dos componentes en cualquier lugar donde puedas usar componentes Astro, incluyendo archivos `.mdx`. - -:::note -Los componentes de Astro `` y `` no pueden ser usados con imágenes dentro de la carpeta `public/`. Usa la sintaxis estándar de HTML o Markdown en lugar de estos componentes. -::: - -:::caution -Los componentes de Astro `` y `` requieren de un atributo `alt` que proporcione un texto descriptivo para las imágenes. Estos componentes lanzarán un error si no contienen un texto `alt`. - -Si la imagen es meramente decorativa (es decir, no contribuye a la comprensión de la página), establece `alt=""` para que la imagen sea entendida de manera correcta e ignorada por los lectores de pantalla. -::: ### `` -El [componente ``](/es/guides/integrations-guide/image/#image-) de Astro permite optimizar una imagen individual y especificar el ancho, el alto y/o la relación de aspecto. Puedes transformar tu imagen a un formato particular, que puede ser usado para evitar comprobar el tipo de archivo de las imágenes remotas. +El [componente ``](/es/guides/integrations-guide/image/#image-) de Astro permite optimizar una imagen individual y especificar el ancho, el alto y/o la relación de aspecto. Puedes transformar tu imagen a un formato particular. Este componente es útil para imágenes en las que quieres mantener un tamaño consistente en pantallas, o controlar la calidad de una imagen (ej. logos). #### Imágenes locales -Las imágenes en la carpeta origen de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al atributo `src` del componente ``. Todas las demás propiedades son opcionales y se definirán por defecto con las propiedades originales del archivo de imágenes si no se proporcionan. +Las imágenes en la carpeta origen de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al atributo `src` del componente ``. `alt` es requerido, pero todas las demás propiedades son opcionales y se definirán por defecto con las propiedades originales del archivo de imagen si no se proporcionan. #### Imágenes remotas -Las imágenes remotas requieren una URL completa en el atributo `src` de la imagen. También debes proporcionar `width` y `height` o uno de los dos tamaños junto a `aspectRatio` al componente ``. +Para usar una imagen remota, pasa una URL completa en el atributo `src` de ``. `` no inferirá las dimensiones de este archivo remoto. Debes proporcionar el `formato` para renderizar el width de la imagen, y debes proporcionar `width` y `height` o uno de los dos tamaños junto a `aspectRatio`. El atributo `alt` también es requerido. #### Ejemplos @@ -144,27 +134,33 @@ Las imágenes remotas requieren una URL completa en el atributo `src` de la imag --- // src/pages/index.astro import { Image } from '@astrojs/image/components'; -import localImage from '../assets/local.png'; -const imageUrl = 'https://astro.build/assets/logo.png'; +import localImage from '../assets/logo.png'; +const remoteImage = 'https://picsum.photos/id/957/300/200.jpg'; +const localAlt = 'El Logo de Astro'; +const remoteAlt = 'Una vista de un bosque durante el día'; --- -// Imagen local optimizada, manteniendo el ancho, alto y formato de imagen original - + +{localAlt} + + +{localAlt} -// La altura se recalculara para que coincida con la original (solo local) o con la relación de aspecto especificada - - + +{remoteAlt} -// Ajustar a un ancho y alto específicos - - + +{localAlt} +{remoteAlt} -// Ajustar a una relación de aspecto específica y convertir a formato avif - - + +{localAlt} +{remoteAlt} -// Las imágenes locales también pueden importarse directamente - + +{localAlt} + +A happy penguin ``` ### ` ` @@ -181,29 +177,31 @@ Por defecto, el componente `` incluirá los formatos `avif` y `webp` #### Imágenes locales -Las imágenes locales en la carpeta `src` de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al componente ``. `src`, `widths`, y `sizes` son propiedades requeridas. +Las imágenes locales en la carpeta `src` de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al componente ``. `src`, `widths`, `sizes` y `alt` son propiedades requeridas. -#### Imágenes remotas +#### Imágenes remotas -Además de `src`, `widths`, y `sizes`, `aspectRatio` también es requerido para asegurar que la correcta `height` puede ser calculada en tiempo de compilación. +Además de `src`, `widths`, `sizes`, `alt` y `aspectRatio` también es requerido para asegurar que la correcta `height` puede ser calculada en tiempo de compilación. #### Ejemplos ```astro --- import { Picture } from '@astrojs/image/components'; -import localImage from '../assets/localImage.png'; -const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; +import localImage from '../assets/logo.png'; +const remoteImage = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; --- -// Imagen local con múltiples tamaños y formatos - + + -// Imagen remota (la relación de aspecto es requerida) - + + -// Las importaciones en línea son soportadas - + + + + ``` ### Uso en MDX @@ -217,12 +215,21 @@ import { Image, Picture } from '@astrojs/image/components'; import rocket from '../assets/rocket.png'; export const galaxy = 'https://astro.build/assets/galaxy.jpg'; -Astro -Cohete acercándose a la luna. +Astro +Cohete acercándose a la luna. ``` +## Alt Text + +No todos los usuarios pueden ver imágenes de la misma forma, así que la accesibilidad es una preocupación especialmente importante cuando se utilizan imágenes. Usa el atributo `alt` para proveer [texto alt descriptivo](https://www.w3.org/WAI/tutorials/images/) para las imágenes. + +Este atributo es requerido para los componentes de integración de imagen `` y ``. Estos componentes arrojarán un error si no se provee un texto alt. + +Si la imagen es meramente decorativa (p.ej. no contribuye al entendimiento de la página), establece `alt=""` para que la imagen sea entendida adecuadamente e ignorada por los lectores de pantalla. + + ## Usar imágenes de un CMS o una CDN Las CDNs de imágenes funcionan con Astro. Usa la URL como el atributo `src` de una imagen como lo haría al escribir HTML o JSX, o como el atributo `src` de una imagen remota con los componentes `` y ``. diff --git a/src/pages/es/reference/cli-reference.md b/src/pages/es/reference/cli-reference.md index f6357ab8bd80f..470a8c29ba4aa 100644 --- a/src/pages/es/reference/cli-reference.md +++ b/src/pages/es/reference/cli-reference.md @@ -96,11 +96,9 @@ Inicia un servidor local para servir tus archivos estáticos compilados en `dist Este comando es útil para obtener una vista previa de tu proyecto usando los archivos generados en la compilación final, antes de ser desplegado. Este comando no está diseñado para ejecutarse en producción. Para obtener ayuda con el despliegue a producción, consulte nuestra guía de [despliegue de un sitio web de Astro](/es/guides/deploy/). -Puede combinarse con las [flags comunes](#flags-comunes) documentadas más abajo. +Desde Astro 1.5.0, `astro preview` también funciona para compilaciones con SSR si usas un adaptador que lo soporte. Actualmente, solo el [adaptador de Node](/es/guides/integrations-guide/node/) soporta `astro preview`. -:::caution -`astro preview` no funciona con construcciones que usen SSR, el cual requiere que el uso de un tiempo de ejecución en el servidor y su adaptador correspondiente. -::: +Puede combinarse con las [flags comunes](#flags-comunes) documentadas más abajo. ## `astro check`