From a5a193d3594ce18fda4cb1fe071ef4d9c79b907d Mon Sep 17 00:00:00 2001 From: Waxer59 Date: Mon, 28 Aug 2023 21:54:01 +0200 Subject: [PATCH 1/4] translate page --- .../es/core-concepts/astro-components.mdx | 2 +- src/content/docs/es/guides/images.mdx | 695 +++++++++++++++-- .../es/guides/integrations-guide/image.mdx | 722 ------------------ .../guides/migrate-to-astro/from-gatsby.mdx | 28 +- .../guides/migrate-to-astro/from-nextjs.mdx | 20 +- .../guides/migrate-to-astro/from-nuxtjs.mdx | 21 +- .../es/reference/image-service-reference.mdx | 9 +- 7 files changed, 646 insertions(+), 851 deletions(-) delete mode 100644 src/content/docs/es/guides/integrations-guide/image.mdx diff --git a/src/content/docs/es/core-concepts/astro-components.mdx b/src/content/docs/es/core-concepts/astro-components.mdx index 6a47c7dde38f6..34699ebd57d38 100644 --- a/src/content/docs/es/core-concepts/astro-components.mdx +++ b/src/content/docs/es/core-concepts/astro-components.mdx @@ -334,7 +334,7 @@ Astro soporta importar y usar archivos `.html` como componentes o colocarlos den Los componentes HTML solo deben contener HTML válido, y por lo tanto le faltarán características claves de los componentes de Astro. - Ellos no soportan el frontmatter, importaciones del lado del servidor, o expresiones dinámicas. - Cualquier etiqueta ` + +Un cielo estrellado. + +``` -Nostros recomendamos que mantengas tus imágenes en [`public/`](#public) o almacenarlas [remotamente](#usar-imágenes-de-un-cms-o-una-cdn) si tu necesitas usar archivos de Markdown. +#### Pasando el componente Image -Impórtalas desde una **ruta relativa** o un [alias de importación](/es/guides/aliases/) en cualquier archivo de componente y después usa la importación como un atributo `src` de imagen. +El componente ``, al igual que cualquier otro componente de Astro, **no está disponible para los componentes de frameworks UI**. + +Sin embargo, puedes pasar el contenido estático generado por `` a un componente de framework dentro de un archivo `.astro` como hijos o utilizando un [`` nombrado](/es/core-concepts/framework-components/#puedo-usar-componentes-de-astro-dentro-de-mis-componentes-de-framework): + + +```astro title="ImageWrapper.astro" +--- +import ReactComponent from './ReactComponent.jsx'; +import { Image } from "astro:assets" +import stars from "~/stars/docline.png"; +--- + + + Un cielo estrellado. + +``` + +## Generando imágenes con `getImage()` + +:::caution +`getImage()` se basa en APIs solo para el servidor y provoca errores en la compilación cuando se utiliza en el lado del cliente. +::: + +La función `getImage()` está destinada a generar imágenes que se utilizarán en otro lugar que no sea directamente en HTML, por ejemplo, en una [Ruta API](/es/core-concepts/endpoints/#endpoints-del-servidor-rutas-de-api). También te permite crear tu propio componente `` personalizado. + +`getImage()` recibe un objeto de opciones con las [mismas propiedades que el componente Image](#propiedades) (excepto `alt`). ```astro --- -// src/pages/index.astro +import { getImage } from "astro:assets"; +import myBackground from "../background.png" -// Acceso a imágenes en `src/images/` -import logo from '../images/logo.png'; +const optimizedBackground = await getImage({src: myBackground, format: 'avif'}) --- -Astro + +
``` -### `public/` +Devuelve un objeto con las siguientes propiedades: -Tus imágenes pueden ser almacenadas en `src/` y pueden ser usadas por otros componentes (`.astro`, `.mdx` y otros frameworks UI), pero no en archivos de Markdown. +```js +{ + options: {...} // Parámetros originales pasados, + src: "https//..." // Ruta a la imagen generada, + attributes: {...} // Atributos HTML adicionales necesarios para representar la imagen (width, height, style, etc..) +} +``` -Sin embargo, los archivos en el directorio `/public` son siempre servidos o copiados sin modificaciones. Si estás usando imágenes fuera de los archivos de Markdown, te recomendamos que las imágenes locales sean guardadas en `/src` cuando sea posible para que Astro pueda transformarlas, optimizarlas y empaquetarlas. +## Texto Alt -El atributo `src` es **relativo a la carpeta public**. En Markdown, también puedes usar la notación `![]()`. +No todos los usuarios pueden ver las imágenes de la misma manera, por lo que la accesibilidad es una preocupación especialmente importante al utilizar imágenes. Utiliza el atributo `alt` para proporcionar [texto alternativo descriptivo](https://www.w3.org/WAI/tutorials/images/) para las imágenes. -```astro title="src/pages/index.astro" +Este atributo es obligatorio para el componente ``. `` lanzará un error si no se proporciona texto alternativo. + +Si la imagen es meramente decorativa (es decir, no contribuye a la comprensión de la página), establece `alt=""` para que los lectores de pantalla sepan que deben ignorar la imagen. + +## Servicio de imágenes por defecto + +[Sharp](https://github.com/lovell/sharp) es el servicio de imágenes por defecto utilizado para `astro:assets`. + +Si prefieres utilizar [Squoosh](https://github.com/GoogleChromeLabs/squoosh) para transformar tus imágenes, actualiza tu configuración con lo siguiente: + +```js title="astro.config.mjs" ins={4-6} +import { defineConfig, squooshImageService } from 'astro/config'; + +export default defineConfig({ + image: { + service: squooshImageService(), + }, +}); +``` + +## Integraciones comunitarias + +Existen varias [integraciones de imágenes de la comunidad](https://astro.build/integrations?search=images) de terceros para optimizar y trabajar con imágenes en tu proyecto de Astro. + +## Actualizar a v3.0 desde v2.x + +`astro:assets` ya no está detrás de una bandera experimental en Astro v3.0. + +`` es ahora un componente integrado y se ha eliminado la integración anterior `@astrojs/image`. + +Estos y otros cambios relacionados con el uso de imágenes en Astro pueden causar algunos cambios disruptivos al actualizar tu proyecto de Astro de una versión anterior. + +Sigue las instrucciones a continuación según corresponda para actualizar un proyecto de Astro v2.x a v3.0. + +### Actualizar desde `experimental.assets` + +Si habías habilitado previamente la bandera experimental para `astro:assets`, deberás actualizar tu proyecto para Astro v3.0, que ahora incluye las características de assets de forma predeterminada. + +#### Eliminar la bandera `experimental.assets` + +Elimina la bandera experimental: + +```js title="astro.config.mjs" del={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + experimental: { + assets: true + } +}); +``` + +Si es necesario, también actualiza tu archivo `src/env.d.ts` para reemplazar la referencia `astro/client-image` por `astro/client`: + +```ts title="src/env.d.ts" del={1} ins={2} +/// +/// +``` + +#### Eliminar el alias de importación `~/assets` + +Este alias de importación ya no se incluye por defecto con `astro:assets`. Si estabas usando este alias con assets experimentales, debes convertirlos a rutas de archivo relativas o [crear tus propios alias de importación](/es/guides/aliases/). + +```astro title="src/pages/posts/post-1.astro" del={2} ins={3} --- +import rocket from '~/assets/rocket.png' +import rocket from '../../assets/rocket.png'; +--- +``` + +#### Agrega soporte sencillo para assets en Cloudflare, Deno, Vercel Edge y Netlify Edge + + Astro v3.0 permite que `astro:assets` funcione sin errores en Cloudflare, Deno, Vercel Edge y Netlify Edge, que no admiten la optimización de imágenes integrada de Astro con Squoosh y Sharp. Ten en cuenta que Astro no realiza ninguna transformación ni procesamiento de imágenes en estos entornos. Sin embargo, aún puedes disfrutar de otros beneficios de usar `astro:assets`, como la ausencia de Desplazamiento Acumulativo de Diseño (CLS), el atributo `alt` obligatorio y una experiencia de autoría coherente. + + Si antes evitaste usar `astro:assets` debido a estas limitaciones, ahora puedes usarlo sin problemas. Puedes configurar el servicio de imágenes sin acción para optar explícitamente por este comportamiento: + + ```astro + // astro.config.mjs + export default { + image: { + service: { + entrypoint: 'astro/assets/services/noop' + } + } + } + ``` + +### Decide dónde almacenar tus imágenes + +Consulta la guía de Imágenes para ayudarte a decidir [dónde almacenar tus imágenes](/es/guides/images/#dónde-guardar-las-imágenes). Es posible que desees aprovechar las nuevas opciones para almacenar tus imágenes con la flexibilidad adicional que `astro:assets` ofrece. Por ejemplo, las imágenes relativas desde la carpeta `src/` de tu proyecto ahora pueden ser referenciadas en Markdown, MDX y Markdoc utilizando la sintaxis estándar de Markdown `![alt](src)`. + +### Actualiza las etiquetas existentes `` + +Anteriormente, importar una imagen devolvía un `string` con la ruta de la imagen. Ahora, los assets de imagen importados coinciden con la siguiente firma: -// Acceso a imágenes en `public/images/` +```ts +interface ImageMetadata { + src: string; + width: number; + height: number; + format: string; +} +``` + +Debes actualizar el atributo `src` de cualquier etiqueta `` existente (incluyendo cualquier [imagen en componentes de frameworks UI](#imágenes-en-componentes-de-frameworks-ui)) y también puedes actualizar otros atributos que ahora están disponibles para ti a partir de la imagen importada. + +```astro title="src/components/MyComponent.astro" ".src" ".width" ".height" del={4} ins={6} --- - +import rocket from '../images/rocket.svg'; +--- +Un cohete en el espacio. + +Un cohete en el espacio. ``` -## Integración Image de Astro +### Actualiza tus archivos Markdown, MDX y Markdoc -:::note[para ser archivada en la versión v3.0] -La integración [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) ya no será compatible activamente en la versión de Astro v3.0. +Las imágenes relativas desde la carpeta `src/` de tu proyecto ahora pueden ser referenciadas en Markdown, MDX y Markdoc utilizando la sintaxis estándar de Markdown `![alt](src)`. -Te sugerimos que la elimines lo antes posible y que uses el módulo experimental `astro:assets` que se integrará en `astro@3.0`. +Esto te brinda la opción de mover tus imágenes desde el directorio `public/` a la carpeta `src/` de tu proyecto, donde ahora serán procesadas y optimizadas. Tus imágenes existentes en `public/` y las imágenes remotas siguen siendo válidas, pero no son optimizadas por el proceso de compilación de Astro. -¡Sigue la [Guía de Assets (experimental)](/es/guides/assets/) para empezar a usar la nueva solución de imágenes de Astro hoy mismo! +```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/" +# Mi página Markdown -**`astro:assets` no es un reemplazo completo de `@astrojs/image` en este momento, pero está en desarrollo activo.** -::: + +![Un cielo estrellado](../../images/stars.png) + + +![Un cielo estrellado](./stars.png) +``` + +Si necesitas más control sobre los atributos de tu imagen, te recomendamos usar el formato de archivo `.mdx`, que te permite incluir el componente `` de Astro o una etiqueta JSX `` además de la sintaxis Markdown. Utiliza la [integración de MDX](/es/guides/integrations-guide/mdx/) para agregar soporte para MDX a Astro. + +### Elimina `@astrojs/image` + +Si estabas utilizando la integración de imágenes en Astro v2.x, completa los siguientes pasos: + +1. Elimina la integración `@astrojs/image`. + + Debes [eliminar la integración](/es/guides/integrations-guide/#eliminando-una-integración) desinstalándola y luego eliminándola de tu archivo `astro.config.mjs`. + + ```js del={3,7} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import image from '@astrojs/image'; + + export default defineConfig({ + integrations: [ + image(), + ] + }) + ``` + +2. Migra cualquier componente `` existente. + + Cambia todas las declaraciones de `import` de `@astrojs/image/components` a `astro:assets` para poder usar el nuevo componente integrado ``. + + Elimina cualquier atributo del componente que no sean [propiedades de assets de imagen actualmente admitidas](/es/guides/images/#propiedades). + + Por ejemplo, `aspectRatio` ya no es compatible, ya que ahora se infiere automáticamente a partir de los atributos `width` y `height`. + + ```astro title="src/components/MyComponent.astro" del= {2,11} ins={3} + --- + import { Image } from '@astrojs/image/components'; + import { Image } from 'astro:assets' + import localImage from "../assets/logo.png"; + const localAlt = "El logo de Astro"; + --- + + {localAlt} + ``` + +3. Elimina cualquier componente `` existente. + + Actualmente, la función de assets integrada no incluye un componente ``. -Para encontrar la documentación de como usar `@astrojs/image` en Astro v2, por favor ve a la [documentación del paquete `@astrojs/image`](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md) + En su lugar, puedes utilizar los atributos de imagen HTML `srcset` y `sizes`, o la etiqueta `` [para dirección de arte o para crear imágenes responsivas](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction). -## Usar imágenes de un CMS o una CDN +4. Elimina Sharp -Las CDNs de imágenes funcionan con Astro. Utiliza la URL completa de una imagen como atributo `src` en una etiqueta `` o notación de Markdown. + [Sharp](https://github.com/lovell/sharp) es ahora el servicio de imágenes por defecto utilizado para `astro:assets`. Ya no necesitas instalar la dependencia localmente en tu proyecto. -Alternativamente, si la CDN proporciona un SDK para Node.js, puedes usarlo en tu proyecto. Por ejemplo, el [SDK de Cloudinary](https://cloudinary.com/documentation/node_integration) puede generar la etiqueta `` con el `src` apropiado para ti. + Desinstala Sharp utilizando tu gestor de paquetes, o elimínalo manualmente de tu `package.json`. -## Alt Text + Si prefieres utilizar [Squoosh](https://github.com/GoogleChromeLabs/squoosh) para transformar tus imágenes, actualiza tu configuración con la siguiente opción `image.service`: -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. + ```js title="astro.config.mjs" ins={4-6} + import { defineConfig, squooshImageService } from 'astro/config'; -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. + export default defineConfig({ + image: { + service: squooshImageService(), + }, + }); + ``` -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. +### Actualiza los esquemas de Colecciones de Contenido -## Integraciones de la comunidad +Ahora puedes declarar una imagen asociada para una entrada de colecciones de contenido, como la imagen de portada de una entrada de blog, en tu metadatos usando su ruta relativa a la carpeta actual. -Además de la integración oficial [`@astrojs/image`](/es/guides/integrations-guide/image/), existen varias [integraciones de imágenes de la comunidad](https://astro.build/integrations?search=images) para optimizar y trabajar con imágenes en tu proyecto. +El nuevo helper `image` para colecciones de contenido te permite validar los metadatos de la imagen utilizando Zod. Aprende más sobre [cómo usar imágenes en colecciones de contenido](/es/guides/images/#imágenes-en-colecciones-de-contenido) \ No newline at end of file diff --git a/src/content/docs/es/guides/integrations-guide/image.mdx b/src/content/docs/es/guides/integrations-guide/image.mdx deleted file mode 100644 index cd998f6f73cb5..0000000000000 --- a/src/content/docs/es/guides/integrations-guide/image.mdx +++ /dev/null @@ -1,722 +0,0 @@ ---- -type: integration -title: '@astrojs/image' -description: Aprende como usar la integración @astrojs/image en tu proyecto de Astro. -githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/image/' -hasREADME: true -category: other -i18nReady: true ---- - -import Video from '~/components/Video.astro'; - -> ⚠️ ¡Esta integración será archivada en Astro v3.0 (Otoño 2023) en favor del módulo `astro:assets`. Por favor, consulta la [documentación de Assets](/es/guides/assets/) para más información! - -Esta **[integración de Astro][astro-integration]** optimiza las imágenes en tu [proyecto de Astro](https://astro.build/). Es compatible con Astro v2 solo para todos los sitios estáticos y para [algunos hosts de implementación de renderizado en el lado del servidor](#instalación). - -## ¿Por qué `@astrojs/image`? - -Las imágenes juegan un papel importante en el rendimiento general y la usabilidad del sitio. Servir imágenes con el tamaño adecuado marca la diferencia, pero a menudo es complicado automatizar este proceso. - -Esta integración proporciona los componentes `` y ``, así como un transformador de imágenes básico, con soporte completo para sitios estáticos y renderizado en el lado del servidor. El transformador de imágenes incorporado también es reemplazable, abriendo la puerta a futuras integraciones que funcionen con tu servicio de imágenes alojado favorito. - -## Instalación - -Junto con nuestra integración, recomendamos instalar [sharp](https://sharp.pixelplumbing.com/) cuando sea apropiado. - -El transformador de imágenes predeterminado de `@astrojs/image` está basado en [Squoosh](https://github.com/GoogleChromeLabs/squoosh) y utiliza bibliotecas de WebAssembly para admitir la mayoría de los entornos de implementación, incluidos aquellos que no admiten sharp, como StackBlitz. - -Para obtener compilaciones más rápidas y un control más preciso de las transformaciones de imagen, instala sharp además de `@astrojs/image` si - -* Estás construyendo un sitio estático con Astro. -* Estás utilizando un host de despliegue SSR compatible con NodeJS mediante `@astrojs/netlify/functions`, `@astrojs/vercel/serverless` o `@astrojs/node`. - -Ten en cuenta que `@astrojs/image` no es compatible actualmente con - -* Cloudflare SSR -* `@astrojs/deno` -* `@astrojs/netlify/edge-functions` -* `@astrojs/vercel/edge` - -### Instalación rapida - -La herramienta de línea de comandos `astro add` automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué gestor de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las instrucciones y escribe "y" en la terminal (es decir, "sí") para cada uno. - -```sh -# Usando NPM -npx astro add image -# Usando Yarn -yarn astro add image -# Usando PNPM -pnpm astro add image -``` - -Si tienes algún problema, [no dudes en informarnos en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación. - -### Instalación manual - -Primero, instala el paquete `@astrojs/image` utilizando tu gestor de paquetes. Si estás utilizando npm o no estás seguro, ejecuta lo siguiente en tu terminal: - -```sh -npm install @astrojs/image -``` - -Luego, aplica esta integración a tu archivo `astro.config.*` utilizando la propiedad `integrations`: - -```js ins={3} "image()" -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import image from '@astrojs/image'; - -export default defineConfig({ - // ... - integrations: [image()], -}); -``` - -### Instalando `sharp` (opcional) - -Primero, instala el paquete `sharp` utilizando tu administrador de paquetes. Si estás utilizando npm o no estás seguro, ejecuta lo siguiente en la terminal: - -```sh -npm install sharp -``` - -A continuación, actualiza la integración en tu archivo `astro.config.*` para utilizar el transformador de imágenes integrado `sharp`. - -```js ins={8} -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import image from '@astrojs/image'; - -export default defineConfig({ - // ... - integrations: [ - image({ - serviceEntryPoint: '@astrojs/image/sharp', - }), - ], -}); -``` - -### Actualiza `env.d.ts` - -Para tener la mejor experiencia de desarrollo, agrega las definiciones de tipos de las integraciones a tu archivo `env.d.ts` del proyecto. - -```typescript -// Reemplaza `astro/client` con `@astrojs/image/client` -/// -``` - -O, alternativamente, si tu proyecto está utilizando los tipos a través de un archivo `tsconfig.json` - -```json -{ - "compilerOptions": { - // Reemplaza `astro/client` con `@astrojs/image/client` - "types": ["@astrojs/image/client"] - } -} -``` - -## Uso - -```astro title="src/pages/index.astro" ---- -import { Image, Picture } from '@astrojs/image/components'; -import heroImage from '../assets/hero.png'; ---- -// imagen optimizada, manteniendo el ancho, alto y formato de imagen originales -texto descriptivo -// especifica varios tamaños para imágenes responsivas o dirección de arte - -``` - -Los transformadores de imagen incluidos admiten el redimensionamiento de imágenes y la codificación en diferentes formatos de imagen. Los servicios de imágenes de terceros también podrán agregar soporte para transformaciones personalizadas (p. ej: `blur`, `filter`, `rotate`, etc). - -Los componentes `` y `` de Astro requieren el atributo `alt`, que proporciona texto descriptivo para las imágenes. Se mostrará un aviso si falta el texto alternativo, y en futuras versiones de la integración se generará un error si no se proporciona texto alternativo. - -Si la imagen es simplemente decorativa (es decir, no contribuye a la comprensión de la página), establece `alt=""` para que la imagen sea correctamente entendida y omitida por los lectores de pantalla. - -### `` - -El componente integrado `` se utiliza para crear una etiqueta `` optimizada tanto para imágenes remotas accedidas por URL como para imágenes locales importadas desde el directorio `src/` de tu proyecto. - -Además de las propiedades específicas del componente, cualquier atributo HTML válido para la etiqueta`` incluido en el componente `` se incluirá en la etiqueta `` generada. - -#### src - -

- -**Tipo:** `string` | `ImageMetadata` | `Promise`
-**Por defecto:** `true` - -

- -Fuente del archivo de imagen original. - -Para imágenes remotas, proporciona la URL completa. (p. ej. `src="https://astro.build/assets/blog/astro-1-release-update.avif"`) - -Para imágenes ubicadas en el directorio `src/` de tu proyecto, utiliza la ruta del archivo relativa al directorio `src/`. (p. ej. `src="../assets/source-pic.png"`) - -Para imágenes ubicadas en el directorio `public/`, utiliza la ruta URL relativa al directorio `public/`. (p. ej. `src="/images/public-image.jpg"`). Estas funcionan como imágenes remotas. - -#### alt - -

- -**Tipo:** `string`
-**Por defecto:** `true` - -

- -Define una descripción alternativa de texto de la imagen. - -Establécelo como un string vacio (`alt=""`) si la imagen no es una parte clave del contenido (p. ej, si es una decoración o un píxel de seguimiento). - -#### format - -

- -**Tipo:** `'avif' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp'`
-**Por defecto:** `undefined` - -

- -El formato de salida que se utilizará en la imagen optimizada. Se utilizará el formato de la imagen original si no se proporciona el valor `format`. - -Esta propiedad es obligatoria para imágenes remotas cuando se utiliza el transformador de imágenes predeterminado Squoosh, esto se debe a que no se puede inferir el formato original. - -A partir de la versión 0.15.0, puedes utilizar el componente `` cuando trabajas con imágenes SVG, pero la opción `svg` solo se puede utilizar cuando la imagen original es un archivo `.svg`. Otros formatos de imagen (como `.png` o `.jpg`) cannot be converted into vector images. La imagen `.svg` en sí no será transformada, pero la etiqueta `` final será optimizada correctamente por la integración. - -#### quality - -

- -**Tipo:** `number`
-**Por defecto:** `undefined` - -

- -La calidad de compresión utilizada durante la optimización. El servicio de imágenes utilizará su propia calidad por defecto dependiendo del formato de la imagen si no se proporciona. - -#### width - -

- -**Tipo:** `number`
-**Por defecto:** `undefined` - -

- -La altura deseada de la imagen de salida. Combínalo con `width` para recortar la imagen a un tamaño exacto, o con `aspectRatio` para calcular y recortar automáticamente el ancho. - -Las dimensiones son opcionales para las imágenes locales. Si no se proporcionan, se utilizará el tamaño original de la imagen. - -Para las imágenes remotas, incluyendo las imágenes en la carpeta `public/`, la integración necesita poder calcular las dimensiones de la imagen optimizada. Esto se puede hacer proporcionando `width` y `height` o proporcionando una dimensión y un `aspectRatio`. - -#### height - -

- -**Tipo:** `number`
-**Por defecto:** `undefined` - -

- -La altura deseada de la imagen de salida. Combínalo con `width` para recortar la imagen a un tamaño exacto, o con `aspectRatio` para calcular y recortar automáticamente el ancho. - -Las dimensiones son opcionales para las imágenes locales. Si no se proporcionan, se utilizará el tamaño original de la imagen. - -Para las imágenes remotas, incluyendo las imágenes en la carpeta `public/`, la integración necesita poder calcular las dimensiones de la imagen optimizada. Esto se puede hacer proporcionando `width` y `height` o proporcionando una dimensión y un `aspectRatio`. - -#### aspectRatio - -

- -**Tipo:** `number` | `string`
-**Por defecto:** `undefined` - -

- -La relación de aspecto deseada de la imagen de salida. Se combina con `width` o `height` para calcular automáticamente y recortar la otra dimensión. - -Se puede proporcionar un `string` en la forma de `{width}:{height}`, por ejemplo: `16:9` o `3:4`. - -También se puede proporcionar un `number`, lo cual es útil cuando el aspect ratio se calcula en tiempo de generación. Esto puede ser un número en línea como `1.777` o en línea como una expresión JSX como `aspectRatio={16/9}`. - -Para imágenes remotas, incluidas las imágenes en la carpeta `public/`, la integración necesita poder calcular las dimensiones de la imagen optimizada. Esto se puede hacer proporcionando `width` y `height` o proporcionando una dimensión y un `aspectRatio`. - -#### background - -

- -**Tipo:** `ColorDefinition`
-**Por defecto:** `undefined` - -

- -> Esto no es compatible con el servicio Squoosh por defecto. Consulta la [sección de instalación](#instalando-sharp-opcional) para obtener más detalles sobre cómo usar el servicio `sharp` en su lugar. - -El color de fondo se utiliza para rellenar el fondo restante cuando se utiliza contain para la propiedad `fit`. - -El color de fondo a utilizar para reemplazar el canal alfa con el método `flatten` de `sharp`. En caso de que el formato de salida no admita transparencia (p. ej. `jpeg`), se recomienda incluir un color de fondo; de lo contrario, se utilizará el negro como reemplazo predeterminado para los píxeles transparentes. - -El parámetro acepta un valor de tipo `string`. - -El parámetro puede ser un [color HTML con nombre](https://www.w3schools.com/tags/ref_colornames.asp), una representación hexadecimal del color con 3 o 6 caracteres hexadecimales en el formato `#123[abc]`, o una definición RGB en el formato `rgb(100,100,100)`, o una definición RGBA en el formato `rgba(100,100,100, 0.5)`. - -#### fit - -

- -**Tipo:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'`
-**Por defecto:** `'cover'` - -

- -> Esto no está soportado por el servicio predeterminado de Squoosh. Consulta la [sección de instalación](#instalando-sharp-opcional) para obtener más detalles sobre cómo utilizar el servicio `sharp` en su lugar. Lee más sobre [cómo redimensionar imágenes con `sharp`](https://sharp.pixelplumbing.com/api-resize). - -Cómo debe redimensionarse la imagen para que se ajuste tanto el `height` como el `width`. - -#### position - -

- -**Tipo:** `'top' | 'right top' | 'right' | 'right bottom' | 'bottom' | 'left bottom' | 'left' | 'left top' | 'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' | 'center' | 'centre' | 'cover' | 'entropy' | 'attention'`
-**Por defecto:** `'centre'` - -

- -> Esto no está soportado por el servicio predeterminado de Squoosh. Consulta la [sección de instalación](#instalando-sharp-opcional) para obtener más detalles sobre cómo utilizar el servicio `sharp` en su lugar. Lee más sobre [cómo redimensionar imágenes con `sharp`](https://sharp.pixelplumbing.com/api-resize). - -La posición del recorte cuando el ajuste fit es `cover` o `contain`. - -### `` - -El componente integrado `` se utiliza para crear un elemento `` optimizado tanto para imágenes remotas accedidas por URL como para imágenes locales importadas desde el directorio `src/` de tu proyecto. - -Además de las propiedades específicas del componente, cualquier atributo HTML válido para el elemento `` incluido en el componente `` será incluido en el elemento `` construido. - -#### src - -

- -**Tipo:** `string` | `ImageMetadata` | `Promise`
-**Por defecto:** `true` - -

- -Fuente del archivo de imagen original. - -Para imágenes remotas, proporciona la URL completa. (p. ej. `src="https://astro.build/assets/blog/astro-1-release-update.avif"`) - -Para imágenes ubicadas en el directorio `src/` de tu proyecto: utiliza la ruta del archivo relativa al directorio `src/`. (p. ej. `src="../assets/source-pic.png"`) - -Para imágenes ubicadas en el directorio `public/` de tu proyecto: utiliza la ruta de URL relativa al directorio `public/`. (p. ej. `src="/images/public-image.jpg"`). Estas funcionan como imágenes remotas. - -#### alt - -

- -**Tipo:** `string`
-**Por defecto:** `true` - -

- -Define una descripción de texto alternativa de la imagen. - -Establécelo como una cadena vacía (`alt=""`) si la imagen no es una parte clave del contenido (p. ej, si es una decoración o un píxel de seguimiento). - -#### sizes - -

- -**Tipo:** `string`
-**Por defecto:** `true` - -

- -La propiedad `sizes` del objeto HTMLImageElement te permite especificar el ancho de diseño de la imagen para cada una de las condiciones de los medios en una lista. - -Consulta [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) para más detalles. - -#### widths - -

- -**Tipo:** `number[]`
-**Por defecto:** `true` - -

- -La lista de tamaños que se deben generar para las imágenes responsivas. Esto se combina con `aspectRatio` para calcular las dimensiones finales de cada imagen generada. - -```astro -// Genera tres imágenes: una de 400x400, otra de 800x800, y otra de 1200x1200 - -``` - -#### aspectRatio - -

- -**Tipo:** `number` | `string`
-**Por defecto:** `undefined` - -

- -La relación de aspecto deseada de la imagen de salida. Esto se combina con los `widths` para calcular las dimensiones finales de cada imagen generada. - -Se puede proporcionar un `string` en la forma de `{width}:{height}`, por ejemplo: `16:9` o `3:4`. - -También se puede proporcionar un `number`, lo cual es útil cuando el aspect ratio se calcula en tiempo de generación. Esto puede ser un número en línea como `1.777` o en línea como una expresión JSX como `aspectRatio={16/9}`. - -Para imágenes remotas, incluyendo imágenes en `public/`, se requiere `aspectRatio` para asegurar que el `height` es correcto se pueda calcular durante la generación. - -#### formats - -

- -**Tipo:** `Array<'avif' | 'jpeg' | 'png' | 'webp'>`
-**Por defecto:** `undefined` - -

- -Los formatos de salida que se utilizarán en la imagen optimizada. Si no se proporciona ninguno, se utilizarán `webp` y `avif` además del formato de imagen original. - -Para imágenes remotas, incluidas las imágenes en `public/`, el formato de imagen original es desconocido. Si no se proporciona, se utilizarán solo `webp` y `avif`. - -#### background - -

- -**Tipo:** `ColorDefinition`
-**Por defecto:** `undefined` - -

- -> Esto no es compatible con el servicio Squoosh por defecto. Consulta la [sección de instalación](#instalando-sharp-opcional) para obtener más detalles sobre cómo usar el servicio `sharp` en su lugar. - -El color de fondo a utilizar para reemplazar el canal alfa con el método `flatten` de `sharp`. En caso de que el formato de salida no admita transparencia (p. ej. `jpeg`), se recomienda incluir un color de fondo; de lo contrario, se utilizará el negro como reemplazo predeterminado para los píxeles transparentes. - -El parámetro acepta un valor de tipo `string`. - -El parámetro puede ser un [color HTML con nombre](https://www.w3schools.com/tags/ref_colornames.asp), una representación hexadecimal del color con 3 o 6 caracteres hexadecimales en el formato `#123[abc]`, o una definición RGB en el formato `rgb(100,100,100)`. - -#### fit - -

- -**Tipo:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'`
-**Por defecto:** `'cover'` - -

- -> Esto no está soportado por el servicio predeterminado de Squoosh. Consulta la [sección de instalación](#instalando-sharp-opcional) para obtener más detalles sobre cómo utilizar el servicio `sharp` en su lugar. Lee más sobre [cómo redimensionar imágenes con `sharp`](https://sharp.pixelplumbing.com/api-resize). - -Cómo la imagen debe ser redimensionada para el `height` y el `width`. - -#### position - -

- -**Tipo:** `'top' | 'right top' | 'right' | 'right bottom' | 'bottom' | 'left bottom' | 'left' | 'left top' | - 'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' | - 'center' | 'centre' | 'cover' | 'entropy' | 'attention'`
-**Por defecto:** `'centre'` - -

- -> Esto no está soportado por el servicio predeterminado de Squoosh. Consulta la [sección de instalación](#instalando-sharp-opcional) para obtener más detalles sobre cómo utilizar el servicio `sharp` en su lugar. Lee más sobre [cómo redimensionar imágenes con `sharp`](https://sharp.pixelplumbing.com/api-resize). - -La posición del recorte cuando el ajuste fit es `cover` o `contain`. - -### `getImage` - -Esta es la función auxiliar utilizada por el componente `` para construir los atributos `` para la imagen transformada. Esta función auxiliar se puede utilizar directamente para casos de uso más complejos que no son compatibles actualmente con el componente ``. - -Esta función auxiliar recibe un objeto con las mismas propiedades que el componente `` y devuelve un objeto con los atributos que deben incluirse en el elemento final ``. - -Esto puede ser útil si necesitas agregar enlaces de precarga a la etiqueta `` de una página. - -```astro ---- -import { getImage } from '@astrojs/image'; - -const { src } = await getImage({ - src: import('../assets/hero.png'), - alt: 'My hero image', -}); ---- - - - - - - -``` - -### `getPicture` - -Esta es la función auxiliar utilizada por el componente `` para construir múltiples tamaños y formatos para imágenes responsivas. Esta función auxiliar se puede utilizar directamente para casos de uso más complejos que no son compatibles actualmente con el componente ``. - -Esta función auxiliar recibe un objeto con las mismas propiedades que el componente `` y devuelve un objeto con los atributos que deben incluirse en el elemento final `` **y** auna lista de fuentes que deben utilizarse para renderizar todos los elementos `` para el elemento ``. - -## Configuración - -La integración se puede configurar para ejecutarse con un servicio de imágenes diferente, ya sea un servicio de imágenes alojado o un transformador de imágenes completo que se ejecuta localmente en tu compilación o implementación de SSR. - -> Durante el desarrollo, es posible que las imágenes locales aún no se hayan publicado y no estén disponibles para los servicios de imágenes alojados. Las imágenes locales siempre utilizarán el servicio de imágenes incorporado al usar `astro dev`. - -### config.serviceEntryPoint - -El `serviceEntryPoint` debe resolver al servicio de imágenes instalado desde NPM. El punto de entrada predeterminado es `@astrojs/image/squoosh`,que resuelve al punto de entrada exportado desde el `package.json` de esta integración. - -```js -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import image from '@astrojs/image'; - -export default defineConfig({ - integrations: [ - image({ - // Ejemplo: El punto de entrada para un servicio de imágenes de terceros instalado desde NPM - serviceEntryPoint: 'my-image-service/astro.js', - }), - ], -}); -``` - -### config.logLevel - -El control `logLevel` se puede utilizar para controlar la cantidad de detalles que registra la integración durante las compilaciones. Esto puede ser útil para rastrear una imagen o transformación específica que está tardando mucho tiempo en construirse. - -```js -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import image from '@astrojs/image'; - -export default defineConfig({ - integrations: [image({ - // niveles admitidos: 'debug' | 'info' | 'warn' | 'error' | 'silent' - // por defecto: 'info' - logLevel: 'debug', - }), - ], -}); -``` - -### config.cacheDir - -Durante las compilaciones estáticas, la integración almacenará en caché las imágenes transformadas para evitar reconstruir la misma imagen en cada compilación. Esto puede ser especialmente útil si estás utilizando un servicio de alojamiento que te permite almacenar en caché los activos de compilación para implementaciones futuras. - -Las imágenes locales se almacenarán en caché durante 1 año y se invalidarán cuando se modifique el archivo de imagen original. Las imágenes remotas se almacenarán en caché en función de las cabeceras de caché de la respuesta de `fetch()`, de manera similar a cómo un CDN administraría la caché. - -De forma predeterminada, las imágenes transformadas se almacenarán en caché en `./node_modules/.astro/image`. Esto se puede configurar en las opciones de configuración de la integración. - -```js -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import image from '@astrojs/image'; - -export default defineConfig({ - integrations: [ - image({ - // puede ser útil si tu proveedor de alojamiento permite el almacenamiento en caché entre las compilaciones de CI. - cacheDir: "./.cache/image", - }), - ], -}); -``` - -El almacenamiento en caché también se puede desactivar utilizando `cacheDir: false`. - -## Ejemplos - -### Imágenes locales - -Los archivos de imagen en el directorio `src/` de tu proyecto se pueden importar en el frontmatter y pasarse directamente al componente `` como el valor del atributo `src=`. También se requiere el atributo `alt`. - -Todas las demás propiedades son opcionales y se establecerán en los valores predeterminados del archivo de imagen original si no se proporcionan. - -```astro ---- -import { Image } from '@astrojs/image/components'; -import heroImage from '../assets/hero.png'; ---- - -// imagen optimizada, manteniendo el ancho, alto y formato original -texto descriptivo - -// la altura se recalculará para que coincida con la relación de aspecto original -texto descriptivo - -// recortando a un ancho y alto específicos -texto descriptivo - -// recortando a una relación de aspecto específica y convirtiendo a formato avif -texto descriptivo - -// las importaciones de imágenes también se pueden incluir directamente en línea -texto descriptivo -``` - -#### Imágenes en `/public` - -El componente `` también se puede utilizar con imágenes almacenadas en el directorio `public/` y el atributo `src=` es relativo a la carpeta public. Se tratará como una imagen remota, lo cual requiere proporcionar tanto `width` y `height`, o una dimensión y un atributo `aspectRatio`. - -Tu imagen original se copiará sin procesar a la carpeta de compilación, al igual que todos los archivos ubicados en public/, y la integración de imágenes de Astro también devolverá versiones optimizadas de la imagen. - -Por ejemplo, utiliza una imagen ubicada en `public/social.png` en construcciones estáticas o de SSR de la siguiente manera: - -```astro title="src/pages/page.astro" ---- -import { Image } from '@astrojs/image/components'; -import socialImage from '/social.png'; ---- - -// En construcciones estáticas: la imagen se compilará y optimizará en `/dist`. // En construcciones de SSR: el servidor optimizará la imagen cuando sea solicitada por un navegador. -texto descriptivo -``` - -### Imágenes remotas - -Las imágenes remotas se pueden transformar con el componente `` component. El componente `` necesita conocer las dimensiones finales para el elemento `` para evitar cambios en el diseño del contenido. Para imágenes remotas, esto significa que debes proporcionar `width` y `height`, o una de las dimensiones más el `aspectRatio` requerido. - -```astro ---- -import { Image } from '@astrojs/image/components'; - -const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png'; ---- - -// Recortando a un ancho y alto específicos -texto descriptivo - -// La altura se recalculará para que coincida con el aspect ratio -texto descriptivo -``` - -### Imágenes responsivas - -El componente `` se puede utilizar para construir automáticamente un elemento `` con múltiples tamaños y formatos. Consulta [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) para obtener más información sobre imágenes responsivas y dirección de arte. - -Por defecto, la imagen incluirá formatos para `avif` y `webp`. Solo para imágenes locales, también se incluirá el formato original de la imagen. - -Para imágenes remotas, se requiere un `aspectRatio` para asegurar que se pueda calcular la `altura` correcta en el momento de la construcción. - -```astro ---- -import { Picture } from '@astrojs/image/components'; -import hero from '../assets/hero.png'; - -const imageUrl = - 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; ---- - -// Imagen local con múltiples tamaños - - -// Imagen remota (se requiere aspect ratio) - - -// Las importaciones en línea son compatibles. - -``` - -### Estableciendo valores predeterminados - -Por el momento, no hay forma de especificar valores predeterminados para todos los componentes `` y ``. Los atributos requeridos deben establecerse en cada componente individual. - -Como una alternativa, puedes envolver estos componentes en otro componente de Astro para reutilizarlos. Por ejemplo, podrías crear un componente para las imágenes de tu blog: - -```astro title="src/components/BlogPostImage.astro" ---- -import { Picture } from '@astrojs/image/components'; -const { src, ...attrs } = Astro.props; ---- - - -``` - -### Usando `` con la integración de imágenes - -La integración oficial de imágenes cambiará las importaciones de imágenes para devolver un objeto en lugar de un string de origen. - -El objeto tiene las siguientes propiedades, derivadas del archivo importado: - -```ts -{ - src: string; - width: number; - height: number; - format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp'; -} -``` - -Si tienes instalada la integración de imágenes, consulta la propiedad `src` del objeto al usar ``. - -```astro ".src" ---- -import rocket from '../images/rocket.svg'; ---- -Un cohete en el espacio. -``` - -Alternativamente, agrega `?url` a tus importaciones para decirles que devuelvan un string de origen. - -```astro "?url" ---- -import rocket from '../images/rocket.svg?url'; ---- -Un cohete en el espacio. -``` - -## Solución de problemas - -* Si tu instalación no parece funcionar, intenta reiniciar el servidor de desarrollo. -* Si editas y guardas un archivo pero no ves que tu sitio se actualice en consecuencia, intenta refrescar la página. -* Si refrescar la página no actualiza tu vista previa, o si una nueva instalación no parece estar funcionando, entonces reinicia el servidor de desarrollo. - -Para obtener ayuda, revisa el canal `#support` en [Discord](https://astro.build/chat). ¡Nuestros amigables miembros del Escuadrón de Soporte están aquí para ayudarte! - -Puedes revisar nuestra [Documentación de Integración de Astro][astro-integration] para más información sobre integraciones. - -[astro-integration]: /es/guides/integrations-guide/ - -## Contribuyendo - -Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR! - -## Changelog - -Consulta el [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/image/CHANGELOG.md) para un historial de cambios en esta integración. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx index f3b39a52638c4..f176ef5c7a79f 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-gatsby.mdx @@ -87,8 +87,6 @@ Puede resultarte útil instalar algunas de las [integraciones opcionales de Astr - **@astrojs/react**: para reutilizar algunos componentes UI de React existentes en tu nuevo sitio Astro o seguir escribiendo con componentes de React. -- **@astrojs/image**: para reemplazar el complemento de imagen de Gatsby con los propios componentes de optimización de imagen de Astro. (Experimental: funciona solo en archivos `.astro` y `.mdx`) - - **@astrojs/mdx**: para llevar los archivos MDX existentes de tu proyecto de Gatsby o utilizar MDX en tu nuevo sitio Astro. @@ -321,36 +319,28 @@ Ver más sobre [Estilizando en Astro](/es/guides/styling/). ### Plugin de imágenes de Gatsby a Astro -:::note -Astro v3.0 incluirá un nuevo módulo `astro:assets` y descontinuará la integración existente `@astrojs/image`. - -Accede a `astro:assets` actualmente está disponible bajo una flag experimental, y es la forma recomendada de comenzar un nuevo proyecto de Astro. Si estás migrando a Astro pre-v3.0, recomendamos [habilitar la flag experimental para usar assets](/es/guides/assets/) como solución de imagen. -::: - -Convierte los componentes `` y `` de Gatsby con la [integración de imágenes de Astro](/es/guides/images/#integración-image-de-astro), o utiliza una etiqueta HTML `` / JSX `` estándar según corresponda. +Convierte los componentes `` y `` de Gatsby a [los propios componentes de integración de imágenes de Astro](/es/guides/images/#image--astroassets), o a una etiqueta [estándar de HTML `` / JSX ``](/es/guides/images/#imágenes-en-componentes-de-frameworks-ui) según corresponda en tus componentes de React. ```astro title="src/pages/index.astro" --- -import { Image } from '@astrojs/image/components'; -import localImage from "../images/brand/logo.png"; -import rocket from '../images/rocket.svg'; +import { Image } from 'astro:assets'; +import rocket from '../assets/rocket.png'; --- -The Astro Logo -A rocketship in space. +Un cohete en el espacio. +Un cohete en el espacio. ``` -Los componentes `` y `` de Astro son experimentales y actualmente solo funcionan en archivos `.astro` y `.mdx` files only. Puedes ver una [lista completa de atributos de componente](/es/guides/integrations-guide/image/#uso) disponibles para estos componentes, y debes tener en cuenta que varios atributos difieren de los atributos de Gatsby. +El componente `` de Astro funciona solo en archivos `.astro` y `.mdx`. Consulta una [lista completa de sus atributos de componente](/es/guides/images/#propiedades) y ten en cuenta que varios serán diferentes de los atributos de Gatsby. -Para continuar utilizando imágenes locales en archivos Markdown (`.md`) utilizando la sintaxis estándar de Markdown (`![]()`),mueve tus imágenes a la carpeta `public/`. Es posible que debas actualizar el enlace a la URL relativa. También puedes utilizar la etiqueta `` estándar en estos archivos. Ten en cuenta que estas [imágenes en `public/` no serán optimizadas por Astro](/es/guides/images/#public). +Para seguir utilizando [imágenes en archivos Markdown (`.md`)](/es/guides/images/#imágenes-en-archivos-markdown) utilizando la sintaxis estándar de Markdown (`![]()`), es posible que necesites actualizar el enlace. El uso de la etiqueta HTML `` no es compatible en archivos `.md` para imágenes locales, y debe ser convertido a la sintaxis de Markdown. ```md # Mi página Markdown - -![Un cielo estrellado en la noche.](/assets/stars.png) -Un cielo estrellado en la noche. + +![Un cielo estrellado en la noche.](../assets/stars.png) ``` En componentes de React (`.jsx`), utiliza la sintaxis estándar de JSX para imágenes (``). Astro no optimizará estas imágenes, pero puedes instalar y utilizar paquetes de NPM para obtener más flexibilidad. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx index fa35946ed67cf..d7d5c75291a1d 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx @@ -83,9 +83,6 @@ Puede resultarte útil instalar algunas de las [integraciones opcionales de Astr - **@astrojs/react**: Para reutilizar algunos de los componentes UI de React existentes en tu nuevo sitio de Astro, o seguir escribiendo con componentes de React. -- **@astrojs/image**: -para reemplazar el plugin Image de Next con los propios componentes de optimización de imágenes de Astro. (Experimental: solo funciona en archivos `.astro` y `.mdx`) - - **@astrojs/mdx**: Para traer archivos MDX existentes de tu proyecto Next, o para usar MDX en tu nuevo sitio Astro. ### Coloca tu código fuente en `src` @@ -420,22 +417,17 @@ Ver más acerca de [Estilos en Astro](/es/guides/styling/). ### Plugin de Imagen de Next a Astro -:::note -Astro v3.0 incluirá un nuevo módulo `astro:assets` y descontinuará la integración existente `@astrojs/image`. - -Accede a `astro:assets` actualmente está disponible bajo una flag experimental, y es la forma recomendada de comenzar un nuevo proyecto de Astro. Si estás migrando a Astro pre-v3.0, recomendamos [habilitar la flag experimental para usar assets](/es/guides/assets/) como solución de imagen. -::: +Convierte cualquier componente `` de Next a [el componente de imagen propio de Astro](/es/guides/images/#image--astroassets) en archivos `.astro` o `.mdx`, o a una etiqueta [estándar de HTML `` / JSX ``](/es/guides/images/#imágenes-en-componentes-de-frameworks-ui) según corresponda en tus componentes de React. -Convierte cualquier componente `` de Next a los [propios componentes de integración de imagen de Astro](/es/guides/images/#integración-image-de-astro), o a un estándar HTML ``. Consulta [la lista completa de los atributos de los componentes](/es/guides/integrations-guide/image/#uso) disponibles para los componentes `` y `` de Astro, y ten en cuenta que varios difieren de los atributos de Next. +El componente `` de Astro funciona solo en archivos `.astro` y `.mdx`. Consulta una [lista completa de sus atributos de componente](/es/guides/images/#propiedades) y ten en cuenta que varios serán diferentes de los atributos de Next. ```astro title="src/pages/index.astro" --- -import { Image } from '@astrojs/image/components'; -import localImage from "../images/brand/logo.png"; -import rocket from '../images/rocket.svg'; +import { Image } from 'astro:assets'; +import rocket from '../assets/rocket.png'; --- -The Astro Logo -A rocketship in space. +Un cohete en el espacio. +Un cohete en el espacio. ``` En los componentes de React (`.jsx`), utiliza la sintaxis estándar de imagen (``). Astro no optimizará estas imágenes, pero puedes instalar y usar paquetes de NPM para obtener más flexibilidad. diff --git a/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx index 83e3e8d421a07..ec0dcb116d1c1 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-nuxtjs.mdx @@ -106,8 +106,6 @@ Puede resultarte útil instalar algunas de las [integraciones opcionales de Astr - **@astrojs/vue**: para reutilizar algunos componentes de interfaz de usuario Vue existentes en tu nuevo sitio Astro, o seguir escribiendo con componentes Vue. -- **@astrojs/image**: para reemplazar el plugin de imagen de Nuxt con los propios componentes de optimización de imagen de Astro. - - **@astrojs/mdx**: para traer archivos MDX existentes de tu proyecto Nuxt, o para usar MDX en tu nuevo sitio Astro. ### Coloca tu código fuente en `src` @@ -513,24 +511,17 @@ Ve más sobre [Estilos en Astro](/es/guides/styling/). ### Plugin de imagen de Nuxt a Astro -:::note -Astro v3.0 incluirá un nuevo módulo `astro:assets` y descontinuará la integración existente `@astrojs/image`. - -Accede a `astro:assets` actualmente está disponible bajo una flag experimental, y es la forma recomendada de comenzar un nuevo proyecto de Astro. Si estás migrando a Astro pre-v3.0, recomendamos [habilitar la flag experimental para usar assets](/es/guides/assets/) como solución de imagen. -::: - -Convierte cualquier [componente `` o `` de Nuxt](https://image.nuxtjs.org/components/nuxt-img) a [la integración de imagen de Astro](/es/guides/images/#integración-image-de-astro) o a una etiqueta HTML `` estándar. +Convierte cualquier [componente `` or `` de Nuxt](https://image.nuxtjs.org/components/nuxt-img) al [componente de imagen propio de Astro](/es/guides/images/#image--astroassets) en archivos `.astro` o `.mdx`, o al tag estándar [``](/es/guides/images/#imágenes-en-componentes-de-frameworks-ui) o `` de HTML según corresponda en tus componentes de Vue. -Mira una [lista completa de atributos de componentes](/es/guides/integrations-guide/image/#uso) disponibles para los componentes `` y `` de Astro, y ten en cuenta que varios serán diferentes a los atributos de Nuxt. +El componente `` de Astro funciona solo en archivos `.astro` y `.mdx`. Consulta una [lista completa de sus atributos de componente](/es/guides/images/#propiedades) y ten en cuenta que varios serán diferentes de los atributos de Nuxt. ```astro title="src/pages/index.astro" --- -import { Image } from '@astrojs/image/components'; -import localImage from "../images/brand/logo.png"; -import rocket from '../images/rocket.svg'; +import { Image } from 'astro:assets'; +import rocket from '../assets/rocket.png'; --- -The Astro Logo -A rocketship in space. +Un cohete en el espacio. +Un cohete en el espacio. ``` En los componentes Vue (`.vue`) dentro de tu aplicación Astro, usa la sintaxis de imagen JSX estándar (``). Astro no optimizará estas imágenes, pero puedes instalar y usar paquetes NPM para tener más flexibilidad. diff --git a/src/content/docs/es/reference/image-service-reference.mdx b/src/content/docs/es/reference/image-service-reference.mdx index edf99810fceb1..7606ecdda50c6 100644 --- a/src/content/docs/es/reference/image-service-reference.mdx +++ b/src/content/docs/es/reference/image-service-reference.mdx @@ -3,11 +3,7 @@ title: API de Servicio de Imágenes i18nReady: true --- -Los [assets](/es/guides/assets/) de Astro fueron diseñados para facilitar que cualquier servicio de optimización de imágenes construya un servicio sobre Astro. - -:::caution -La API de Servicios de Imágenes es una característica experimental de Astro introducida en la versión 2.1. Esta API está sujeta a cambios antes de que se marque como estable. -::: +`astro:assets` fue diseñado para facilitar que cualquier servicio de optimización de imágenes construya un servicio sobre Astro. ## ¿Qué es un Servicio de Imágenes? @@ -229,9 +225,6 @@ Configura el servicio de imágenes que se utilizará en `astro.config.mjs`. La c import { defineConfig } from "astro/config"; export default defineConfig({ - experimental: { - assets: true, - }, image: { service: { entrypoint: "tu-punto-de-entrada", // 'astro/assets/services/squoosh' | 'astro/assets/services/sharp' | string, From 88f1123b2a2a00b9f3357a40180633146920e5e6 Mon Sep 17 00:00:00 2001 From: Waxer59 <78129249+Waxer59@users.noreply.github.com> Date: Mon, 28 Aug 2023 22:07:10 +0200 Subject: [PATCH 2/4] Update src/content/docs/es/guides/images.mdx --- src/content/docs/es/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/guides/images.mdx b/src/content/docs/es/guides/images.mdx index 47405f609e888..e3b5bda804b70 100644 --- a/src/content/docs/es/guides/images.mdx +++ b/src/content/docs/es/guides/images.mdx @@ -85,7 +85,7 @@ import myImage from "../assets/my_image.png"; // La imagen es 1600x900 Actualmente, la característica integrada de assets no incluye un componente ``. -En su lugar, puedes [generar imágenes o componentes personalizados usando `getImage()`](#generando-imágenes-con-getImage) que utilicen los atributos HTML de imagen `srcset` y `sizes` o la etiqueta `` [para la dirección de arte o para crear imágenes responsivas](https://developer.mozilla.org/es/docs/Aprender/HTML/Multimedia_y_incrustaciones/Im%C3%A1genes_responsivas#direcci%C3%B3n_de_arte). +En su lugar, puedes [generar imágenes o componentes personalizados usando `getImage()`](#generando-imágenes-con-getImage) que utilicen los atributos HTML de imagen `srcset` y `sizes` o la etiqueta `` [para la dirección de arte o para crear imágenes responsivas](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction). #### Propiedades From 32b6cffa70625142c2dd04159795c457e3243d95 Mon Sep 17 00:00:00 2001 From: Waxer59 <78129249+Waxer59@users.noreply.github.com> Date: Tue, 29 Aug 2023 12:22:54 +0200 Subject: [PATCH 3/4] Update src/content/docs/es/guides/images.mdx --- src/content/docs/es/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/guides/images.mdx b/src/content/docs/es/guides/images.mdx index e3b5bda804b70..bd53e61deddac 100644 --- a/src/content/docs/es/guides/images.mdx +++ b/src/content/docs/es/guides/images.mdx @@ -363,7 +363,7 @@ import rocket from '../assets/rocket.png'; ## Imágenes en Colecciones de Contenido -You can declare an associated image for a content collections entry, such as a blog post's cover image, in your frontmatter using its path relative to the current folder: +Puedes declarar una imagen asociada para una entrada de colecciones de contenido, como la imagen de portada de una entrada de blog, en tu metadatos utilizando su ruta relativa a la carpeta actual: ```md title="src/content/blog/my-post.md" {3} --- From a6928a25a39906962ad3a27df7f12be001499178 Mon Sep 17 00:00:00 2001 From: waxer59 <78129249+Waxer59@users.noreply.github.com> Date: Tue, 29 Aug 2023 18:32:47 +0200 Subject: [PATCH 4/4] update page --- src/content/docs/es/guides/images.mdx | 55 ++++++++++++--------------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/src/content/docs/es/guides/images.mdx b/src/content/docs/es/guides/images.mdx index bd53e61deddac..9387c318cdf10 100644 --- a/src/content/docs/es/guides/images.mdx +++ b/src/content/docs/es/guides/images.mdx @@ -16,7 +16,7 @@ Recomendamos que las imágenes locales se mantengan en `src/` cuando sea posible Tus imágenes locales almacenadas en `src/` pueden ser utilizadas por todos los archivos en tu proyecto: `.astro`, `.md`, `.mdx`, `.mdoc` y otros frameworks UI. Las imágenes pueden almacenarse en cualquier carpeta, incluida junto a tu contenido. -Almacena tus imágenes en la carpeta `public/` solo si deseas evitar cualquier tipo de procesamiento. +Almacena tus imágenes en la carpeta `public/` si deseas evitar cualquier tipo de procesamiento o para tener un enlace público directo a ellas. ### Imágenes remotas @@ -146,10 +146,6 @@ Sin embargo, ambas de estas propiedades son necesarias para imágenes remotas e ##### format -You can optionally state the [image file type](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#common_image_file_types) output to be used. - -By default, the `` component will produce a `.webp` file. - Puedes opcionalmente indicar el [tipo de archivo de imagen](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#common_image_file_types) de salida que se va a utilizar. Por defecto, el componente `` producirá un archivo `.webp`. @@ -176,8 +172,8 @@ import myImage from "../assets/my_image.png"; ``` -```astro - +```html + @@ -353,7 +349,6 @@ import rocket from '../assets/rocket.png'; Un cielo estrellado. ![Un cielo estrellado.](/images/stars.png) - // Imagen remota en otro servidor @@ -427,8 +422,7 @@ Las imágenes locales deben **ser importadas primero** para acceder a sus [propi ```jsx title="src/components/ReactImage.jsx" import stars from "../assets/stars.png" -export default function ReactImgage () { - +export default function ReactImage () { return ( Un cielo estrellado. ) @@ -488,8 +482,8 @@ Devuelve un objeto con las siguientes propiedades: ```js { - options: {...} // Parámetros originales pasados, - src: "https//..." // Ruta a la imagen generada, + options: {...} // Parámetros originales pasados + src: "https//..." // Ruta a la imagen generada attributes: {...} // Atributos HTML adicionales necesarios para representar la imagen (width, height, style, etc..) } ``` @@ -545,7 +539,7 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ experimental: { - assets: true + assets: true } }); ``` @@ -574,24 +568,25 @@ import rocket from '../../assets/rocket.png'; Si antes evitaste usar `astro:assets` debido a estas limitaciones, ahora puedes usarlo sin problemas. Puedes configurar el servicio de imágenes sin acción para optar explícitamente por este comportamiento: - ```astro - // astro.config.mjs - export default { - image: { - service: { - entrypoint: 'astro/assets/services/noop' - } - } - } - ``` +```js title="astro.config.mjs" ins={4-8} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + image: { + service: { + entrypoint: 'astro/assets/services/noop' + } + } +}); +``` ### Decide dónde almacenar tus imágenes -Consulta la guía de Imágenes para ayudarte a decidir [dónde almacenar tus imágenes](/es/guides/images/#dónde-guardar-las-imágenes). Es posible que desees aprovechar las nuevas opciones para almacenar tus imágenes con la flexibilidad adicional que `astro:assets` ofrece. Por ejemplo, las imágenes relativas desde la carpeta `src/` de tu proyecto ahora pueden ser referenciadas en Markdown, MDX y Markdoc utilizando la sintaxis estándar de Markdown `![alt](src)`. +Consulta la guía de Imágenes para ayudarte a decidir [dónde almacenar tus imágenes](#dónde-guardar-las-imágenes). Es posible que desees aprovechar las nuevas opciones para almacenar tus imágenes con la flexibilidad adicional que `astro:assets` ofrece. Por ejemplo, las imágenes relativas desde la carpeta `src/` de tu proyecto ahora pueden ser referenciadas en Markdown, MDX y Markdoc utilizando la sintaxis estándar de Markdown `![alt](src)`. ### Actualiza las etiquetas existentes `` -Anteriormente, importar una imagen devolvía un `string` con la ruta de la imagen. Ahora, los assets de imagen importados coinciden con la siguiente firma: +Anteriormente, importar una imagen devolvía un `string` con la ruta de la imagen. Los assets de imagen importados coinciden con la siguiente firma: ```ts interface ImageMetadata { @@ -617,7 +612,7 @@ import rocket from '../images/rocket.svg'; Las imágenes relativas desde la carpeta `src/` de tu proyecto ahora pueden ser referenciadas en Markdown, MDX y Markdoc utilizando la sintaxis estándar de Markdown `![alt](src)`. -Esto te brinda la opción de mover tus imágenes desde el directorio `public/` a la carpeta `src/` de tu proyecto, donde ahora serán procesadas y optimizadas. Tus imágenes existentes en `public/` y las imágenes remotas siguen siendo válidas, pero no son optimizadas por el proceso de compilación de Astro. +Esto te permite mover tus imágenes desde el directorio `public/` a la carpeta `src/` de tu proyecto, donde ahora serán procesadas y optimizadas. Tus imágenes existentes en `public/` y las imágenes remotas siguen siendo válidas, pero no son optimizadas por el proceso de compilación de Astro. ```md title="src/pages/posts/post-1.md" "/_astro" ".hash" "../../assets/" # Mi página Markdown @@ -681,11 +676,9 @@ Si estabas utilizando la integración de imágenes en Astro v2.x, completa los s En su lugar, puedes utilizar los atributos de imagen HTML `srcset` y `sizes`, o la etiqueta `` [para dirección de arte o para crear imágenes responsivas](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction). -4. Elimina Sharp - - [Sharp](https://github.com/lovell/sharp) es ahora el servicio de imágenes por defecto utilizado para `astro:assets`. Ya no necesitas instalar la dependencia localmente en tu proyecto. +4. Elige un servicio de imágenes predeterminado. - Desinstala Sharp utilizando tu gestor de paquetes, o elimínalo manualmente de tu `package.json`. + [Sharp](https://github.com/lovell/sharp) es ahora el servicio de imágenes predeterminado utilizado para `astro:assets`. Si deseas utilizar Sharp, no se requiere ninguna configuración. Si prefieres utilizar [Squoosh](https://github.com/GoogleChromeLabs/squoosh) para transformar tus imágenes, actualiza tu configuración con la siguiente opción `image.service`: