Optimización de medios WordPress con WebP y AVIF

Mariusz Szatkowski

ES

5.00 /5 - (30 votes )

Última verificación: 1 de mayo de 2026

5min de lectura

Guía

Core Web Vitals

#Estrategia avanzada de optimización de medios en WordPress

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

Las imágenes representan tipicamente entre el 50% y el 70% del peso total de una página web. Optimizar como WordPress maneja los medios no es solo una mejora de rendimiento: es la palanca más grande que tiene para mejorar los Core Web Vitals y la experiencia del usuario.

En esta guía, exploramos las técnicas nativas de WordPress para optimización de medios, desde filtros PHP hasta almacenamiento de objetos empresarial, sin depender de plugins pesados.

#Soporte nativo de formatos modernos

WordPress ha evolucionado significativamente en su soporte de formatos de imagen:

WordPress 5.8+: Soporte nativo para subida y servicio de imágenes WebP
WordPress 6.5+: Soporte nativo para AVIF, ofreciendo compresion aun mejor
WordPress 6.7+: Generación automática de formatos multiples desde una sola subida

Requisito del servidor: Su instalación PHP debe tener las extensiónes GD o Imagick compiladas con soporte para estos formatos. Verifique en Herramientas > Salud del sitio.

#Control de calidad de compresion

WordPress comprime imágenes JPEG a una calidad del 82% por defecto. Para muchos casos de uso, especialmente miniaturas, esto es excesivo.

// Reducir calidad JPEG a 75% para miniaturas
add_filter('jpeg_quality', function($quality) {
    return 75;
});

// Control más granular por contexto
add_filter('wp_editor_set_quality', function($quality, $mime_type) {
    if ($mime_type === 'image/jpeg') {
        return 75;
    }
    if ($mime_type === 'image/webp') {
        return 80;
    }
    return $quality;
}, 10, 2);

Ahorro tipico: Reducir la calidad JPEG de 82 a 75 ahorra un 15-25% de tamaño de archivo con diferencia visual minima.

#Gestión de tamaños de imagen

Cada imagen subida a WordPress puede generar más de 10 variaciones de tamaño. La mayoria de los temas solo usan 3-4 de estos tamaños, desperdiciando espacio en disco y tiempo de procesamiento.

// Eliminar tamanos de imagen no utilizados
add_filter('intermediate_image_sizes_advanced', function($sizes) {
    // Eliminar tamanos que su tema no usa
    unset($sizes['medium_large']); // 768px - raramente usado
    unset($sizes['1536x1536']);     // Doble de large
    unset($sizes['2048x2048']);     // Doble de 1536

    return $sizes;
});

// Agregar tamanos personalizados que su tema realmente necesita
add_image_size('hero', 1920, 800, true);
add_image_size('card', 600, 400, true);
add_image_size('avatar', 150, 150, true);

#Lazy loading inteligente

WordPress agrega automáticamente loading="lazy" a todas las imágenes desde la versión 5.5. Sin embargo, esto puede ser contraproducente para la imagen hero (LCP):

// Desactivar lazy loading para la primera imagen (probable LCP)
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    // Si es la primera imagen en el contenido, cargar eager
    static $first_image = true;
    if ($first_image && $context === 'the_content') {
        $first_image = false;
        return 'eager';
    }
    return $value;
}, 10, 3);

// Agregar fetchpriority a la imagen hero
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
    if (isset($attr['loading']) && $attr['loading'] === 'eager') {
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 2);

#Responsive images con srcset

WordPress genera automáticamente el atributo srcset para imágenes, permitiendo que el navegador elija el tamaño optimo. Asegurese de que su tema aprovecha esto correctamente:

// Personalizar los tamanos disponibles en srcset
add_filter('wp_calculate_image_srcset', function($sources, $size_array, $image_src) {
    // Filtrar fuentes que sean demasiado pequenas o demasiado grandes
    foreach ($sources as $width => $source) {
        if ($width < 300 || $width > 2400) {
            unset($sources[$width]);
        }
    }
    return $sources;
}, 10, 3);

#Almacenamiento de objetos para sitios a escala

Cuando la biblioteca de medios supera los 10GB, es hora de considerar almacenamiento de objetos externo (Amazon S3, Google Cloud Storage, DigitalOcean Spaces):

Beneficios:

Escalado sin estado: Los servidores web no almacenan archivos multimedia, facilitando el escalado horizontal
CDN integrado: La mayoria de servicios de almacenamiento de objetos incluyen distribucion CDN
Respaldos automáticos: Redundancia incorporada protege contra perdida de datos
Costos predecibles: Pago por almacenamiento y transferencia usados

Plugins recomendados:

WP Offload Media (Delicious Brains): La opción más robusta y probada
Media Cloud (Interfacelab): Alternativa gratuita con buenas funcionalidades

// Configuración en wp-config.php para S3
define('AS3CF_SETTINGS', serialize([
    'provider' => 'aws',
    'access-key-id' => getenv('AWS_ACCESS_KEY_ID'),
    'secret-access-key' => getenv('AWS_SECRET_ACCESS_KEY'),
]));

#Regeneracion de miniaturas

Despues de cambiar tamaños de imagen o calidad de compresion, necesita regenerar las miniaturas existentes:

## Via WP-CLI (método recomendado)
wp media regenerate --yes

## Solo imagenes específicas
wp media regenerate --yes --image_size=thumbnail

## Solo imagenes sin miniaturas
wp media regenerate --only-missing --yes

#Auditoria de la biblioteca de medios

Periodicamente, audite su biblioteca de medios para identificar problemas:

## Encontrar imagenes huerfanas (en disco pero no en BD)
wp media import /var/www/html/wp-content/uploads/ --dry-run

## Ver tamaño total de la biblioteca
du -sh wp-content/uploads/

## Encontrar archivos grandes (>1MB)
find wp-content/uploads/ -type f -size +1M -name "*.jpg" | wc -l

#Flujo de trabajo de optimización completo

Antes de subir: Redimensione imágenes a un maximo de 2400px de ancho en su editor de imágenes
Durante la subida: WordPress comprime y genera tamaños automáticamente con sus filtros personalizados
En la salida: Los atributos srcset, loading y fetchpriority aseguran carga optima
Monitoreo: Verifique Core Web Vitals regularmente para detectar regresiones

#Metricas de rendimiento esperadas

Con optimización completa de medios, espere:

Reduccion del 40-60% en tamaño de página
Mejora del 20-30% en LCP
Ahorro del 30-50% en espacio de disco
Reduccion del 25% en costos de ancho de banda

La optimización de medios es la mejora de rendimiento con mejor retorno de inversión para la mayoria de sitios WordPress. Implemente estas técnicas y vera resultados inmediatos en sus Core Web Vitals.

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