Aprende a establecer un plan de diseño o a eliminar todas las redimensiones automáticas de WordPress
WordPress por defecto para adaptar las imágenes a distintos dispositivos, genera un duplicado de las imágenes en diferentes tamaños, para luego configurarlo automáticamente con los atributos srcset y sizes de la etiqueta picture.
No obstante, aunque puede llegar a mejorar el rendimiento de la web, es posible que esto no siempre sea conveniente para todos los proyectos tal y cómo está configurado por defecto.
Antes de meternos en faena, conviene saber qué ha evolucionado en WordPress en los últimos años respecto al manejo de imágenes:
Esto cambia bastante el panorama. Ahora la prioridad está en servir el formato correcto (WebP/AVIF) más que en tener mil tamaños diferentes. Un WebP bien optimizado de 1200px puede pesar menos que un JPEG de 600px mal comprimido.
Banner promocionado:
Para que la redimensión funcione de una forma correcta. En primer lugar la imagen que se debe subir al back-end debe ser una imagen con una dimensión grande para que siempre se recorte en todos los formatos correspondientes.
En segundo lugar. Es posible que por las opciones que tenemos en WordPress en Ajustes > Medios nos sean insuficientes.
Si ocurre eso y queremos tener unas dimensiones más específicas y más opciones que miniatura, medio y grande, podemos modificarlo.
Algunos ejemplos prácticos actualizados para los requisitos de 2026:
Lo ideal es ajustar manualmente cada imagen para cada una de las situaciones. Pero no siempre se tiene un equipo de diseño a mano, o no siempre se tiene tiempo para todo.
Por lo que se puede buscar un tamaño y diseñar un protocolo de diseño para las imágenes de la web con márgenes de seguridad que cuando se haga el recorte funcione bien en todos los escenarios contemplados.
Si tenemos esto. En realidad solo nos falta el código para que se consigan las dimensiones que queremos además de las 3 opciones que da WordPress por defecto.
La opción más sencilla sería esta:
add_image_size( 'og-share', 1200, 630, true );
add_image_size( 'discover', 1200, 1200, true );
add_image_size( 'hero', 1920, 1080, true );
add_image_size( 'producto', 800, 800, true );
El true indica que se recorte la imagen si es necesario (crop). Mientras que lo que está entre comillas en color azul claro es el nombre que nosotros queramos designarle a ese tipo de miniatura.
En el improbable caso de que no funcione aun habiendo subido una imagen con las dimensiones suficientes, existe un plan B para hacer lo mismo de una forma más agresiva. Aunque solo la emplearía como plan B, ya que la primera opción debería ser suficiente.
function force_image_sizes( $metadata, $attachment_id ) {
$sizes = array(
'og-share' => array( 1200, 630 ),
'discover' => array( 1200, 1200 ),
'hero' => array( 1920, 1080 )
);
foreach ( $sizes as $size_name => $dimensions ) {
$resized = image_make_intermediate_size( get_attached_file( $attachment_id ), $dimensions[0], $dimensions[1], true );
if ( $resized ) {
$metadata['sizes'][$size_name] = $resized;
}
}
return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'force_image_sizes', 10, 2 );
Si este tipo de código te resulta complejo, puedes pedirle a la IA que te lo genere explicándole exactamente qué tamaños necesitas y para qué los vas a usar.
¿Por qué importa tanto esto ahora? Porque en el 73% de las páginas móviles, el elemento LCP (Largest Contentful Paint) es una imagen. Si tu imagen hero tarda en cargar, tu LCP se dispara y Google te penaliza en Core Web Vitals.
Para las imágenes críticas (hero, above the fold), además de tener el tamaño correcto, puedes usar el atributo fetchpriority="high" para indicarle al navegador que las cargue con prioridad:
<img src="hero.webp" fetchpriority="high" width="1920" height="1080" alt="...">
El atributo fetchpriority es especialmente útil cuando tienes varias imágenes en el viewport inicial y quieres que el navegador sepa cuál es la importante. Puedes usar:
fetchpriority="high": Para la imagen LCP (hero, banner principal).fetchpriority="low": Para imágenes secundarias que están visibles pero no son prioritarias.fetchpriority="auto": El valor por defecto, deja que el navegador decida.Y para imágenes que no están en el viewport inicial, deja que el lazy loading nativo haga su trabajo. WordPress ya añade loading="lazy" automáticamente desde la versión 5.5.
Más importante que tener 15 tamaños diferentes es servir las imágenes en el formato correcto. La comparativa de compresión actual:
¿Y la compatibilidad? AVIF ya funciona en todos los navegadores modernos: Chrome, Firefox, Safari, Edge y Opera. Solo quedan fuera navegadores muy antiguos que a estas alturas representan un porcentaje residual del tráfico.
WordPress 6.5+ soporta AVIF de forma nativa (si tu servidor tiene las librerías necesarias como Imagick con libavif). Pero la forma más práctica de implementarlo es con plugins que conviertan automáticamente y sirvan el formato óptimo según el navegador:
Si prefieres control total, puedes servir múltiples formatos con la etiqueta <picture>:
<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" width="1200" height="630" alt="Descripción" loading="lazy">
</picture>
En cualquier caso, aunque no es una mala opción. Esto no siempre resulta eficiente.
En muchas ocasiones hay imágenes que se ven de forma eficiente en casi todos los dispositivos, sin consumir excesivos recursos porque se realiza un buen trabajo de tratado de imágenes desde el punto de vista de SEO, y esta automatización (mientras no exista la opción de categorías de imágenes en WordPress de forma nativa) puede resultar ineficiente y desembocar en un despilfarro de espacio en el Disco Duro.
Especialmente si usas un plugin de optimización que convierte a WebP/AVIF, cada tamaño de imagen se multiplica por los formatos generados. Si tienes 10 tamaños y 3 formatos (JPEG, WebP, AVIF), cada imagen que subes genera 30 archivos. Eso es un problema real de almacenamiento.
Por lo que se puede hacer esta configuración en Ajustes > Medios para que WordPress no haga redimensión de las imágenes que se suban.
Antes de eliminar toda la redimensión, puedes optar por eliminar solo los tamaños que no necesitas. Muchos temas y plugins añaden sus propios tamaños que quizás no uses:
// Eliminar tamaños de imagen que no necesitas
function remove_unused_image_sizes() {
remove_image_size( 'medium_large' ); // 768px añadido por WordPress
remove_image_size( '1536x1536' ); // Añadido en WP 5.3
remove_image_size( '2048x2048' ); // Añadido en WP 5.3
// Añade aquí otros tamaños de tu tema/plugins que no uses
}
add_action( 'init', 'remove_unused_image_sizes' );
// O usar el filtro para más control
add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
unset( $sizes['medium_large'] );
unset( $sizes['1536x1536'] );
unset( $sizes['2048x2048'] );
return $sizes;
});
La configuración de desactivar redimensión no tiene un carácter retroactivo. Por lo que si el proyecto lleva tiempo redimensionando imágenes y ya no se quiere hacer, hay que realizar un poco de limpieza.
En primer lugar (a menos que trabajes en el aire en vez de en un entorno de prueba), recomendaría eliminar todas las imágenes redimensionadas (excepto la original). Tarea que se puede automatizar de una forma relativamente sencilla con plugins como Media Cleaner o mediante scripts en el servidor.
En segundo lugar. Las imágenes eliminadas van a tener el inconveniente de no existir y arrojar 404 si se están llamando desde algún lugar en la web. Aunque sería recomendado un reemplazo en la base de datos, es necesario tener amplios conocimientos y práctica para hacerlo de forma eficiente y no cargarnos la web. Así que se puede solucionar de forma sencilla con una redirección.
RewriteEngine On
# Redirige imágenes con patrón -NUMxNUM a la original
RewriteRule ^(.+)-\d{2,4}x\d{2,4}\.(jpg|jpeg|png|webp)$ $1.$2 [R=301,NC,L]
location ~ ^(.+)-\d{2,4}x\d{2,4}\.(jpg|jpeg|png|webp)$ {
rewrite ^(.+)-\d{2,4}x\d{2,4}\.(jpg|jpeg|png|webp)$ $1.$2 permanent;
}
He actualizado las regex para incluir WebP y para capturar tamaños de 2 a 4 dígitos (desde 10px hasta 9999px).
Si necesitas hacer modificaciones masivas en las etiquetas de imagen de tu WordPress sin tocar cada plantilla individualmente, el buffer de salida de PHP es tu mejor aliado.
Con el buffer puedes interceptar todo el HTML antes de que se envíe al navegador y modificarlo a tu antojo. Por ejemplo, puedes:
loading="lazy" a todas las imágenes que no lo tengan.fetchpriority="high" a la primera imagen de cada página automáticamente.<img> a <picture> con fallbacks.width y height a imágenes que no las tengan (evitando CLS).Un ejemplo práctico para añadir fetchpriority a la primera imagen de cada página:
function buffer_modificar_imagenes($html) {
// Añadir fetchpriority="high" solo a la primera imagen
$contador = 0;
$html = preg_replace_callback(
'/<img([^>]*)>/i',
function($matches) use (&$contador) {
$contador++;
if ($contador === 1 && strpos($matches[0], 'fetchpriority') === false) {
return '<img fetchpriority="high"' . $matches[1] . '>';
}
return $matches[0];
},
$html
);
return $html;
}
function iniciar_buffer() {
ob_start('buffer_modificar_imagenes');
}
function finalizar_buffer() {
if (ob_get_length()) ob_end_flush();
}
add_action('template_redirect', 'iniciar_buffer');
add_action('shutdown', 'finalizar_buffer');
Este enfoque es especialmente potente cuando tienes que hacer cambios retroactivos en webs grandes sin modificar cientos de plantillas o entradas.
Si la programación se te hace engorrosa, recuerda que siempre puedes ayudarte de IA para modificar WordPress sin saber programar. Simplemente describe lo que quieres conseguir y la IA te generará el código.
fetchpriority="high" y cargar rápido.
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!