Seleccionar página

Guia de Tamaños y Dimensiones de Imanes en Divi

Añadir imágenes en Divi es realmente fácil, aunque para algunos puede ser complicado saber cual es el tamaño y aspecto que estas imágenes deben tener para que se visualicen correctamente. En este artículo encontrarás el tamaño que debes utilizar en tus imágenes para conseguir un resultado óptimo.

Generalidades

Encontrar el tamaño y ratio correcto para las imágenes insertadas en Divi depende de 3 factores principales:

  • Aspecto: relación entre el alto y el ancho de tu imagen
  • Columnas: estructura de columnas utilizada en Divi
  • Adaptación: depende del dispositivo usado por el visitante; ordenador, tablet, smartphone.

Aspecto o Ratio de la Imagen en Divi

Cuando hablamos de aspecto o ratio de una imagen nos referimos a las proporciones o relación entre el ancho y alto de la imagen. El número a la izquierda representa el ancho de la imagen mientras que el número situado a la derecha representa el alto. Los dos aspectos más utilizados son el 4:3 y el 16:9. Esto es fácil de entender si pensamos en monitores o pantallas de un televisor, donde 4:3 es el rátio típico de los más antiguos, algo más cuadrados, y el 16:9 es típico de los más modernos, más estirados o panorámicos.

Divi está diseñado pensando en 3 aspecto de imagen principalmente, que son el 16:9, 4:3 y 3:4 por lo que las dimensiones de la mayoría de tus imágenes debería coincidir con estos ratios. Aquí encontrarás una herramienta o aplicación online que te ayudará a saber las dimensiones de una imagen y su ratio correspondiente.

Optimización de Imágenes

Es interesante que optimices tus imágenes antes de subirlas a tu biblioteca de WordPress con la finalidad de que tu sitio sea lo más ligero posible y cargue rápidamente, algo que tiene múltiples beneficios como la de mejorar la experiencia de los visitantes y mejorar el posicionamiento de tu página web. Intenta que tus imágenes tengan un tamaño entre 60kb y 200kb.

Imágenes y el SEO

Cuando hablamos de SEO, los motores de búsqueda le dan importancia al nombre del archivo, texto alternativo, descripción, tipo de archivo, tamaño… por lo que es importante que tengas en cuenta todos estos aspectos. Puedes acceder a una imágenes de tu biblioteca en WordPress y observar los diferentes campos que tienes disponibles.



informacion imagen divi

Formatos

Los formatos habituales son JPEG, PNG y GIF debido a utilizan un buen equilibrio para ser visualizadas de forma correcta conservando la mayor calidad posible y ocupando un espacio reducido. El formato de imágenes JPG debería ser el preferente para aquellas situación donde el color es importante. El formato PNG es ideal para imágenes con mucho detalle o que dispongan de transparecias. Por último tenemos el formato GIF, generalmente usado para poder disponer de animaciones, útil en algunos casos.

Dimensiones de Imagen Basadas en Columnas de Divi

Los siguientes tamaños de imágenes están basados en las plantillas de columnas que viene por defecto en Divi. Ya sabes que cuando utilizamos el constructor e insertamos una nueva fila Divi nos pregunta por la estructura de columnas que deseamos, teniendo varias plantillas para escoger. Estas dimensiones de imágenes para Divi están basadas en los valores por defecto de 1080px de ancho de contenido y 3 de separación entre columnas. Los tamaños y dimensiones de imágenes aquí presentadas tienen la finalidad de que ocupen todo el ancho de la columna.



tamaños imagenes divi por columnas

Los tamaños y dimensiones presentados en la imagen anterior no especifican el alto. Es interesante mantener los aspectos indicados anteriormente. Aquí está la correlación de alturas según el asepcto:

Aspecto 16:9.

  • 1 columna: 1080 x 608
  • columna 3/4: 795 x 447
  • columna 2/3: 700 x 394
  • columna 1/2: 510 x 287
  • columna 1/3: 320 x 181
  • columna 1/4: 225 x 128



imagenes divi aspeto 16 9

Aspecto 16:9.

  • 1 columna: 1080 x 810
  • columna 3/4: 795 x 597
  • columna 2/3: 700 x 526
  • columna 1/2: 510 x 384
  • columna 1/3: 320 x 241
  • columna 1/4: 225 x 170



imagenes divi aspeto 4 3

Tamaños de Imágenes Basadas en Módulos de Divi

Módulo de Imagen

Cuando uses el módulo de imagen de Divi puedes seguir simplemente el ratio de 16:9 o 4:3 que se mostró anteriormente, por ejemplo si usas 4:3 en 4 columnas tu imagen puede ser de 225px x 170px. El único problema de esto será que las imágenes, aunque tendrán el tamaño correcto para ocupar todo el ancho de columna en ordenadores, en otros dispositivos no ocuparán el ancho completo, como por ejemplo en tablets. Cuando el ancho de pantalla baja de los 1080px las 4 columnas se convertirán en 2, por lo que las imágenes no ocuparán todo el ancho disponible en cada una de las columnas (al pasar de 4 a 2 columnas cada una de ellas dispone de mayor ancho). En este ejemplo, si deseas que ocupen el ancho completo en tablets, tendrás que dar a tus imágenes un ancho de 370px en lugar de 225px.

Así es como quedan las imágenes de 225px x 170px en 4 columnas en tablets:



imagenes en tables 4 columnas divi

Y así es cómo quedaría con 370px de ancho conservando el aspeto:



imagenes en tables 4 columnas divi 370

Para que tus imágenes cubran todo el ancho en los distintos dispositivos puedes usar los siguientes tamaños o dimensiones en el módulo imagen de Divi:

ASPECTO 4:3

  • 1 columna: 1080 x 810
  • columna 2/3: 770 x 578
  • columna 3/4: 770 x 578
  • columna 1/2: 770 x 578
  • columna 1/3: 770 x 578
  • columna 1/4: 370 x 278

ASPECTO 16:9

  • 1 columna: 1080 x 608
  • columna 2/3: 770 x 433
  • columna 3/4: 770 x 433
  • columna 1/2: 770 x 433
  • columna 1/3: 770 x 433
  • columna 1/4: 370 x 208


Módulo Deslizadores o Sliders Imagen de Fondo

El ancho de las imágenes escogida como fondo para el módulo deslizador o slider de Divi debe seguir las mismas dimensiones indicadas en correlación con el número de columnas, por ejemplo, para un aspecto de 16:9 sería:

  • 1 columna: 1080 x 608
  • columna 3/4: 795 x 447
  • columna 2/3: 700 x 394
  • columna 1/2: 510 x 287
  • columna 1/3: 320 x 181
  • columna 1/4: 225 x 128

Y si quieres que aproveche todo el ancho en dispositivos móviles sería:

  • 1 columna: 1080 x 608
  • columna 2/3: 770 x 433
  • columna 3/4: 770 x 433
  • columna 1/2: 770 x 433
  • columna 1/3: 770 x 433
  • columna 1/4: 370 x 208



tamaño imagenes deslizador divi-min


Es posible que tengas que modificar la altura de las imágenes ya que dependerá del contenido que insertes en el deslizador.

Deslizadores o Sliders de Ancho Completo Imagen de Fondo

El ancho de la imagen de fondo en deslizadores de ancho completo dependerá del ancho de pantalla, pero las recomendación estándar es utilizar 1280px de ancho como mínimo, y a ser posible 1920px para que se muestre correctamente en monitores más grandes.

La altura de la imagen estará determinado por el contenido que incluyas.

Deslizadores o Sliders Imagen Destacada

imagen destacada ancho deslizantes sliders divi-min

La imagen destacad de los deslizadores solo aparecerá si tenemos establecidas columnas completas, de 2/3 o 3/4. Las anchuras recomendadas para que se ajusten a los distintos dispositivos son:

  • 1 columna: 450px
  • columna 3/4: 330px
  • columna 2/3: 320px

Imágenes en Ventanas Emergentes

Ya sabes que puedes hacer que una imagen se abra en una ventana emergente cuando alguien hace clic sobre ella. En este caso 1500px x 844px es una buena dimensión para que se muestre correctamente en monitores más grandes.

Módulo de Audio

es recomendable que como mínimo la imagen en el módulo de audio de Divi tenga 780px.

Módulo de Blog Ancho Completo

La anchura de imagen dependerá del tamaño de la columna, por lo que los tamaños o dimensiones ideales de las imágenes seguirán las pautas especificadas anteriormente según la plantilla de columnas escogida. Por ejemplo, si utilizas una columna de 2/3 la imagen destacada deberá tener al mínimo 700px de ancho.



imagen destacada blog tamaño divi

Hay que tener en cuenta que la imagen destacada del artículo también aparecerá en la página individual de post.

  • 1 columna: 1080px
  • 3/4: 795
  • 2/3: 700
  • 1/2: 510
  • 1/3: 320
  • 1/4: 225


Módulo de Blog Rejilla

El ancho estará determinado por el ancho necesario para la imagen de la página individual de artículo, 795px.

imagen en blog rejilla

Portafolio

El ancho queda determinado por el ancho de columna de la imagen del post o artículo individual, es decir, 795px.


imagen en portafolio

Módulo Anuncio o Blurb

Sigue las mismas especificaciones de tamaño y ancho de imagen especificados anteriormente en el apartado de módulo de imagen, con la excepción del uso de 1 columna:

  • 1 columna: 550px
  • columna 1/2: 510px
  • columna 1/3: 320px
  • columna 1/4: 225px



imagen en anuncio tamaño

Galería

Nos referimos aquí al deslizar como al formato de rejilla del módulo de galería de Divi. Debido a que las imágenes del módulo galería de Divi se abren en una ventana emergente, es recomendable escoger las dimensiones teniendo en cuenta este detalle, por lo que se recomienda un mínimo de 1500px x 844px.

No hay por que preocuparse si seleccionamos la opción de rejilla ya que Divi creará una versión reducida de 400px, reservando la versión de imagen completa para cuando el visitante abra un de las imágenes en la ventana emergente.

Intenta mantener el mismo alto y ancho en todas las imágenes que utilices en el módulo de galería.

Persona

En este módulo es interesante utilizar el aspecto 3:4 típico de los retratos, pero esto es una elección personal de cada uno. Los tamaños recomendados de imagen son:

  • aspecto 3:4 – 600 x 800
  • aspecto 16:9 – 600 x 338
  • aspecto 4:3 – 600 x 400


Título de Publicación

Para este módulo utilizaremos el ancho en función de la anchura completo como especificamos al principio de este artículo, por ejemplo, si utilizas 1 columna la anchura recomendada será de 1080px.

Tienda

La anchura de la imagen dependerá del número de columnas escogida dentro de la configuración del módulo. Las anchuras recomendadas son:

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

Este módulo está diseñado para que las imágenes aparezcan optimizadas a partir de 3 o más columnas.



tamaños de imagen en modulo tienda

Testimonios

Divi convertirá tu imagen en un tamaño de 90×90 y la mostrará como un circulo, por lo que es una buena idea que tus imágenes conserven estas dimensiones.Dentro del módulo podrás modificar la forma en que se muestra tu imagen y es posible que requieras de otras dimensiones distintas a la comentada.


dimesiones imagen testimonios

Imágenes de Fondo

Muchos módulos de Divi tienen la opción de seleccionar una imagen de fondo, la cual necesitará ser como mínimo de la misma anchura de la columna. Puedes seguir las especificaciones realizadas sobre tamaños de imagen y columnas al principio de este artículo.

  • 1 columna: 1080px
  • 3/4: 795
  • 2/3: 700
  • 1/2: 510
  • 1/3: 320
  • 1/4: 225



Título de Anchura Completa

La imagen de fondo en caso de que tengas seleccionada la opción de pantalla completa disponible dentro del módulo las dimensiones óptimas serán de 1280 x 960 para aspectos de 4:3 y de 1920×1080 para 16:9.

La imagen de logo debería ser suficientemente grande como para que se visualice correctamente sin pixelar. Anchos de 15px debería ser una buena dimensión.

La imagen de título se visualiza en una estructura de columna de 2/3, por lo que es recomendable que tenga unas proporciones de 510px x 288px.