> ## Documentation Index
> Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tamaño de imágenes en móvil y escritorio

> Define alto y ancho de cada imagen por separado para móvil y escritorio y mejora velocidad y SEO.

En el creador de embudos y sitios web puedes definir el alto y el ancho de cada imagen por separado para móvil y para escritorio. Así tus imágenes se ven nítidas y proporcionadas en cualquier pantalla, la página no "salta" mientras carga y mejoras tus resultados de velocidad y SEO.

## Por qué conviene ajustar las dimensiones

* **Mejor experiencia en cada dispositivo:** una imagen que luce bien en escritorio puede verse enorme o recortada en móvil.
* **Mejor SEO:** dimensiones bien definidas ayudan a reducir el CLS (Cumulative Layout Shift, los saltos de diseño al cargar) y a mejorar la puntuación de PageSpeed, dos factores que Google tiene en cuenta.
* **Flexibilidad de diseño:** puedes usar distintas unidades de medida según lo que necesites.

## Unidades disponibles

| Unidad | Qué hace | Cuándo usarla |
| - | - | - |
| **px** | Tamaño fijo en píxeles | Logos, íconos o imágenes que deben medir siempre lo mismo |
| **rem** / **em** | Tamaño relativo al tamaño de letra | Diseños que escalan junto con el texto |
| **%** | Tamaño relativo al contenedor | Imágenes que deben ocupar una proporción de la columna o sección |

Puedes combinar unidades: por ejemplo, alto en píxeles y ancho en porcentaje.

## Cómo ajustar las dimensiones

**1. Abre la página**

Entra en **Sitios**, abre el embudo o sitio web y edita la página que contiene la imagen.

**2. Selecciona la vista**

Con el selector de vista de la parte superior del editor, cambia a **Escritorio** o a **Móvil**.

**3. Abre la configuración de la imagen**

Haz clic en la imagen para abrir su panel de configuración.

**4. Escribe alto y ancho**

En los campos **Alto** y **Ancho**, escribe los valores y elige la unidad (px, rem, em o %).

**5. Repite en la otra vista**

Cambia a la otra vista y define los valores para ese dispositivo.

**6. Guarda y revisa**

Guarda y usa la vista previa en móvil y escritorio para confirmar el resultado.

> [!NOTE]
>
> Los cambios que haces en la vista móvil solo se aplican en móvil, y los de escritorio solo en escritorio. Asegúrate de estar en la vista correcta antes de escribir los valores.

## Preguntas frecuentes

> **¿Qué pasa si no defino dimensiones para móvil?**
>
> La imagen usa las dimensiones de escritorio, que pueden no ser las ideales para pantallas pequeñas.

> **¿Puedo usar unidades distintas para alto y ancho?**
>
> Sí. Por ejemplo, alto en píxeles y ancho en porcentaje.

> **¿Se modifican mis imágenes actuales?**
>
> No. Las imágenes existentes conservan sus dimensiones hasta que las cambies.

> **¿Cómo compruebo si mejoró el CLS o la velocidad?**
>
> Usa herramientas como [Google PageSpeed Insights](https://pagespeed.web.dev/) o Lighthouse para medir el CLS y la puntuación de velocidad antes y después de los cambios.

> **¿Está disponible en todas las cuentas?**
>
> Sí, en todas las cuentas de Chateea con acceso al creador de embudos o sitios web.

## Artículos relacionados

> **[Galería de fotos](https://help.chateea.com/docs/sitios/galeria-de-fotos.md)**
>
> Muestra varias imágenes con un diseño adaptable.

> **[Barra lateral del creador](https://help.chateea.com/docs/sitios/barra-lateral-del-creador.md)**
>
> Dónde está cada ajuste del elemento.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.