¿Te suena esto? Montas tu página en el ordenador, la dejas preciosa, la abres en el móvil y… sorpresa: una imagen enana, otra que se sale de la pantalla y la de tu producto estrella más borrosa que una foto de boda de los 90.
Para adaptar las imágenes de tu web a móvil, aquí tienes los problemas que más me encuentro en webs hechas con Elementor Pro y cómo se arregla cada uno, paso a paso y con capturas. Sin rollos.
- Por qué las imágenes se ven bien en el ordenador y fatal en el móvil
- La imagen se ve borrosa o pixelada en el móvil
- En el móvil necesitas una imagen distinta a la del ordenador
- La imagen no ocupa todo el ancho o se sale de la pantalla
- Las imágenes de producto y de categoría salen cada una de un tamaño
- Las imágenes hacen que tu web tarde una eternidad en cargar
- Qué tamaño debe tener una imagen para móvil (con pantallas retina)
- La imagen de la cabecera/hero sale cortada en el móvil
- Preguntas frecuentes
- No me cuentes historias, quiero que me lo arregles
- Te puede interesar
Por qué las imágenes se ven bien en el ordenador y fatal en el móvil
Porque Elementor tiene tres vistas (ordenador, tableta y móvil) y todo lo que ajustas en el ordenador se copia tal cual en el móvil, salvo que tú le digas otra cosa. La pantalla del móvil es estrecha y alargada, así que lo que en el ordenador quedaba perfecto en el móvil se descoloca.
Lo primero, siempre: en la barra de arriba del editor de Elementor tienes tres iconos (ordenador, tableta y móvil). Pulsa el del móvil. A partir de ahí, todo lo que cambies en los ajustes que llevan el iconito de móvil solo afecta al móvil.
Truco: si un ajuste no tiene al lado el iconito de móvil, lo que cambies se aplica a todas las vistas a la vez. Cuidado con ese.
La imagen se ve borrosa o pixelada en el móvil
Casi siempre es porque Elementor está usando una versión pequeña de tu imagen o porque la imagen original se quedó corta.
La solución:
– Pincha en la imagen y, en la pestaña Contenido, mira Resolución de la imagen.
– Elige Lleno. Es la imagen tal cual la subiste y, como ya la has preparado con el tamaño justo, es la que mejor se ve.
– Si al lado de una opción ves 0 x 0 (por ejemplo, Large – 0 x 0), es que ese tamaño está puesto a 0 en Ajustes > Medios de tu WordPress. No te fíes de él: elige Lleno.
– Si aun así se ve mal, vuelve a exportar la imagen al doble del ancho al que se ve (te lo explico en el apartado de medidas).
Si después de esto sigue borrosa, aquí tienes cómo encontrar la causa: Por qué las imágenes de tu web se ven cortadas o borrosas.
En el móvil necesitas una imagen distinta a la del ordenador
Una imagen alargada que en el ordenador queda de lujo, en el móvil se convierte en una tira fina donde no se ve nada. No te pelees con ella: pon dos imágenes, una para cada pantalla.
La solución:
– Pon la imagen horizontal para ordenador y, justo debajo, otra más cuadrada o vertical para el móvil.
– Pincha en la de ordenador, ve a la pestaña Avanzado, abre Adaptabilidad y activa Ocultar en Móvil vertical.
– Pincha en la de móvil y activa Ocultar en Escritorio (y Ocultar en Tableta vertical, si en tableta se ve mejor la horizontal).
Truco: mientras editas en Elementor verás las dos imágenes a la vez. Es normal: el ocultar solo funciona en la vista previa y en la web real.
La imagen no ocupa todo el ancho o se sale de la pantalla
La que se sale provoca ese baile lateral al hacer scroll; la que se queda pequeñita desperdicia media pantalla. Se arregla en dos sitios.
1. El tamaño de la imagen. Con la vista Móvil activada, pincha en la imagen, ve a la pestaña Estilo y pon:
– Ancho: 100 %.
– Ancho máximo: 100 %, así nunca será más ancha que la pantalla.
– Alto: vacío, para que se ajuste sola.
2. Los márgenes y el relleno. Si sigue sin ajustarse, el culpable suele ser el espacio. Pincha en la imagen (y después en el contenedor donde está), ve a Avanzado, abre Disposición y revisa Margen y Relleno con la vista Móvil activada. Un margen negativo o un relleno pensado para el ordenador descoloca la imagen en el móvil. Déjalos a 0 o con valores pequeños.
Truco: fíjate en que el iconito de móvil esté al lado de Margen y Relleno. Así cambias solo el móvil y el ordenador se queda como estaba.
Las imágenes de producto y de categoría salen cada una de un tamaño
Si cada imagen tiene sus medidas, en el móvil parecen una escalera: una alta, otra bajita, otra estirada.
La solución buena: prepara todas las imágenes del mismo tipo con la misma proporción, por ejemplo todas cuadradas (en Photoshop, en Photopea o con la IA, te lo cuento más abajo), y vuelve a subirlas.
La solución rápida, si ahora no puedes rehacerlas: con la vista Móvil activada, en la pestaña Estilo de cada imagen pon el mismo Alto a todas y elige que la imagen cubra el hueco. Se verán iguales, aunque recortando un poco los bordes.
Truco: en Photoshop o en Photopea, crea un lienzo cuadrado con las medidas finales y guárdalo como plantilla. Así todas tus imágenes de producto y de categoría salen iguales sin tener que pensar cada vez.
Las imágenes hacen que tu web tarde una eternidad en cargar
En el móvil se navega con datos y con prisas. Una imagen pesada y tu visita se va antes de verla.
– Súbelas siempre en WebP. Pesa entre un 25 % y un 34 % menos que un JPG de calidad parecida, y alrededor de un 26 % menos que un PNG.
– Redimensiona antes de subir, al tamaño que necesitas y no más.
– Mira el peso final al exportar: el peso en KB no depende de los píxeles, depende de la compresión. Puedes tener una imagen de 3000 px que pese 20 KB y otra de 800 px que pese 300 KB.
¿Y con qué preparo las imágenes? Con lo que tengas a mano:
– Photoshop, si ya lo usas.
– Photopea, que es gratis y funciona desde el navegador, sin instalar nada.
– La IA: súbele la imagen y pídele exactamente lo que necesitas, por ejemplo «recórtala en cuadrado, déjala a 1534 px de ancho y expórtala en WebP». Eso sí, revisa siempre el resultado antes de subirla, que a veces la IA se toma licencias y te cambia colores o detalles.
Cómo afecta esto a tu nota de Google lo tienes en Test de velocidad de Google, por fin explicado para dummies.
Qué tamaño debe tener una imagen para móvil (con pantallas retina)
Las pantallas retina, las de muchos móviles actuales, necesitan el doble o el triple de píxeles para que la imagen se vea nítida. Para adaptar las imágenes de tu web a móvil sin que se vean borrosas, la regla fácil: mira a qué ancho se ve la imagen en la vista Móvil y súbela al doble.
| Tipo de pantalla | La imagen se ve a | Súbela a |
|---|---|---|
| Normal (x1) | 400 px | 400 px |
| Retina (x2) | 400 px | 800 px |
| Retina (x3) | 400 px | 1200 px |
Dato práctico: en Elementor, la vista Móvil llega hasta 767 px de ancho. Una imagen a todo el ancho del móvil queda cubierta para retina x2 con 1534 px.
Y no te pases por arriba: subir una imagen de 4000 px para que se vea a 400 px no la hace más nítida, solo hace que tu web vaya más lenta. El doble, y listo.
La imagen de la cabecera/hero sale cortada en el móvil
La imagen de la cabecera/hero suele ir de fondo de un contenedor. En el móvil ese contenedor es estrecho y alto, así que la imagen se recorta y a veces te quedas sin la cara o sin el producto.
La solución: pincha en el contenedor, ve a Estilo, abre Fondo, activa la vista Móvil y ajusta:
– Posición: dónde está lo importante de la imagen (centro, arriba…), para que el recorte lo respete.
– Tamaño: Cubrir rellena todo y recorta; Contener enseña la imagen entera y puede dejar huecos.
– Imagen: si ni así queda bien, pon una imagen de fondo distinta solo para móvil, en vertical.
Truco: antes de pelearte con posiciones, prueba a poner una imagen vertical solo para móvil. Suele ser lo que lo arregla del todo.
Preguntas frecuentes
No me cuentes historias, quiero que me lo arregles
Si lo has entendido, pero prefieres delegarlo, yo me encargo de adaptar las imágenes de tu web a móvil y te las dejo perfectas en ordenador, tableta y móvil, y tú a lo tuyo: a tu negocio y a vender.
Si eres cliente de los planes ModifiKA o YonoTOKO, solo tienes que pedírnoslo.
Te puede interesar
– Por qué las imágenes de tu web se ven cortadas o borrosas
– Test de velocidad de Google, por fin explicado para dummies
