En este videotutorial prémium haremos una guía práctica sobre uso de las imágenes en un diseño web hecho con Divi. Responderemos las interrogantes de nuestros alumnos sobre que tamaño de imagen usar para cada sección del sitio, como determinar el tamaño de imagen apropiado para una imagen y como revisar cuál es el tamaño de imágenes que usan otras webs o plantillas.

Con esta video guía práctica podrás aprender a saber como administrar los tamaños de imágenes para usar en las diferentes secciones de tu diseño web hecho con Divi.

¿Por qué importa tanto el tamaño correcto de imágenes en Divi?

El tamaño de imagen es uno de los factores que más impacto tiene en la velocidad de carga y la experiencia de un sitio web hecho con Divi. Una imagen de fondo de 5000x3000px pesando 4 MB cuando solo se muestra a 1920×600 es uno de los errores más comunes — y uno de los que más arruinan los Core Web Vitals.

El balance correcto cumple tres objetivos:

• Calidad visual: imagen nítida en cualquier pantalla (incluyendo retina/4K).
• Peso optimizado: el menor tamaño de archivo posible sin sacrificar calidad visual.
• Responsive consistente: que se vea bien en mobile, tablet y desktop sin tener que cargar 3 versiones distintas (aunque a veces sí conviene).

Si construyes sitios web profesionales y el cliente te pide «que cargue rápido», optimizar imágenes es uno de los pasos más impactantes. Lo cubrimos a fondo en nuestro curso de Optimización de Velocidad con Divi.

Tamaños recomendados según el tipo de sección

Como referencia general (basada en pantalla estándar 1920×1080 que cubre la mayoría de los visitantes):

• Imagen de fondo de hero (full width): 1920×800-1080px. No subas a 920px de altura «por si acaso» — pesa más sin verse mejor.
• Imagen dentro de un módulo de fila estándar (1080px): 1080-1200px de ancho. Si la fila tiene 2 columnas, cada columna recibe 540-600px → tu imagen no necesita ser más ancha que eso.
• Thumbnails de blog: 800x600px o 800x800px (cuadrado). Más grandes pesan sin aportar — los thumbnails se ven a tamaño chico.
• Imágenes de producto en WooCommerce: 800x800px formato cuadrado (estándar de la industria). WooCommerce genera automáticamente versiones más chicas para galería y catálogo.
• Logos en header: 500x200px máximo si es horizontal, 200x200px si es cuadrado. SVG es mejor cuando se puede.
• Iconos pequeños: 64x64px o usa fuentes de iconos (Font Awesome, Iconify) que no pesen como imágenes raster.

Cómo verificar el tamaño real de tus imágenes

El truco para saber si tus imágenes están sobre-dimensionadas es muy simple — cualquier diseñador profesional lo usa:

1. Abre tu sitio en Chrome. Click derecho → Inspeccionar → en DevTools click en el ícono de «Selector de elementos» (la flechita arriba a la izquierda).
2. Pasa el cursor sobre cualquier imagen. Chrome te muestra dos datos clave: el tamaño actual de visualización (cómo se está mostrando en pantalla, ej. 708×940) y el tamaño natural (el tamaño real del archivo, ej. 2500×3300).
3. Compara los dos números. Si el tamaño natural es muchísimo más grande que el de visualización (ej. natural 2500px, visualización 700px), la imagen está sobre-dimensionada. Estás cargando 3.5x más de lo necesario.
4. Optimiza esa imagen específica. Reduce su tamaño en Photoshop, Figma o un servicio online (TinyPNG, Squoosh) y vuelve a subirla. Repite para todas las imágenes mal dimensionadas.

Si haces este ejercicio en un sitio sin optimizar, casi siempre encuentras imágenes 3-5x más grandes de lo necesario. Corrigiendo solo eso ya bajas el peso del sitio considerablemente.

Formatos de imagen y cuándo usar cada uno

• WebP: formato moderno con mejor compresión que JPG y PNG. Es el formato recomendado para fotos y diseños complejos en sitios actuales. WordPress lo soporta nativamente desde la versión 5.8.
• JPG: alternativa universal para fotos. Bueno para imágenes complejas (paisajes, retratos). Comprime con pérdida — calidad 80-85% suele ser el mejor balance.
• PNG: úsalo solo cuando necesitas transparencia (logos sobre fondos coloridos). Pesa 5-10x más que JPG/WebP — no lo uses para fotos.
• SVG: vectorial, escala infinitamente sin perder calidad. Ideal para logos, íconos, ilustraciones planas. Pesos ridículamente bajos (1-5 KB típicamente).
• AVIF: el formato más moderno (mejor que WebP), pero soporte de navegadores aún irregular. Útil para sitios de gama alta donde cada KB cuenta.

Tips avanzados para imágenes en Divi

• Activa lazy loading: las imágenes debajo del fold no deben cargar hasta que el usuario haga scroll. Divi 5 lo trae nativo, en Divi 4 se activa con plugins de optimización.
• Usa CDN para servir imágenes: combina con Cloudflare o Bunny.net. Las imágenes se sirven desde un servidor cercano al visitante, no desde tu hosting.
• Para video, no uses MP4 directo: si tienes background videos o demos, considera Bunny Stream en lugar de subir archivos pesados al hosting.
• Imágenes responsive con tamaños diferentes por dispositivo: Divi 5 permite asignar imágenes distintas a desktop, tablet y mobile en un mismo módulo. Útil cuando una imagen horizontal de hero no funciona bien recortada en mobile.
• Plugins de optimización automática: ShortPixel, Imagify, Smush procesan en bulk todas las imágenes existentes y las convierten a WebP automáticamente. Si vas a actualizar a Divi 5, mira nuestra guía para migrar de Divi 4 a Divi 5 para que la migración no rompa estos plugins.

Por qué impacta el SEO directamente

Imágenes bien optimizadas no son solo cosa de velocidad — Google las considera factor directo en el ranking:

• Core Web Vitals (LCP, CLS): el LCP suele ser una imagen de hero. Si pesa 4 MB, tu LCP se va al carajo y Google penaliza.
• Alt-text descriptivo: cada imagen debe tener alt-text que describa el contenido. Útil para accesibilidad y para que aparezcas en Google Imágenes.
• Nombre de archivo: foto-hero-uxdivi.webp es mejor que IMG_2453.jpg. Google lee el nombre.
• Imágenes en sitios multi-idioma: si tienes versiones en distintos idiomas, usa el mismo CDN y considera traducir alt-texts. Mira nuestra guía sobre Polylang en Divi.

Para profundizar en SEO técnico (incluyendo imágenes), mira nuestro Mastery de SEO profesional para WordPress.

Preguntas frecuentes

¿Conviene siempre usar WebP en Divi?

Sí. WebP da entre 25-50% menos peso que JPG con calidad equivalente. Todos los navegadores modernos lo soportan. Para sitios nuevos, WebP es el formato por defecto.

¿Cuál es el tamaño máximo recomendado para una imagen?

Pocas imágenes en un sitio justifican más de 200 KB. Hero/banner gigante puede llegar a 300 KB en formato WebP optimizado. Cualquier imagen de más de 500 KB en un sitio web profesional es señal de que está sobre-dimensionada o sin comprimir.

¿Necesito optimizar manualmente o puedo automatizarlo?

Para sitios nuevos puedes automatizar todo con plugins (ShortPixel, Imagify). Para sitios viejos con cientos de imágenes mal subidas, lo más eficiente es procesar en bulk con un plugin y luego revisar manualmente las imágenes críticas (hero, página de venta principal).

¿Aplica todo esto a Divi 5?

Sí — y Divi 5 mejora varios aspectos: lazy loading nativo, mejor handling de imágenes responsive por dispositivo, soporte completo para WebP. Si vas a actualizar, mira nuestra guía de migración Divi 4 → Divi 5.

¿Hay diferencia entre subir desde el editor de Divi vs Media Library?

No, técnicamente las imágenes terminan en la Media Library igual. Pero subir desde el editor de Divi a veces no aplica los plugins de optimización automáticos. Si trabajas en bulk, sube primero a Media Library, optimiza con tu plugin, y luego inserta desde el editor.

¿Listo para optimizar las imágenes de tu sitio?

Optimizar imágenes es uno de los pasos con mejor relación esfuerzo/impacto en cualquier sitio. Para llevarlo al siguiente nivel — combinando imágenes optimizadas + CDN + caché + hosting decente — mira nuestro curso de Optimización de Velocidad con Divi. Y si tu objetivo es construir un negocio profesional de diseño web entregando sitios con velocidad Grade A, complementa con el Mastery de Negocio de Diseño Web.

Inspeccionador de Chrome: Dar clic derecho > inspeccionar

Extensión CSS Peeper: Link a la extensión