Medios en WordPress: imágenes, metadatos, rendimiento y SEO

Mariusz Szatkowski

Última verificación: 22 de septiembre de 2026

8 min de lectura

Guía

Desarrollador full-stack

Core Web Vitals

Las imágenes son el asesino #1 del rendimiento en sitios WordPress. En 2026, con Core Web Vitals como factor de ranking, un sitio lento significa pérdida de ingresos. Sin embargo, la mayoría de los sitios WordPress aun sirven JPEGs inflados y crean páginas de “adjuntos” inútiles para cada imagen subida.

Conozca más sobre la optimización de velocidad WordPress en WPPoland. Esta guía de ingeniería cubre la pila completa de optimización de medios para WordPress moderno.

#Cómo desactivar las páginas de adjuntos en WordPress

Por defecto, WordPress crea una página dedicada para cada imagen que sube. Ejemplo: susitio.com/nombre-imagen/

Por qué esto es malo:

Confusion SEO: Google indexa estas páginas vacías en lugar de su contenido real
Presupuesto de rastreo desperdiciado: Googlebot pierde tiempo en páginas inútiles
Experiencia de usuario: Los usuarios que hacen clic en imágenes llegan a páginas sin salida

#Redirigir o devolver 404 en las páginas de adjuntos

Método 1: Redirigir al post padre

add_action( 'template_redirect', function() {
    if ( is_attachment() ) {
        global $post;
        if ( $post && $post->post_parent ) {
            wp_redirect( get_permalink( $post->post_parent ), 301 );
            exit;
        }
    }
} );

Método 2: Devolver 404

add_action( 'template_redirect', function() {
    if ( is_attachment() ) {
        global $wp_query;
        $wp_query->set_404();
        status_header( 404 );
    }
} );

#AVIF o WebP en WordPress

JPEG es de 1992. Es hora de avanzar.

#¿Cuánto pesan menos WebP y AVIF que JPEG?

JPEG: 100KB línea base
WebP: 60KB (40% más pequeño, buen soporte de navegadores)
AVIF: 40KB (60% más pequeño, excelente calidad)

#Habilitando AVIF en WordPress

WordPress 6.5+ soporta la subida de AVIF nativamente, pero necesita habilitarlo:

add_filter( 'wp_image_editors', function( $editors ) {
    array_unshift( $editors, 'WP_Image_Editor_Imagick' );
    return $editors;
} );

add_filter( 'image_editor_output_format', function( $formats ) {
    $formats['image/jpeg'] = 'image/avif';
    $formats['image/png'] = 'image/avif';
    return $formats;
} );

Advertencia: Esto convierte TODAS las subidas. Pruebe exhaustivamente.

#Ventajas de AVIF sobre WebP

AVIF no es solo un formato más pequeño: ofrece ventajas técnicas significativas:

Mejor compresión de gradientes: Los degradados suaves se mantienen limpios sin artefactos de banda
Soporte de HDR: Soporta contenido High Dynamic Range de forma nativa
Mejor rendimiento en imágenes con texto: El texto superpuesto en imágenes se mantiene nítido
Transparencia: Soporta canal alfa como PNG pero con compresión superior

#Lazy loading en WordPress sin Layout Shift

WordPress 5.5+ agrega loading="lazy" automáticamente. Pero puede optimizar aun más.

#¿Por qué el lazy loading nativo causa layout shift?

Carga imágenes cuando están en el viewport + un margen. Para imágenes hero, esto causa Layout Shift (mala puntuación CLS).

#Cómo excluir la primera imagen del lazy loading

add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'the_content' === $context ) {
        // No hacer lazy load de la primera imagen
        static $first_image = true;
        if ( $first_image ) {
            $first_image = false;
            return false;
        }
    }
    return $default;
}, 10, 3 );

#Cómo añadir fetchpriority high a la imagen destacada

En 2026, el atributo fetchpriority es esencial para indicar al navegador que imágenes cargar primero:

// Agregar fetchpriority="high" a la imagen hero
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    if ( is_singular() && has_post_thumbnail() ) {
        $thumbnail_id = get_post_thumbnail_id();
        if ( $attachment->ID === $thumbnail_id ) {
            $attr['fetchpriority'] = 'high';
            unset( $attr['loading'] ); // Eliminar lazy para imagen hero
        }
    }
    return $attr;
}, 10, 3 );

#Cómo usar srcset y sizes en WordPress

WordPress genera múltiples tamaños de imagen automáticamente. Asegúrese de usarlos:

// En su tema
the_post_thumbnail( 'large', [
    'sizes' => '(max-width: 600px) 100vw, 50vw'
] );

Esto le dice al navegador:

En móvil: usar ancho completo
En escritorio: usar 50% del ancho

El navegador descarga el tamaño óptimo.

#CDN de imágenes para WordPress

Para sitios de alto tráfico, descargue el procesamiento de imágenes a un CDN.

#Cloudflare Images vs Cloudinary vs imgix

Cloudflare Images: $5/mes por 100K imágenes
Cloudinary: Nivel gratuito disponible
imgix: Manipulación de imágenes en tiempo real vía parámetros URL

#Cómo servir imágenes de WordPress desde Cloudinary

add_filter( 'wp_get_attachment_url', function( $url, $post_id ) {
    $cloudinary_base = 'https://res.cloudinary.com/sunube/image/upload/';
    $path = wp_get_attachment_metadata( $post_id )['file'];
    return $cloudinary_base . 'f_auto,q_auto/' . $path;
}, 10, 2 );

#Cómo eliminar medios no utilizados en WordPress

Con el tiempo, su biblioteca de medios se llena de imágenes no utilizadas.

#Encontrar medios huerfaños

SELECT * FROM wp_posts
WHERE post_type = 'attachment'
AND ID NOT IN (
    SELECT meta_value FROM wp_postmeta
    WHERE meta_key = '_thumbnail_id'
);

Recomendación de plugin: Media Cleaner de Jordy Meow

#Cómo comprimir imágenes en WordPress

La compresión no se trata solo del tamaño de archivo: se trata de encontrar el equilibrio entre calidad y rendimiento.

#¿Qué calidad JPEG usar en WordPress?

Configuraciónes de calidad JPEG:

90-100: Casí sin compresión, archivos grandes (no recomendado)
80-89: Alta calidad, compresión moderada (bueno para fotos)
70-79: Equilibrio calidad/tamaño (recomendado para la mayoría de imágenes)
60-69: Perdida de calidad notable, archivos pequeños (usar con moderación)
Debajo de 60: Artefactos significativos (evitar)

Para WordPress, apunte a calidad 75-85 dependiendo del tipo de imagen.

#Cómo comprimir imágenes automáticamente al subirlas

/**
 * Comprimir automáticamente imagenes subidas
 */
add_filter('wp_handle_upload_prefilter', function($file) {
    if ($file['type'] === 'image/jpeg' || $file['type'] === 'image/png') {
        $image = wp_get_image_editor($file['file']);
        if (!is_wp_error($image)) {
            $image->set_quality(82);
            $image->save($file['file']);
        }
    }
    return $file;
});

#Herramientas de compresión por lotes

Línea de comandos (ImageMagick):

## Comprimir todos los JPEG en un directorio
find . -name "*.jpg" -exec magick {} -quality 82 {} \;

## Convertir a AVIF
magick input.jpg -quality 80 output.avif

Plugins de WordPress:

ShortPixel - Optimización automática, soporta AVIF
EWWW Image Optimizer - Gratuito, código abierto
Imagify - Basado en la nube, nivel gratuito disponible

#Cómo organizar la biblioteca de medios de WordPress

Una biblioteca de medios desordenada ralentiza su sitio y dificulta la gestión de contenido.

#Cómo nombrar los archivos de imagen

Malo:

IMG_1234.jpg
screenshot-2026-01-15.png
foto(1).jpg

Bueno:

hero-página-inicio-2026.avif
producto-laptop-dell-xps-15.jpg
equipo-miembro-juan-perez-retrato.jpg

#Cómo renombrar archivos automáticamente al subirlos

/**
 * Renombrar archivos subidos basándose en el título del post
 */
add_filter('wp_handle_upload_prefilter', function($file) {
    $pathinfo = pathinfo($file['name']);
    $extensión = $pathinfo['extensión'];

    // Obtener título del post si se sube a un post
    if (isset($_POST['post_id']) && $_POST['post_id']) {
        $post_title = get_the_title($_POST['post_id']);
        $sanitized = sanitize_file_name($post_title);
        $file['name'] = $sanitized . '-' . time() . '.' . $extensión;
    }

    return $file;
});

#Cómo medir el rendimiento de las imágenes en WordPress

No puede optimizar lo que no mide.

#Qué métricas de imágenes medir

Tamaño total de la biblioteca de medios
Tamaño promedio de imagen
Conteo de medios no utilizados

#Herramientas para medir el rendimiento de las imágenes

Google PageSpeed Insights:

Mide Core Web Vitals
Muestra oportunidades de optimización de imágenes
Proporciona recomendaciones específicas

GTmetrix:

Gráficos detallados de cascada
Muestra tiempos de carga de imágenes
Identifica oportunidades de optimización

#Fallback WebP y dirección de arte en WordPress

#Fallback WebP para navegadores antiguos

/**
 * Servir WebP con fallback JPEG
 */
function serve_webp_with_fallback($html, $post_id) {
    $webp_url = wp_get_attachment_image_url($post_id, 'full', false, ['format' => 'webp']);
    $jpeg_url = wp_get_attachment_image_url($post_id, 'full');

    if ($webp_url) {
        $html = '<picture>
            <source srcset="' . esc_url($webp_url) . '" type="image/webp">
            <img src="' . esc_url($jpeg_url) . '" alt="' . esc_attr(get_post_meta($post_id, '_wp_attachment_image_alt', true)) . '">
        </picture>';
    }

    return $html;
}
add_filter('wp_get_attachment_image', 'serve_webp_with_fallback', 10, 2);

#Imágenes responsivas con dirección de arte

A veces necesita diferentes recortes para diferentes tamaños de pantalla:

// Agregar tamaños de imagen personalizados
add_image_size('hero-mobile', 800, 600, true);
add_image_size('hero-tablet', 1200, 800, true);
add_image_size('hero-desktop', 1920, 1080, true);

#Errores comunes con imágenes en WordPress

#Subir imágenes a resolución completa

Problema: Subir imágenes de 4000x3000px cuando solo necesita 1200x900px.

Solución: Redimensione antes de subir o use los tamaños de imagen de WordPress.

#No usar imágenes destacadas para redes sociales

Problema: Usar imágenes de the_content() en lugar de imágenes destacadas para compartir en redes sociales.

Solución: Siempre establezca imágenes destacadas y use Open Graph:

// En header.php o vía plugin
$og_image = get_the_post_thumbnail_url(get_the_ID(), 'large');
echo '<meta property="og:image" content="' . esc_url($og_image) . '">';

#Texto alternativo ausente o genérico

Problema: Texto alt faltante o genérico dañina el SEO y la accesibilidad.

Solución: Siempre agregue texto alt descriptivo.

#Lista de verificación para optimizar medios en WordPress

Desactivar páginas de adjuntos (redirección 301 o 404)
Usar AVIF/WebP para archivos bastante más pequeños, en torno a un 50% con AVIF y un 25-34% con WebP
Carga diferida inteligente (excluir imágenes hero)
Aprovechar srcset para imágenes responsivas
Usar un CDN para optimización automática
Comprimir imágenes (calidad 75-85)
Organizar la biblioteca de medios (convenciones de nombres, estructura de carpetas)
Monitorizar rendimiento (PageSpeed Insights, GTmetrix)
Agregar texto alt apropiado (SEO y accesibilidad)
Limpiar medios huerfaños (mantenimiento regular)

#Objetivos de Core Web Vitals para imágenes

Largest Contentful Paint (LCP): < 2.5s
Cumulative Layout Shift (CLS): < 0.1
First Input Delay (FID): < 100ms
Tiempo de carga de imagen: < 1s en conexión 3G
Peso total de página: < 2MB (incluyendo imágenes)

Las imágenes deben cargar rápido, no primero. En 2026, con Core Web Vitals como factores de ranking, la optimización de imágenes no es opcional: es esencial para el SEO y la experiencia del usuario.