Stack de Optimización de Imágenes para WordPress

Por qué la optimización de imágenes importa más que nunca en 2026

Las imágenes siguen siendo 60-70% de los bytes descargados en una página WordPress típica. A pesar de mejoras en bundlers JS y CSS moderno, los bytes de imagen dominan.

Los Core Web Vitals de Google (especialmente LCP — Largest Contentful Paint) son altamente dependientes del rendimiento de imágenes. Una imagen hero de 2MB mata el LCP. Una imagen hero optimizada de 200KB te da un LCP rápido y beneficios de ranking.

Este artículo es nuestro stack completo de imágenes de 2026 para sitios WordPress.

Las cuatro capas de optimización de imágenes

Capa 1 — Conversión de formato

WebP y AVIF entregan archivos 30-50% más pequeños que JPEG/PNG en calidad equivalente. Todos los navegadores modernos soportan WebP; el soporte AVIF es ahora universal (Safari, Chrome, Firefox todos soportan).

Capa 2 — Sirviendo responsivo

Elementos <img srcset="..."> y <picture> entregan imágenes apropiadamente dimensionadas a cada dispositivo. El core de WordPress maneja esto automáticamente cuando configuras los tamaños de imagen correctamente.

Capa 3 — Lazy loading

Las imágenes bajo el fold no deberían cargar hasta que el usuario haga scroll cerca de ellas. El core de WordPress soporta loading="lazy" desde 5.5.

Capa 4 — Entrega CDN

Imágenes servidas desde POPs edge cerca de visitantes. Cae latencia de 200ms a 20ms.

Capa 1 — Convirtiendo a WebP/AVIF

Opción A: en upload (vía plugin)

Plugins que desplegamos:

Imagify — auto-convierte en upload, mantiene originales como backup. Tier gratis cubre ~25MB/mes
EWWW Image Optimizer — conversión local, no se necesita llamada API
ShortPixel Adaptive Images — convierte Y sirve vía su CDN
Smush Pro — la opción de WPMU, set de características más amplio

Para sitios bajo 1000 imágenes, el tier gratis de Imagify es suficiente. Para sitios más grandes, ShortPixel o EWWW.

Opción B: en CDN (no se necesita plugin)

Algunos CDNs hacen conversión de formato on-the-fly:

BunnyNet + Bunny Optimizer — añade WebP/AVIF para URLs de imagen basado en header Accept
Cloudflare Polish — plan Pro; convierte en petición
Fastly Image Optimizer — add-on premium

La conversión a nivel CDN es conveniente porque no almacenas originales WebP/AVIF. El CDN maneja la negociación de formato. Primera-petición ligeramente más lenta (CDN convierte y cachea).

Opción C: en build (para estático o híbrido)

Si usas Astro, Next.js, o un proceso de build, la conversión de imágenes ocurre una vez en tiempo de build. La mayoría de sitios WordPress puros no tienen paso de build.

Capa 2 — Imágenes responsive

wp_get_attachment_image() de WordPress automáticamente genera atributos srcset y sizes. Mientras tu tema use estas funciones (no tags <img> raw), el sirvido responsive funciona.

Para imágenes custom vía Advanced Custom Fields:

$image_id = get_field('hero_image');
echo wp_get_attachment_image(
    $image_id,
    'large',  // tamaño
    false,
    array(
        'class' => 'hero-image',
        'sizes' => '(max-width: 768px) 100vw, 1200px',
    )
);

Para imágenes background en CSS, no puedes usar srcset directamente. Usa la función CSS image-set():

.hero {
    background-image: url('hero-1x.webp');
    background-image: image-set(
        url('hero-1x.webp') 1x,
        url('hero-2x.webp') 2x
    );
}

Tamaños de imagen — elige intencionalmente

WordPress genera muchos tamaños de imagen por defecto más más de tu tema. Cada tamaño es una copia de cada imagen subida. Costo de almacenamiento y procesamiento.

En tu functions.php del tema:

// Remueve tamaños default que no usas
add_filter('intermediate_image_sizes', function($sizes) {
    return array_diff($sizes, ['medium_large', '1536x1536', '2048x2048']);
});

// Añade solo tamaños que tu tema usa
add_image_size('card-thumb', 400, 300, true);   // hard crop
add_image_size('hero', 1600, 900, true);
add_image_size('hero-mobile', 800, 600, true);

Corre wp media regenerate tras cambiar tamaños para actualizar imágenes existentes.

Capa 3 — Lazy loading correctamente

WordPress 5.5+ añade loading="lazy" a la mayoría de imágenes automáticamente. Pero hay matices.

Las imágenes sobre el fold NO deberían lazy load

La imagen hero es lo que los usuarios ven inmediatamente. Si la loading="lazy", el LCP sufre. El core de WordPress intenta detectar esto y salta lazy en la primera imagen, pero no es perfecto.

Fuerza eager loading para imágenes hero:

echo wp_get_attachment_image(
    $hero_id,
    'hero',
    false,
    array('loading' => 'eager', 'fetchpriority' => 'high')
);

fetchpriority="high" es un atributo 2023+ que le dice al navegador priorizar la descarga de esta imagen.

Las imágenes bajo el fold siempre deberían lazy load

El comportamiento default WordPress es correcto aquí. Solo verifica que tu tema no lo esté deshabilitando.

Evita lazy-loading imágenes background

Las imágenes background CSS no pueden ser lazy-loaded nativamente. Si debes lazy-loadarlas, usa JS Intersection Observer — pero considera si la imagen debería ser un <img> real en su lugar.

Capa 4 — Entrega CDN de imágenes

Una vez existan imágenes optimizadas, sírvelas desde un CDN.

Cloudflare

Si tu dominio está en Cloudflare, las URLs de imagen ya van a través de Cloudflare. Habilita:

Polish (plan Pro) — auto conversión WebP
Mirage (plan Pro) — adapta imágenes por velocidad de conexión
Auto Minify HTML — quita atributos innecesarios de tags <img>

BunnyNet

Usa el plugin Bunny WordPress para reescribir URLs de imagen a tu URL Bunny CDN:

URL Origen:  https://yoursite.com/wp-content/uploads/2026/01/hero.jpg
URL CDN:     https://yoursite.b-cdn.net/wp-content/uploads/2026/01/hero.jpg

Con Bunny Optimizer ($9.50/mes), Bunny convierte a WebP/AVIF basado en el header Accept.

Fastly

Fastly Image Optimizer toma parámetros vía query string de URL:

https://yoursite.com/hero.jpg?width=800&height=600&format=webp

Esto es poderoso para resizing dinámico pero requiere más cambios de código.

Gotcha lazy loading + CDN: placeholder 1x1

Algunos plugins lazy-load (como a3 Lazy Load) reemplazan el src con un placeholder 1x1 hasta que la imagen scrollee a vista. Esto funciona pero causa un flash. El loading="lazy" nativo no tiene este problema.

Usa loading="lazy" nativo siempre que sea posible. Evita plugins que re-implementan lazy loading mal.

El stack completo de imágenes que desplegamos

Nuestro setup recomendado para sitios WordPress nuevos en 2026:

Plugin de upload: Imagify (auto-convierte a WebP, mantiene originales)
Tema: usa wp_get_attachment_image() en todas partes, tamaños de imagen custom para cada template
Imágenes sobre fold: loading="eager" fetchpriority="high"
Bajo fold: loading="lazy" nativo (WordPress maneja)
CDN: Cloudflare para sitios blog/marketing, BunnyNet para sitios image-heavy
Optimización de imágenes CDN: Cloudflare Polish (si Pro) o Bunny Optimizer

Midiendo rendimiento de imágenes

Antes y después, corre:

# Lighthouse CLI
npm install -g lighthouse
lighthouse https://yoursite.com/ --output html --output-path ./report.html

# Enfócate en:
# - Largest Contentful Paint (meta: <2.5s)
# - Cumulative Layout Shift (meta: <0.1)
# - Total bytes downloaded (desglose de imágenes)

Para páginas específicas, usa WebPageTest.org. Muestra tamaños de imagen individuales, formatos y timing de carga.

Errores comunes durante optimización de imágenes

Lazy loading la imagen hero — mata LCP
Subir imágenes 4000x3000 para un blog de 600px-ancho — bytes-en-el-cable que nadie ve
Olvidar regenerar tamaños tras add_image_size() — nuevo tamaño nunca se crea para uploads viejos
Cache CDN sin versionado — actualizaciones de imagen no propagan; usuarios ven versiones obsoletas

Cuándo llamar a un especialista

La optimización de imágenes es una palanca de rendimiento de alto apalancamiento. Rutinariamente entregamos reducción de peso de página de 30-50% en una auditoría de 2-4 horas + engagement de implementación.

Auditoría de optimización de imágenes como parte de nuestra recuperación de velocidad estándar. Para trabajo más amplio de rendimiento ve recuperación de velocidad.