Correccion de errores de dimensiones de imagen y CLS en WordPress (guía 2026)

#Entendiendo los errores de dimensiones de imagen y CLS

Conozca más sobre la optimización de velocidad WordPress en WPPoland.

Cumulative Layout Shift (CLS) es uno de los tres Core Web Vitals de Google y mide la estabilidad visual de su página durante la carga. Las imágenes sin dimensiones explicitas son una de las causas más comunes de un CLS deficiente.

Cuando un navegador no sabe el tamaño de una imagen antes de cargarla, no puede reservar el espacio correcto en el diseño. Cuando la imagen finalmente se carga, todo el contenido debajo se desplaza, creando una experiencia frustrante para el usuario.

#El problema fundamental

Sin atributos width y height en las etiquetas <img>, el navegador pasa por este proceso:

1. Renderiza el HTML y CSS
2. Encuentra una etiqueta <img> sin dimensiones
3. No sabe cuanto espacio reservar, asigna 0px
4. La imagen se descarga y el navegador ahora conoce las dimensiones reales
5. Todo el contenido debajo se desplaza para hacer espacio
6. CLS aumenta, la puntuacion de Core Web Vitals empeora

#La solución: Atributos de dimension explicitos

Siempre incluya width y height en sus etiquetas de imagen:

<!-- Correcto: dimensiones explicitas -->
<img src="foto.jpg" width="800" height="600" alt="Descripcion de la foto">

<!-- Incorrecto: sin dimensiones -->
<img src="foto.jpg" alt="Descripcion de la foto">

WordPress moderno (6.0+) agrega automáticamente estos atributos a las imágenes insertadas a través de la biblioteca de medios. Sin embargo, las imágenes agregadas manualmente en HTML personalizado, bloques de código o plantillas de tema a menudo carecen de estas dimensiones.

#CSS aspect-ratio: La solución moderna

La propiedad CSS aspect-ratio es la forma moderna de reservar espacio para imágenes responsivas:

/* Reservar espacio manteniendo la responsividad */
img {
  aspect-ratio: attr(width) / attr(height);
  width: 100%;
  height: auto;
}

/* O específicar directamente */
.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

#Por que aspect-ratio es superior al truco del padding

Antes de aspect-ratio, los desarrolladores usaban el truco del padding-bottom para reservar espacio:

/* Metodo antiguo (padding hack) */
.image-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}
.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metodo moderno (aspect-ratio) */
.image-container img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

El método moderno es más limpio, más fácil de mantener y funciona nativamente en todos los navegadores modernos.

#Requisitos de imagen para Google Discover

Google Discover es una fuente significativa de tráfico para muchos sitios. Para ser elegible para tarjetas de alta visibilidad en Discover, sus imágenes destacadas deben cumplir ciertos requisitos:

• Ancho minimo: 1200px
• Relación de aspecto: Preferiblemente 16:9 o 4:3
• Formato: JPEG, PNG, WebP (AVIF con soporte creciente)
• Calidad: Alta calidad sin compresion excesiva

#Verificación en Google Search Console

Si ve advertencias de “Imagen de tamaño menor al recomendado” en GSC:

1. Vaya a Search Console > Mejoras > Páginas AMP o Discover
2. Identifique las páginas con advertencias
3. Re-suba las imágenes destacadas con al menos 1200px de ancho
4. Use wp_get_attachment_image_src() para verificar tamaños programaticamente

// Verificar tamaño de imagen destacada
$featured_id = get_post_thumbnail_id($post_id);
$image_data = wp_get_attachment_image_src($featured_id, 'full');

if ($image_data) {
    $width = $image_data[1];
    if ($width < 1200) {
        // Imagen demasiado pequena para Google Discover
        error_log("Imagen destacada del post {$post_id} es solo {$width}px de ancho");
    }
}

#Auditoria de lazy loading y LCP

El lazy loading es excelente para imágenes debajo del pliegue, pero puede ser devastador para el rendimiento si se aplica a la imagen LCP (Largest Contentful Paint):

#Identificar la imagen LCP

1. Abra Chrome DevTools (F12)
2. Vaya a la pestana Performance
3. Recargue la página con grabacion
4. Busque el marcador LCP - identifica que elemento es el LCP
5. Si es una imagen, asegurese de que NO tenga loading="lazy"

#Correccion en WordPress

// Asegurar que la imagen hero nunca tenga lazy loading
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    // Detectar imagen hero por clase CSS o posicion
    if (strpos($image, 'hero-image') !== false) {
        return false; // No agregar loading attr
    }
    return $value;
}, 10, 3);

// Agregar fetchpriority='high' a la imagen hero
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    if ($size === 'hero' || (isset($attr['class']) && strpos($attr['class'], 'hero') !== false)) {
        $attr['fetchpriority'] = 'high';
        $attr['loading'] = 'eager';
    }
    return $attr;
}, 10, 3);

#Herramientas de diagnóstico

#PageSpeed Insights

Ejecute PageSpeed Insights en sus páginas principales y busque:

• “Avoid large layout shifts” (CLS)
• “Image elements do not have explicit width and height”
• “Largest Contentful Paint image was lazily loaded”

#Chrome DevTools - Layout Shift Regions

1. Abra DevTools > Rendering (tres puntos > More tools > Rendering)
2. Active “Layout Shift Regions”
3. Recargue la página
4. Las regiones que cambian se resaltaran en azul

#Web Vitals Extension

La extensión Web Vitals para Chrome muestra metricas en tiempo real mientras navega, incluyendo CLS con detalles de que elementos causaron los saltos.

#Correccion masiva de imágenes existentes

Para sitios con muchas imágenes sin dimensiones, use este enfoque sistematico:

// Agregar dimensiones a imagenes en contenido existente
add_filter('the_content', function($content) {
    // Buscar imagenes sin width/height
    $pattern = '/<img(?![^>]*width)[^>]*>/i';

    return preg_replace_callback($pattern, function($matches) {
        $img = $matches[0];

        // Extraer src
        preg_match('/src=["\']([^"\']+)["\']/i', $img, $src_match);
        if (!$src_match) return $img;

        // Obtener dimensiones del archivo
        $attachment_id = attachment_url_to_postid($src_match[1]);
        if (!$attachment_id) return $img;

        $metadata = wp_get_attachment_metadata($attachment_id);
        if (!$metadata) return $img;

        $width = $metadata['width'];
        $height = $metadata['height'];

        // Insertar dimensiones
        return str_replace('<img', "<img width=\"{$width}\" height=\"{$height}\"", $img);
    }, $content);
});

#Resumen

Los errores de dimensiones de imagen y CLS son problemas comunes pero fácilmente soluciónables:

1. Siempre incluya width y height en etiquetas <img>
2. Use aspect-ratio en CSS para contenedores de imágenes responsivas
3. Suba imágenes de al menos 1200px para elegibilidad en Google Discover
4. Nunca aplique lazy loading a la imagen LCP
5. Audite regularmente con PageSpeed Insights y Chrome DevTools

Estas correcciones son de las más impactantes que puede hacer para mejorar sus Core Web Vitals y la experiencia del usuario.

Conozca más sobre los servicios de SEO WordPress y el desarrollo WordPress en WPPoland.