El módulo Imagen de Divi 5 permite incorporar imágenes en cualquier parte de una página y controlar tanto su contenido como su presentación visual. Es uno de los módulos fundamentales del builder y resulta imprescindible para crear páginas atractivas, transmitir información de forma visual y reforzar la identidad de un sitio web.
Sin embargo, utilizar imágenes correctamente no consiste simplemente en subir una fotografía y colocarla dentro de una página. Es necesario tener en cuenta aspectos como el tamaño, el formato, la calidad, el rendimiento, el responsive, el SEO, la accesibilidad y la relación de la imagen con el resto del diseño.
El módulo Imagen permite seleccionar una imagen de la biblioteca de medios de WordPress o utilizar una imagen disponible mediante una URL, dependiendo de las opciones disponibles en el proyecto.
Una vez seleccionada la imagen, Divi 5 permite controlar diferentes aspectos de su presentación, como el tamaño, la alineación, los bordes, las sombras, los espacios y otros efectos visuales.
El módulo puede utilizarse para fotografías, ilustraciones, capturas de pantalla, gráficos, logotipos u otros recursos visuales que formen parte del contenido de una página.
Para añadir una imagen mediante Divi 5, el proceso básico es muy sencillo:
Divi muestra inmediatamente el resultado dentro del editor visual, por lo que puedes comprobar cómo encaja la imagen con los demás elementos de la página.
Antes de subir una imagen a WordPress conviene analizar si realmente es adecuada para el uso que se le va a dar.
No todas las imágenes necesitan tener una resolución enorme. Una fotografía utilizada en un pequeño bloque de contenido no necesita necesariamente las mismas dimensiones que una imagen principal de una página.
Utilizar imágenes excesivamente grandes aumenta el peso de la página y puede afectar negativamente al rendimiento.
Por tanto, el objetivo no es conseguir la máxima resolución posible, sino utilizar una imagen con unas dimensiones y una calidad adecuadas para el tamaño en el que realmente se mostrará.
El formato elegido también influye en el peso y la calidad de la imagen.
Los formatos más habituales en una web moderna son JPEG, PNG, WebP y AVIF, aunque la elección dependerá del tipo de imagen y de las necesidades del proyecto.
JPEG es un formato tradicional especialmente utilizado para fotografías. Permite conseguir archivos relativamente pequeños mediante compresión con pérdida.
PNG resulta especialmente útil cuando necesitamos transparencia o cuando trabajamos con determinados gráficos, capturas o imágenes que requieren una mayor precisión.
WebP ofrece una buena relación entre calidad y tamaño y se ha convertido en una opción habitual para sitios web.
AVIF puede proporcionar archivos todavía más pequeños manteniendo una buena calidad visual. Su utilización dependerá de la compatibilidad del entorno y de la configuración de WordPress y del servidor.
En cualquier caso, no existe un formato universalmente mejor. La decisión debe basarse en el tipo de imagen y en las necesidades concretas del proyecto.
Uno de los errores más habituales consiste en subir imágenes con unas dimensiones muy superiores a las que realmente necesita la página.
Por ejemplo, si una imagen va a mostrarse con un ancho aproximado de 600 píxeles, no siempre tiene sentido utilizar un archivo original de 5000 píxeles de ancho.
La imagen puede seguir viéndose correctamente, pero estaremos enviando al navegador muchos más datos de los necesarios.
Lo recomendable es trabajar con imágenes adecuadas para el uso previsto y aprovechar las diferentes versiones que WordPress puede generar para distintos tamaños.
Una misma imagen puede visualizarse en diferentes dispositivos y tamaños de pantalla. Por este motivo, es importante que la web no dependa de una única versión de gran tamaño para todos los usuarios.
WordPress genera diferentes tamaños de imagen y puede proporcionar al navegador información sobre las versiones disponibles. Esto permite seleccionar una versión más adecuada en función del contexto.
Divi 5 se integra dentro de este sistema y permite diseñar el módulo de forma responsive.
Además, desde las opciones de Divi puedes controlar determinados parámetros visuales para cada dispositivo cuando sea necesario.
La calidad de una imagen no depende únicamente de su resolución. También es importante su composición y su relación de aspecto.
Una fotografía horizontal puede funcionar perfectamente como imagen principal de una página, mientras que una fotografía vertical puede resultar más apropiada para determinados bloques o dispositivos.
Antes de colocar una imagen conviene analizar el espacio disponible y comprobar si la proporción original encaja correctamente con el diseño.
En determinados casos puede ser preferible utilizar imágenes preparadas específicamente para un formato concreto en lugar de intentar adaptar una fotografía que tiene una proporción completamente diferente.
Divi 5 ofrece numerosas posibilidades para personalizar la apariencia del módulo Imagen.
Entre ellas se encuentran diferentes opciones relacionadas con:
Estas opciones permiten integrar una imagen dentro de prácticamente cualquier diseño sin necesidad de recurrir inmediatamente a código CSS personalizado.
Los bordes pueden utilizarse para separar visualmente una imagen del fondo o crear determinados estilos gráficos.
El radio de las esquinas permite convertir una imagen rectangular tradicional en un elemento con esquinas redondeadas.
Este recurso es especialmente habitual en diseños modernos, pero debe utilizarse de forma coherente con el resto de elementos de la página.
Las sombras pueden ayudar a crear sensación de profundidad y separar una imagen del fondo.
Sin embargo, una sombra demasiado intensa puede hacer que el diseño parezca artificial o visualmente sobrecargado.
En diseños profesionales suele ser preferible utilizar sombras sutiles y mantener una lógica común entre imágenes, tarjetas, botones y otros elementos.
Una imagen también puede utilizarse como elemento enlazable. Esto resulta especialmente útil cuando la imagen representa un producto, un proyecto, una categoría o cualquier otro contenido al que el usuario pueda acceder.
Si una imagen funciona como enlace, es importante que el usuario pueda entender qué ocurrirá al hacer clic sobre ella.
En determinados diseños puede ser conveniente acompañar la imagen de un texto o botón para hacer más evidente la acción disponible.
Uno de los aspectos más importantes al trabajar con imágenes es el texto alternativo, conocido habitualmente como atributo alt.
El texto alternativo permite describir el contenido o función de una imagen cuando esta no puede visualizarse y resulta especialmente importante para usuarios que utilizan tecnologías de asistencia.
Además, los buscadores pueden utilizar esta información para comprender mejor el contenido de determinadas imágenes.
El texto alternativo debe ser descriptivo y natural. No debe utilizarse como un lugar para introducir palabras clave de forma artificial.
Por ejemplo, si una fotografía muestra una persona utilizando un ordenador para diseñar una web, un texto alternativo descriptivo podría ser:
Persona diseñando una página web con WordPress
En cambio, introducir una cadena artificial de palabras clave como diseño web barato páginas web WordPress diseño web profesional no aporta una descripción útil.
No todas las imágenes necesitan transmitir información.
Una imagen utilizada exclusivamente como elemento decorativo puede tener un tratamiento diferente al de una imagen que aporta contenido.
La diferencia fundamental está en su función dentro de la página. Si eliminar la imagen no supone perder información relevante, probablemente estamos ante un recurso decorativo.
Esta distinción es importante especialmente desde el punto de vista de la accesibilidad.
Las imágenes suelen representar una parte importante del peso total de una página. Por este motivo, optimizarlas correctamente puede tener un impacto significativo en el rendimiento.
Antes de subir una imagen conviene revisar:
La optimización no consiste en reducir la calidad al máximo. El objetivo es encontrar un equilibrio entre calidad visual y peso del archivo.
En páginas con muchas imágenes, cargar todos los recursos inmediatamente puede aumentar el tiempo necesario para mostrar el contenido inicial.
La carga diferida o lazy loading permite retrasar determinadas imágenes hasta que se aproximan a la zona visible del navegador.
Esto puede reducir la cantidad de recursos que se cargan inicialmente y mejorar el rendimiento de páginas con mucho contenido visual.
Sin embargo, las imágenes principales que aparecen inmediatamente al cargar una página deben tratarse con especial cuidado, ya que retrasar innecesariamente su carga puede perjudicar métricas como el LCP.
Las imágenes tienen una relación directa con diferentes aspectos del rendimiento web y pueden influir especialmente en métricas como LCP y CLS.
Una imagen principal demasiado pesada puede retrasar la aparición del contenido principal. Por otro lado, si no se reserva correctamente el espacio que ocupará una imagen, el contenido puede desplazarse cuando esta termina de cargar.
Por eso, optimizar imágenes no significa únicamente comprimir archivos. También implica integrarlas correctamente dentro de la estructura y el comportamiento de la página.
Una imagen puede necesitar diferentes ajustes dependiendo del dispositivo.
En escritorio puede funcionar perfectamente ocupando una determinada anchura, mientras que en móvil puede necesitar ocupar todo el ancho disponible o utilizar un espaciado diferente.
Divi 5 permite adaptar diferentes valores del diseño a cada dispositivo, facilitando la creación de composiciones responsive sin necesidad de duplicar todo el contenido.
Antes de finalizar una página, revisa siempre:
El módulo Imagen resulta adecuado cuando necesitas mostrar una imagen como un elemento independiente dentro de una composición.
Puede utilizarse para:
En otros casos puede ser más apropiado utilizar una imagen como fondo de una sección, fila u otro elemento de diseño. La elección dependerá de la función que tenga la imagen.
Esta distinción es especialmente importante en Divi.
Cuando una imagen forma parte del contenido, normalmente debe utilizarse como una imagen propiamente dicha. Esto facilita aspectos como el texto alternativo, la accesibilidad y la comprensión del contenido.
En cambio, una imagen utilizada únicamente para crear un fondo visual puede configurarse como fondo del elemento correspondiente.
Por ejemplo, una fotografía decorativa detrás de un titular puede funcionar correctamente como imagen de fondo, mientras que una fotografía de un producto que aporta información debería tratarse como contenido.
Para trabajar correctamente con el módulo Imagen, conviene seguir algunas reglas sencillas:
Una imagen de varios miles de píxeles puede ser innecesaria para un pequeño bloque de contenido y aumentar considerablemente el peso de la página.
Las imágenes que transmiten información deberían contar con una descripción alternativa adecuada.
Reducir demasiado el peso de una imagen puede provocar artefactos, pixelación o pérdida de detalle.
Una composición que funciona en escritorio puede resultar desproporcionada o generar problemas en pantallas pequeñas.
Una página no mejora necesariamente por añadir más imágenes. Cada recurso visual debe aportar valor al contenido o al diseño.
Al igual que ocurre con los módulos de texto y títulos, las imágenes deben integrarse dentro del sistema visual general del proyecto.
Si todas las imágenes de tarjetas utilizan el mismo radio de esquina, sombra y proporción, la web tendrá una apariencia mucho más coherente.
En Divi 5, esta consistencia puede conseguirse mediante configuraciones reutilizables y Presets cuando las mismas características se repiten en diferentes partes del sitio.
Esto permite que el diseñador no tenga que reconstruir manualmente cada imagen y facilita los cambios posteriores.
El módulo Imagen de Divi 5 es una herramienta fundamental para incorporar contenido visual a una página, pero su correcta utilización requiere mucho más que seleccionar una fotografía.
Es necesario tener en cuenta dimensiones, formato, compresión, responsive, accesibilidad, SEO, rendimiento y coherencia visual.
Una buena imagen debe aportar valor al usuario sin perjudicar la velocidad de carga ni romper la estructura del diseño. Cuando estos aspectos se trabajan correctamente, el módulo Imagen se convierte en una pieza esencial dentro de cualquier proyecto profesional realizado con Divi 5.
Rellena la mayor cantidad de datos posibles y acepta las políticas de privacidad para obtener más información de nuestros servicios:
© 2009-2025 webkamy diseño de páginas web y seo
