Cómo optimizar imágenes en Elementor

Una foto puede verse pequeña en Elementor y aun así requerir una descarga pesada. El editor controla su aspecto, mientras que WordPress, el alojamiento y los plugins de optimización influyen en el archivo que recibe el visitante. Esta guía explica cómo se relacionan, especialmente en widgets de imagen, fondos de contenedores y la primera imagen grande de la página.

Elige la resolución adecuada en los widgets de imagen

Selecciona un widget Image y abre la pestaña Content. Busca Image Resolution, que en algunos widgets o versiones anteriores se llama Image Size. Este ajuste elige un tamaño de WordPress, como Medium, Large o Full. Width y Max Width determinan por separado el espacio que ocupa la imagen. La documentación del widget Image explica estos controles.

Full no significa simplemente «rellenar la columna». Selecciona el archivo adjunto a tamaño completo como origen. En imágenes grandes, WordPress puede haber creado ya una versión reducida de tamaño completo, por lo que no siempre se trata del original intacto de la cámara. La referencia de WordPress sobre la generación de tamaños describe este comportamiento.

El navegador también interviene: si la imagen publicada incluye srcset y sizes, puede elegir entre los archivos disponibles según el diseño, la densidad de píxeles y sus propias decisiones de carga. Por tanto, Full no garantiza que cada visitante descargue el archivo mayor. Aun así, una resolución adecuada y un archivo de origen razonable son una base mejor que confiar solo en la selección automática.

Son ejemplos, no dimensiones obligatorias de Elementor. Los tamaños registrados en WordPress dependen de ajustes, tema y plugins. La altura también debe bastar para el recorte previsto. Duplicar la anchura visible puede ayudar en pantallas de alta densidad, pero es una decisión entre calidad y peso, no una norma para exportar todo al doble.

Una resolución Custom puede servir si los tamaños estándar no encajan. Comprueba el recorte y que la imagen publicada siga ofreciendo versiones adaptables adecuadas. Custom no mejora siempre la entrega ni desactiva necesariamente las imágenes adaptables.

Cambiar Style → Width o Max Width no redimensiona ni recomprime el archivo guardado. El marcado adaptable puede ayudar al navegador a pedir una versión menor, pero reducir la anchura visible no demuestra por sí solo que se descarguen menos datos.

Optimiza los fondos de contenedores para móviles

Una imagen añadida desde Style → Background de un contenedor o sección suele convertirse en fondo CSS. A diferencia de una imagen HTML, no tiene atributos srcset ni sizes. Si otro sistema no aporta variantes, un teléfono puede descargar el mismo fondo que un ordenador.

Decide primero si la imagen debe ser un fondo. Una textura decorativa o una imagen ambiental puede encajar. Una foto de producto, un diagrama o una imagen con información esencial suele funcionar mejor como widget Image, con texto alternativo y versiones adaptables.

Si el fondo necesita otra composición en móviles:

1. Selecciona el contenedor o la sección y abre Style → Background.
2. Cambia al punto de ruptura móvil con el control adaptable del fondo, si tu editor lo ofrece.
3. Elige una copia móvil recortada según las proporciones del contenedor. Una cabecera alta puede necesitar un recorte vertical; un banner bajo puede seguir necesitando uno horizontal.
4. Elige Cover para rellenar la zona sin deformar la imagen. Conserva las proporciones recortando lo que queda fuera del contenedor.
5. Ajusta la posición para mantener visible el motivo y prueba también anchuras cercanas al punto de ruptura.

En la página móvil publicada, comprueba la altura del contenedor, el contraste del texto y el archivo solicitado. Otro recorte puede mejorar la composición, pero solo reduce la descarga si la versión móvil sustituye realmente al archivo mayor. Ocultar una sección de escritorio independiente no garantiza que sus imágenes nunca se soliciten.

Carga la imagen principal sin retrasos

Largest Contentful Paint (LCP) mide cuándo aparece el mayor elemento de contenido visible en la vista inicial. Puede ser una imagen principal, un fondo o un bloque de texto. Identifica el elemento LCP real en un informe de rendimiento antes de cambiar prioridades.

La carga diferida, o lazy loading, es útil para imágenes situadas más abajo. En la imagen principal puede retrasar el inicio porque el navegador espera a decidir cuándo la necesita. La guía de Google sobre optimización del LCP recomienda que la imagen LCP se detecte pronto y no use carga diferida.

• Empieza por la automatización de Elementor: Activa Optimized Image Loading en los ajustes de rendimiento descritos más adelante y revisa el resultado publicado.
• Comprueba otros sistemas de carga diferida: Un plugin de caché u optimización puede cambiar el resultado. Si retrasa la imagen principal, añade esa imagen o elemento a sus exclusiones.
• Distingue carga inmediata y prioridad: Una imagen HTML sin carga diferida puede empezar a descargarse normalmente. loading="eager" lo pide de forma explícita; fetchpriority="high" es una indicación de prioridad independiente. Dar prioridad alta a todas las imágenes elimina su utilidad.
• Revisa los fondos principales por separado: No usan los atributos de carga de un elemento de imagen. Si el fondo es el elemento LCP y su petición empieza tarde, investiga cuándo el CSS o el script de carga diferida expone su URL. Reducir sus dimensiones no elimina ese retraso por sí solo.
• Valora los carruseles de cabecera: Una imagen estática es más fácil de priorizar. Si mantienes el carrusel, comprueba si las diapositivas ocultas compiten con la primera visible durante la carga.

Reserva espacio antes de cargar las imágenes

Cumulative Layout Shift (CLS) mide movimientos inesperados del contenido visible. Si el navegador desconoce el espacio que necesita una imagen, el texto y los botones pueden desplazarse cuando aparece. Las dimensiones permiten reservar ese espacio.

1. Conserva los atributos de anchura y altura: El HTML habitual de WordPress suele incluirlos. Describen las proporciones y pueden funcionar junto con CSS adaptable.
2. Define el marco: En tarjetas con recortes uniformes, reserva espacio mediante una relación de aspecto o dimensiones de diseño explícitas. Usa los controles del widget o CSS aspect-ratio cuando haga falta. Para llenar un marco fijo, object-fit: cover conserva las proporciones al recortar.
3. Prueba las plantillas con distintos contenidos: En Theme Builder o Loop Grid, previsualiza entradas con imágenes destacadas horizontales, verticales y ausentes. Define un área de imagen previsible y una imagen de sustitución si hace falta.

Un fondo CSS no da altura natural a su contenedor. El espacio depende del diseño, contenido, relleno o altura mínima. Revisa estos ajustes en cada punto de ruptura en lugar de esperar que el archivo de fondo mantenga abierta la sección.

Revisa galerías, carruseles y visores por separado

Una galería ofrece una vista general compacta y debe mostrar suficiente detalle al abrir una imagen. Esas funciones pueden requerir archivos distintos.

• Elige la resolución según la diapositiva o tarjeta visible: Un carrusel de cuatro imágenes pequeñas no necesita la resolución de una sola imagen a todo el ancho. Revisa el móvil: menos diapositivas simultáneas pueden hacer más ancha cada imagen.
• Separa vista previa y ampliación: Elige una resolución adecuada para la cuadrícula y configura enlaces Media File y Lightbox si el visitante necesita ampliar. Optimiza también el archivo grande. Comprueba las solicitudes antes y después de abrir el visor; la precarga puede variar.
• Revisa la plantilla del bucle: En tarjetas de archivo y Loop Grids, ajusta el widget Featured Image dentro del elemento del bucle. Repetir una imagen sobredimensionada puede hacer pesado todo el archivo aunque las tarjetas parezcan pequeñas.

Elige un formato adecuado para la imagen

Compara formatos con las mismas dimensiones y una calidad que publicarías. No existe un porcentaje fijo de ahorro válido para todas las imágenes.

• WebP: Buen punto de partida para fotos y muchas ilustraciones. Admite compresión con pérdidas, sin pérdidas y transparencia. Prueba JPG a WebP o PNG a WebP y revisa bordes y detalles finos.
• JPG: Práctico para fotos si otra parte del proceso lo requiere. Ajusta la calidad comparando resultados, sin tratar un porcentaje como universal.
• PNG: Útil para gráficos sin pérdidas, capturas y procesos que lo exijan. La transparencia no obliga a elegir PNG frente a WebP. Las fotos PNG suelen pesar mucho más que una exportación con pérdidas adecuada.
• AVIF: Merece compararse para fotos si WordPress, el alojamiento y la optimización lo admiten. Prueba tanto el procesamiento tras subir el archivo como su entrega publicada antes de convertir toda la biblioteca.
• SVG: Adecuado para logotipos e iconos vectoriales. Usa fuentes fiables y sigue las indicaciones de Elementor para subir SVG, incluidas la limpieza de archivos y las precauciones de subida.

Nuestra guía de formatos de imagen para la web explica con más detalle las ventajas y limitaciones.

Prepara cada imagen para su ubicación

Guarda el original aparte y exporta una copia para la web. Así el archivo completo también tendrá un tamaño razonable, algo importante para fondos e imágenes abiertas desde galerías.

1. Mide el mayor tamaño de visualización previsto: Revisa escritorio y móvil. Una imagen junto a texto puede ocupar toda una fila en una tableta y ser más ancha.
2. Recorta para el diseño: Elimina espacio innecesario con la herramienta de recorte sin perder el motivo. Deja espacio para cualquier texto superpuesto.
3. Redimensiona una copia: Compara dimensiones adecuadas con la herramienta de redimensionado. No amplíes un original pequeño solo para alcanzar una anchura prefijada.
4. Comprime y revisa: Utiliza el compresor de imágenes y compara la exportación a su tamaño final. Una imagen principal de 100–200 KB o una imagen de contenido de menos de 100 KB puede servir de objetivo inicial. Los detalles, las dimensiones y el peso total de la página determinan qué resulta razonable.
5. Pon nombre y descripción: Usa un nombre descriptivo como office-reception.webp. Añade texto alternativo que transmita la función de las imágenes informativas; las decorativas suelen necesitarlo vacío. Sigue las recomendaciones de Google para el SEO de imágenes sin llenar ninguno de los campos de palabras clave.

Si un plugin vuelve a optimizar la subida, compara la imagen que finalmente recibe el visitante. La compresión con pérdidas repetida puede dañar texturas finas o texto aunque cada ajuste individual parezca razonable.

Comprueba los ajustes de rendimiento de Elementor

La documentación actual sitúa estos controles en el escritorio de WordPress, en Elementor → Editor → Settings → Performance. Las instalaciones antiguas pueden mostrar otros menús. La guía oficial de rendimiento distingue las pestañas Performance y Features.

• Optimized Image Loading: Ayuda a priorizar la probable imagen LCP y gestiona la carga diferida más abajo. Consulta la guía de Elementor sobre optimización de carga. Comprueba el resultado real, especialmente si otros plugins también modifican el marcado de imagen.
• Lazy Load Background Images: Según la documentación, retrasa los fondos salvo el primero. Verifica que el fondo visible al comienzo de tu página real se cargue a tiempo.

Activa un cambio cada vez, vacía las cachés correspondientes y prueba la página publicada. Estos ajustes cambian la carga, pero no sustituyen las dimensiones adecuadas ni la compresión de archivos.

Comprueba la página publicada

Empieza por el aspecto sin iniciar sesión: ¿el recorte es correcto, el texto se lee y el diseño permanece estable al aparecer las imágenes? Examina después la descarga si una imagen sigue siendo pesada, borrosa o lenta.

1. Abre la página publicada en una ventana privada. En las herramientas de desarrollo, elige Network, filtra por Img y activa Disable cache mientras permanezcan abiertas.
2. Recarga y ordena las solicitudes de imágenes por tamaño transferido. Empieza por los archivos mayores y las imágenes visibles desde el principio.
3. Revisa la URL y vista previa de la petición para identificar las dimensiones reales. Compáralas con el tamaño visible y la densidad de píxeles. Un archivo de 2400 píxeles en una tarjeta de 350 merece revisión; 700 píxeles puede ser adecuado en una pantalla 2×.
4. En imágenes HTML, comprueba srcset y sizes si el navegador elige siempre una versión demasiado grande. Revisa atributos de carga y prioridad en el elemento <img> real, no solo en el widget que lo rodea.
5. Cambia a la emulación móvil antes de recargar y comprueba las variantes solicitadas de fondos e imágenes. Confirma el aspecto también en un teléfono real.

Ejecuta PageSpeed Insights antes y después en condiciones comparables. Observa el elemento LCP y los hallazgos sobre imágenes, no solo una puntuación global. Una imagen pequeña que empieza a cargar tarde tiene un problema distinto de un archivo grande cuya descarga comienza enseguida.

Si sigue apareciendo una imagen antigua, revisa primero el archivo elegido y los puntos de ruptura. Después vacía las cachés de página, optimización y CDN pertinentes. Si el CSS antiguo de Elementor apunta al fondo anterior, usa la regeneración de archivos o CSS en Tools; el nombre depende de la versión. Regenerar CSS no crea tamaños de miniatura de WordPress que falten.

Ejemplo: imagen junto a una columna de texto

Imagina una foto de equipo de 4800 × 3200 píxeles y 5,4 MB. Su columna mide unos 550 píxeles en escritorio, pero en tableta la imagen ocupa toda una fila.

1. Comprueba la ubicación más ancha: Si alcanza unos 700 píxeles en tableta, usa esa anchura para comparar exportaciones y no solo la columna de escritorio.
2. Prepara recorte y dimensiones: Si la composición funciona en 4:3, compara 1000 × 750 y 1400 × 1050 píxeles. Revisa rostros y detalles importantes al tamaño final.
3. Compara la compresión: Prueba WebP con calidad moderada y revisa el resultado. Anota el tamaño real; una foto de grupo detallada puede necesitar más datos que un retrato sencillo con las mismas dimensiones.
4. Configura el widget: Sube la exportación elegida, añade texto alternativo y selecciona Image Resolution. Una subida de 1400 píxeles puede necesitar Full para ofrecer la versión mayor. Comprueba los archivos adaptables que entrega la página.
5. Verifica el resultado: Revisa solicitudes de escritorio y móvil, nitidez y estabilidad. Más abajo puede convenir la carga diferida; si es la imagen LCP, debe cargarse pronto.

Resuelve problemas frecuentes con imágenes

¿Por qué se ve borrosa la imagen?

Comprueba Image Resolution, las dimensiones originales y el archivo elegido por el navegador. Una miniatura de 300 píxeles ampliada a 600 pierde nitidez, pero aumentar la resolución no recupera detalles ausentes del original. Revisa también la compresión y recortes que amplíen una zona pequeña. Consulta nuestra guía sobre imágenes web borrosas.

¿Por qué falta el fondo móvil o se recorta mal?

Comprueba la imagen del punto de ruptura móvil, ajustes heredados, visibilidad y altura del contenedor. Cover rellena recortando: si desaparece el motivo, cambia posición o recorte. No debería deformar las proporciones. Si el archivo no carga, revisa antes los errores de su solicitud.

¿Por qué no aparecen los cambios en la web publicada?

Confirma que actualizaste el widget, la plantilla y el punto de ruptura correctos. Mira la URL publicada para distinguir un archivo antiguo de estilos antiguos. Vacía las cachés pertinentes y regenera el CSS de Elementor si aún referencia el fondo anterior. Repetir subidas sin hallar la causa puede dejar duplicados innecesarios.

Preguntas frecuentes

¿Debo evitar siempre Full?

No. Full puede servir si el archivo se ha preparado para esa ubicación. Lo importante es comprobar dimensiones originales, variantes adaptables y archivo descargado. Full no sirve para rellenar la columna; eso se controla con el diseño.

¿Elementor comprime automáticamente las imágenes subidas?

Los controles de resolución y carga del constructor no comprimen la subida. WordPress crea tamaños y aplica ajustes de calidad por formato, pero no garantiza una biblioteca optimizada. Elementor ofrece además el producto independiente Image Optimizer, y el alojamiento o plugins pueden aportar un tratamiento parecido. Revisa lo que ya está activo antes de añadir otro sistema.

¿Puedo subir WebP directamente?

WordPress admite WebP. El alojamiento necesita también procesamiento compatible para generar versiones reducidas. Prueba un archivo desde la subida hasta el widget y la entrega publicada antes de convertir toda la biblioteca.

¿Qué dimensiones convienen para la imagen principal?

Elige según su mayor tamaño visible y el recorte. Una anchura de 1600–1920 píxeles es una comparación inicial razonable en muchos diseños de escritorio, pero no un límite de Elementor ni garantía de nitidez en todas las pantallas. Comprueba si el móvil necesita otro recorte y compara peso y detalle.

¿Optimizar las imágenes mejora la posición en Google?

Puede mejorar la carga y la experiencia, pero no garantiza posiciones más altas. La guía de Google sobre experiencia de página explica que Core Web Vitals interviene en sus sistemas de clasificación, aunque unas buenas puntuaciones por sí solas no aseguran primeros puestos. Imágenes pertinentes, nombres descriptivos y textos alternativos útiles ayudan a comprender el contenido. Consulta nuestra guía de texto alternativo y nombres de archivo.