Tutorial Divi: Todo lo que debes saber sobre los tamaños y uso de imágenes en cada módulo

Índice de contenidos

Con Divi es realmente sencillo añadir imágenes a tu web. No obstante, el reto suele ser conocer los tamaños correctos de imagen a utilizar en cada ocasión y para cada módulo.

Por delante vaya que no  hay un tamaño estándar “perfecto” para cualquier web, básicamente porque cada web es distinta.

Pero si que hay cosas que un diseñador web puede hacer para asegurarse de que sus imágenes se ajustarán correctamente a un sitio creado con Divi. Ese es el objetivo de este artículo.

Así que vamos a ver qué tamaños de imagen utilizar en Divi (fantástico artículo de Jason Champagne) para prácticamente cualquier situación.

La imagen perfecta

Encontrar los tamaños perfectos para tu sitio creado con Divi depende de estos tres principales factores:

  1. relación de aspecto: el alto y ancho de tu imagen.
  2. plantilla de columna: el ancho máximo de tu imagen.
  3. adaptabilidad: los cambios que se hacen en las dimensiones de tu imagen en distintos tamaños de pantalla.

En las siguientes secciones te mostraré en detalle como comprendiendo estos tres factores en Divi el resultado será tener las imágenes perfectas para cualquier situación.

Directrices de optimización de imágenes en Divi

Usa la relación de aspecto de imagen de Divi (16:9, 4:3, 3:4)

La relación de aspecto expresa las dimensiones proporcionales entre el ancho y el alto de una imagen en pantalla.

El número a la izquierda de los dos puntos representa el ancho (eje x) y el número a la derecha de los dos puntos es la altura (eje y).

Las dos relaciones de aspecto más populares son 4:3 y 16:9. Te serán familiares si alguna vez has ajustado la pantalla de tu televisión, monitor o proyector.

La relación de aspecto 4:3 es el tamaño de pantalla estándar de las viejas televisiones y pantallas, y tiene un aspecto de caja.

Las televisiones y pantallas más modernas, de alta definición tienen la relación de aspecto 16:9, que muestra una visualización más ancha. Para finalizar, la relación de aspecto 3:4 es útil para mostrar retratos en Divi.

Divi se creó con tres relaciones de aspecto en mente – 16:9, 4:3 y 3:4. En este artículo me basaré en las dimensiones de imágenes recomendadas para estas relaciones de aspecto.

Si quieres, en este enlace tienes plantillas de imagen para ver los tamaños estándar y relaciones de aspecto recomendados para tus imágenes en Divi.

Nota: Si quieres, hay calculadoras de relaciones de aspecto que pueden ayudarte a encontrar también las dimensiones de imagen adecuadas.

Optimiza las imágenes antes de subirlas

Siempre es mejor optimizar (redimensionar, comprimir, recortar, etc.) tus imágenes antes de subirlas a WordPress.

Intenta conseguir que tus imágenes nunca tengan un peso de archivo mayor de 200kb. De ese modo no ralentizarás la carga de tus páginas. Si quieres saber cómo optimizar imágenes aquí tienes un artículo que puede ayudarte.

No te olvides del SEO

Cuando los motores de búsqueda leen las imágenes se apoyan en el nombre del archivo, título, texto “alt”, leyenda, tipo de archivo, tamaño de archivo, etc. Esta información la tienen en la etiqueta HTML img que hace que se muestre tu imagen.

Asegúrate de añadir esta información a tus imágenes antes de adjuntarlas a tus publicaciones.

Además, el constructor Divi te permite añadir los textos para el “alt” y el “title” en varios módulos. Búscalos cuando añadas imágenes en los módulos de Divi.

Hasta donde yo se, Google no lee automáticamente las imágenes de fondo, ya que no están dentro de ninguna etiqueta HTML img. Las imágenes de fondo se muestran usando CSS, y se usan principalmente por cuestiones de diseño.

Formatos de archivo

En general, la mayoría de las imágenes en la web están en formato JPEG, PNG o GIF. JPEG es ideal para la mayoría de las situaciones debido a su compatibilidad, y pequeño peso de archivo.

Deberías usar JPEG en todas tus fotografías a todo color, como para las imágenes destacadas y las imágenes de fondo.

PNG es también un formato muy compatible para la web.  Los archivos PNG son fantásticos para imágenes más pequeñas con muchos detalles. El formato PNG también es compatible con la capacidad de fondos transparentes, lo que es perfecto para logotipos y elementos gráficos.

Los GIF son buenos para imágenes pequeñas con pocos colores. Los GIF son especiales ya que pueden ser animados, algo a veces muy útil.

Directrices de dimensiones de imagen basadas en las plantillas de columna de Divi

Las siguientes directrices de dimensiones de imágenes están basadas en los ajustes de plantilla por defecto de Divi, lo que incluye un ancho de contenido de 1080px y un ancho de borde de 3.

Para cambiar estos ajustes tendrías que ajustar ligeramente las dimensiones de tus imágenes. Igual que si usas tamaños de columna no estándar en Divi.

La norma general es hacer que tus imágenes sean al menos del ancho de la columna en la que estén. Aquí tienes las dimensiones que necesitarás para tus imágenes en cada distribución de columnas.

Esto no dicta la altura que tienen que tener tus imágenes. Así que aquí tienes una lista de las dimensiones, basándonos en las relaciones de aspecto 4:3 y 16:9. Esto es especialmente útil para mantener tus imágenes en una escala de ancho y alto apropiada para dispositivos móviles.

Las siguientes dimensiones de imagen siguen el estándar de relación de aspecto 16:9:

  • 1 columna: 1080 x 608
  • columna ¾: 795 x 447
  • columna ⅔: 700 x 394
  • columna ½: 510 x 287
  • columna ⅓: 320 x 181
  • columna ¼: 225 x 128

Las siguientes dimensiones de imagen siguen el estándar de relación de aspecto 4:3:

  • 1 columna: 1080 x 810
  • columna ¾: 795 x 597
  • columna ⅔: 700 x 526
  • columna ½: 510 x 384
  • columna ⅓: 320 x 241
  • columna ¼: 225 x 170

Dimensiones de imagen en los distintos módulos de Divi

Módulo de imagen

Cuando uses el módulo de imagen simplemente sigue las relaciones de aspecto 16:9 y 4:3 para determinar qué tamaño de imagen necesitas para cada distribución de columna.

Por ejemplo, si estás usando una distribución de 4 columnas con  una relación de aspecto 4:3, deberías insertar en cada columna una imagen que sea de 225px por 170px.

La ventaja de usar tamaños específicos en cada columna es que te ofrece el tamaño de imagen exacto que necesitas sin desperdiciar peso de archivo que podría ralentizar la carga de tu página.

La desventaja es que no rellena el ancho de la columna en pantallas más pequeñas como las de las tabletas.

Cuando el tamaño de la pantalla pasa del límite de los 1080px la distribución de 4 columnas cambia a la de 2 columnas. Esta distribución de 2 tiene hueco para un tamaño de imagen de un ancho de 370px.

Así que, si quieres rellenar el ancho de columna en pantallas de tabletas puede que debas empezar con un tamaño de imagen de un ancho de 370px en vez de 225px de ancho.

Aquí tienes cómo se ve una distribución a 4 columnas con imágenes de 225px por 170px en una pantalla de tableta a 2 columnas:

No tiene mala pinta, pero si partes de una imagen de 370px de ancho dispondrás de una imagen que rellena el ancho de la columna en la visualización a 2 columnas de las tabletas, así:

Por tanto, si quieres que tus imágenes rellenen el ancho máximo de columna en cualquier dispositivo te recomiendo usar los siguientes tamaños para cada distribución de columnas al usar el módulo de imagen:

Para la relación de aspecto 4:3:

  • 1 columna: 1080 x 810
  • columna ⅔: 770 x 578
  • columna ¾: 770 x 578
  • columna ½: 770 x 578
  • columna ⅓: 770 x 578
  • columna ¼: 370 x 278

Para la relación de aspecto 16:9:

  • 1 columna: 1080 x 608
  • columna ⅔: 770 x 433
  • columna ¾: 770 x 433
  • columna ½: 770 x 433
  • columna ⅓: 770 x 433
  • columna ¼: 370 x 208

Imágenes de fondo para el carrusel y el carrusel de entradas

Las imágenes de fondo para un carrusel de Divi deben ser de al menos el ancho de la columna en la que estén. Así que decidir el tamaño de una imagen es en realidad bastante sencillo, simplemente usa las directrices de tamaños de imágenes para cada ancho de columna que ya hemos visto arriba.

La altura de tu imagen de fondo para el carrusel la determinará el contenido del carrusel (texto, imágenes, logo), así que puede que tengas que ajustar la altura de tu imagen de fondo.

Las siguientes dimensiones de imagen siguen la relación de aspecto estándar 16:9:

  • 1 columna: 1080 x 608
  • columna ¾: 795 x 447
  • columna ⅔: 700 x 394
  • columna ½: 510 x 287
  • columna ⅓: 320 x 181
  • columna ¼: 225 x 128

Las siguientes dimensiones de imagen siguen la relación de aspecto estándar 4:3:

  • 1 columna: 1080 x 810
  • columna ¾ column: 795 x 597
  • columna ⅔: 700 x 526
  • columna ½: 510 x 384
  • columna ⅓: 320 x 241
  • columna ¼: 225 x 170

Y si quieres que el carrusel cubra el ancho de columnas en los dispositivos móviles sigue estas directrices:

Para la relación de aspecto 4:3:

  • 1 columna: 1080 x 810
  • columna ⅔: 770 x 578
  • columna ¾: 770 x 578
  • columna ½: 770 x 578
  • columna ⅓: 770 x 578
  • columna ¼: 370 x 278

Para la relación de aspecto 16:9:

  • 1 columna: 1080 x 608
  • columna ⅔: 770 x 433
  • columna ¾: 770 x 433
  • columna ½: 770 x 433
  • columna ⅓: 770 x 433
  • columna ¼: 370 x 208

Imágenes de fondo del carrusel de ancho completo

Ancho mínimo recomendable: 1920px

El ancho de tu imagen de fondo para un carrusel de ancho completo lo determina siempre el ancho del navegador.

Basándonos en los tamaños estándar de de pantalla te recomiendo que tus imágenes sean al menos de 1280px de ancho. Pero para monitores más grandes un tamaño de imagen más seguro sería de 1920px de ancho.

De nuevo, en los carruseles la altura siempre la determina la cantidad de contenido, así que puede que necesites ajustar la altura a lo que quieras.

Imagen destacada del carrusel y el carrusel de entradas

Las imágenes destacadas de carrusel solo aparecen en carruseles en anchos de  columna ⅔, columna a ¾ o columnas de ancho completo.

Te recomiendo que las imágenes de la diapositiva sean al menos del siguiente ancho para que se ajusten tanto a ordenadores de escritorio como móviles:

  • 1 columna: 450
  • columna ¾: 330
  • columna ⅔: 320

Nota: En un navegador con un ancho de menos de 768px se ocultará la imagen y solo se mostrará el extracto de la entrada.

Imágenes en visualización de mesa de luz (lightbox)

Si usas la funcionalidad de mesa de luz (lightbox) en una imagen puede que quieras usar una imagen más grande. Normalmente un tamaño de 1500 x 844 se verá bien en una imagen a pantalla completa al verla en monitores grandes.

Imagen de carátula del módulo de audio

Ancho: al menos 780px

Aunque la imagen sea pequeña al principio (230 x 130) se extiende al ancho completo de la sección de contenido en tamaños de pantalla menores de 780px.

Imágenes destacadas en el módulo blog en la disposición de ancho completo

Ancho de la imagen: igual al tamaño del ancho de su columna

Añadir imágenes destacadas a tus entradas para que se muestren en el módulo blog es muy fácil. Las imágenes destacadas deberían ser tan anchas como la columna en la que estén.

Por ejemplo, si estás usando un módulo blog en una columna de dos tercios con barra lateral a la derecha, deberías usar una imagen destacada de al menos 700px de ancho ya que ese es el ancho de una columna de dos tercios en Divi.

No olvides que la imagen destacada también se utilizará en tu plantilla de entrada simple (la página que muestra tu entrada completa una vez que se hace clic en el extracto, single.php).

Por tanto, asegúrate de que tu plantilla de entrada simple también utilice una columna de dos tercios para que se vea bien tu imagen destacada.

  • 1 columna: 1080
  • columna ¾: 795
  • columna ⅔: 700
  • columna ½: 510
  • columna ⅓: 320
  • columna ¼: 225

Imágenes destacadas del módulo modo en la disposición de rejilla

Ancho: Igual que el tamaño del ancho de la columna de la entrada completa (por defecto 795px)

Y, al igual que con la disposición de ancho completo del módulo blog, la imagen destacada tiene que ser mayor  para cuando se muestre en la entrada completa.

Lo mejor de la disposición del módulo blog en rejilla es que Divi utiliza una versión más pequeña de la imagen destacada subida a la biblioteca de medios (con un ancho de 400px).

Como esta imagen pequeña se crea y se muestra automáticamente no tienes que preocuparte por la carga que tu página cargue un tamaño de archivo que sea demasiado grande para la columna de la rejilla.

Imágenes destacadas del módulo portafolio (disposición ancho completo y rejilla; estándar y filtrable)

Ancho: igual al ancho de columna de entrada simple (por defecto: 795px)

Cuando haces clic para ver tu portafolio desde la disposición en rejilla la imagen destacada ocupa el ancho de la sección del contenido, igual que en el módulo blog.

Igual que en el módulo blog, Divi crea una versión más pequeña (400px de ancho) de la imagen destacada del portafolio para usarla en la disposición de rejilla del módulo portafolio.

Esto es útil para reducir el peso de archivo  y mantener bajo el tiempo de carga de página. De este modo, al crear un nuevo elemento portafolio es importante que tu imagen destacada sea al menos del mismo ancho que la columna de tu plantilla de portafolio.

Imagen del módulo anuncio

Ancho máximo: 550px

La imagen del módulo anuncio sigue la misma regla de que el ancho de la imagen coincida con el ancho de la columna, con la excepción de la columna de ancho completo, que tiene un ancho máximo de 550px en vez del normal de 1080px.

En consecuencia, lo más seguro es insertar las imágenes en un ancho de 550px. Los siguientes son los anchos de imagen para el módulo anuncio en cada disposición de columna:

  • 1 columna: 550px
  • columna ½: 510px
  • columna ⅓: 320px
  • columna ¼: 225px

Imágenes del módulo galería (disposición carrusel y rejilla)

Dimensiones recomendadas: 1500 x 844

Como las imágenes del módulo galería se abren en mesa de luz (lightbox) te recomiendo usar una imagen lo suficientemente grande como para rellenar la ventana completa del navegador al ver la imagen en la mesa de luz (algo alrededor de 1500px de ancho para monitores grandes).

En la disposición de rejilla Divi crea una versión más pequeña (400px de ancho) de la galería. Por tanto, el tamaño de archivo de la imagen reservado para la mesa de luz no se mostrará en la rejilla de la galería. Esto es útil para reducir el tamaño de tu archivo y mantener bajo el tiempo de carga de la página.

En la visualización de carrusel es importante tratar de que tus imágenes mantengan el mismo ancho y alto del resto de imágenes cuando se cambie de diapositiva.

Imagen del módulo persona

Dimensiones recomendadas

Ancho: 600px

En el módulo persona hay que usar la relación de aspecto 3:4, genial para los retratos. Aquí tienes los tamaños de imagen recomendados para cada relación de aspecto del módulo persona:

  • 3:4 – 600 x 800 (recomendado para retratos)
  • 16:9 – 600 x 338
  • 4:3 – 600 x 400

Funcionalidad adaptable (responsive)

Una imagen del módulo persona en disposición de columna de ancho completo se mostrará a la izquierda del contenido en 320px.

Cuando el tamaño de pantalla sea menos de 767px la imagen ocupará el ancho del área del contenido hasta un máximo de 600px.

El siguiente gif muestra el módulo persona usando una imagen de 600 x 800 (usando la relación de aspecto 3:4) en distintos tamaños de pantalla.

Imagen destacada del módulo título de publicación

Ancho: igual que el ancho de columna

El módulo título de publicación muestra el título de tu entrada actual y, opcionalmente, la imagen destacada de la entrada.

Puedes elegir la ubicación de tu imagen destacada entre sobre el título, debajo del título o como fondo del título. Independientemente de tu elección, la imagen ocupará el ancho de toda la sección del contenido.

Por tanto, si usas una columna de ancho completo en tu módulo de título de publicación lo ideal será un ancho de 1080px para tu imagen destacada.

Imágenes de producto en el módulo tienda

Recomendaciones

  • Ancho recomendado: 330px
  • Número de columnas recomendado: 3 o más

El módulo tienda te permite mostrar tus productos en disposición desde columna de ancho completo hasta en seis columnas. Aquí tienes los anchos de imagen de producto al mostrarse en cada disposición de columnas:

  • 6 columnas: 150px
  • 5 columnas: 183px
  • 4 columnas: 240px
  • 3 columnas: 332px
  • 2 columnas: 520px
  • 1 columna: 1080px

Funcionalidad

Divi genera una versión más pequeña de la imagen del producto (con un ancho máximo de 400px) debido a que el módulo tienda se creó pensando en mostrar productos en columnas de ⅓ o inferiores.

Esto significa que tus disposiciones a 2 o 1 columna mostrarán un versión difuminada de la imagen de tu producto.

Además, cuando haces clic en un producto del módulo tienda la página de producto muestra la imagen de tu producto en 300px.

Para adaptarlo a una disposición de 3 columnas y a la página de producto te recomiendo usar tamaños de imagen de al menos 330px de ancho.

Imágenes retrato de recomendaciones

El tamaño de imagen se basa en los ajustes del módulo.

Por defecto Divi convierte tu imagen de retrato a un tamaño de 90 x 90 y un borde de 90 que se muestra en forma de círculo.

Por tanto, si quieres mantener los ajustes por defecto, te recomiendo que las dimensiones de tu imagen sea de exactamente 90 x 90.

Puedes animarte a usar imágenes más grandes sin la relación de aspecto 1:1 pero emplearás un montón de tamaño de archivo que ralentizará la carga de tu página.

Puedes personalizar las dimensiones y el radio del borde de la imagen de retrato dentro de la pestaña de ajustes avanzados de diseño del módulo recomendación.

Cuando cambies estos ajustes asegúrate de que mantengas el mismo ancho y alto y el radio de borde en 100 si quieres seguir usando esas imágenes circulares que tan bien quedan.

Directrices generales para las imágenes de fondo

Cuando uses una imagen de fondo en un módulo la imagen de fondo siempre tendrá que ser al menos tan ancha como la columna en la que esté. Simplemente sigue las directrices para los anchos de columna en Divi:

  • 1 columna: 1080
  • columna ¾: 795
  • columna ⅔: 700
  • columna ½: 510
  • columna ⅓: 320
  • columna ¼: 225

Aquí tienes una lista de módulos que necesitan que las imágenes de fondo se ajusten al ancho de la columna:

  • Módulo portafolio
  • Módulo portafolio filtrable
  • Módulo llamada a la acción
  • Módulo carrusel de entradas
  • Módulo título de la publicación
  • Módulo carrusel
  • Módulo de texto

Directrices generales para las imágenes de fondo de ancho completo

Si usas una imagen de fondo en una sección de ancho completo estas imágenes se expandirán hasta el ancho completo de tu navegador.

Esto significa que debes usar imágenes lo suficientemente anchas como para rellenar monitores grandes, algo alrededor de 1920px.

Los siguientes módulos requerirán un ancho de imagen de fondo de 1920px:

  • Título de ancho completo
  • Portafolio de ancho completo
  • Carrusel de ancho completo
  • Título de la publicación de ancho completo
  • Carrusel de entradas de ancho completo
  • Imagen de ancho completo

Además, es importante que te des cuenta de que en estos módulos la altura de la imagen de fondo la determina la cantidad de contenido del módulo, así que tendrás que ajustar la altura de las imágenes a cada necesidad.

Módulo de título de ancho completo

Imágenes de fondo a pantalla completa

No las confundas con las imágenes de ancho completo, la imagen de pantalla completa se refiere a un ajuste que hay en tu módulo de título de ancho completo que te permite que tu título rellene por completo (en ancho y alto) la ventana del navegador.

Como la mayoría de los monitores siguen la relación de aspecto de 4:3 y 16:9 y serán solo de 1280px o 1920px de ancho te recomiendo las siguientes dimensiones para las imágenes de fondo a pantalla completa:

  • 4:3 – 1280 x 960 (recomendado para retratos)
  • 16:9 – 1920 x 1080

Imagen de logotipo del módulo de título de ancho completo

El módulo de título de ancho completo te permite poner un logotipo dentro del área del contenido de la cabecera.

No hay ningún tamaño de imagen estándar para los logotipos. Como norma general te sugiero hacer un logotipo lo suficientemente grande como para que se vea con claridad en los ordenadores de escritorio, pero lo suficientemente pequeño como para que se adapte también a dispositivos más pequeños, como teléfonos móviles.

El logo del tema Divi de 93 x 43 te puede dar una idea.

Imagen del título de ancho completo

  • Dimensiones recomendadas: 510 x 288

Además del logotipo, el módulo de título de ancho completo permite mostrar una imagen en el área de contenido de la cabecera.

Por defecto la imagen de la cabecera se mostrará en la columna derecha en una disposición a 2 columnas. Como la imagen estará en una columna de ½ una imagen de 510 x 288 tiene todo el sentido la mayoría de las ocasiones.

Si cambias la opción de orientación de texto y logotipo de los ajustes generales del módulo te permitirá hacer que la imagen de la cabecera se muestre en la columna izquierda, o centrada si así lo prefieres.

También puedes ajustar la alineación vertical al fondo, si quieres que tu imagen se pegue al borde inferior de la cabecera.

Conclusiones finales

Como ya he mencionado al principio no hay una dimensión de imagen estándar perfecta para todas las webs y tamaños de pantalla.

No obstante, comprender la disposición de las columnas de Divi y cómo muestra cada módulo ciertas imágenes te permitirá crear dimensiones que funcionen a la perfección en tu sitio creado con Divi.

Espero que este artículo sea un recurso útil para tus futuros proyectos. Si tienes alguna idea más anímate a comentarla.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (10 votos, promedio: 4,90 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar