¿Qué hace exactamente WordPress con las imágenes y el atributo sizes=’auto’?
A partir de la versión 6.7, WordPress ha introducido una nueva funcionalidad que afecta directamente a las etiquetas <img> que se insertan en el contenido. Ahora, de forma automática, WordPress añade el atributo: sizes="auto".
Además, inyecta una regla CSS en línea dentro del <head> de la página, que se ve así:
WordPress inyecta el atributo sizes=»auto» y un CSS inline para mejorar el espacio reservado a las imágenes y optimizar el Core Web Vitals (CLS).
Este estilo aplica a cualquier imagen que tenga sizes="auto", asignándole un tamaño intrínseco de 3000×1500 píxeles para reservar espacio mientras carga la imagen real. La intención detrás de esto es mejorar el cumulative layout shift (CLS) en Core Web Vitals, es decir, evitar que los elementos de la página se desplacen una vez que la imagen se carga.
Vista del atributo sizes=»auto» aplicado a una etiqueta <img> en WordPress, que permite adaptar el tamaño de imagen según el ancho del dispositivo.
⚠️ ¿Es esto un hackeo o malware?
Al inspeccionar el código fuente de su web tras la actualización, se han encontrado con esta regla y han pensado que alguien había inyectado código malicioso.
Sin embargo, no hay motivo para alarmarse. Este estilo proviene del núcleo de WordPress y forma parte de una iniciativa para mejorar el rendimiento visual de los sitios.
El problema aparece cuando esta funcionalidad interfiere con el diseño definido en el tema o con los estilos que aplica un constructor visual como Elementor, Divi o Gutenberg.
¿Por qué esto puede afectar el diseño de tu tema?
Aunque la intención de WordPress es positiva —mejorar la experiencia de carga visual—, en la práctica este cambio puede tener efectos secundarios no deseados, sobre todo en sitios con:
- Temas personalizados o muy estilizados.
- Diseños pixel perfect que dependen de tamaños de imagen específicos.
- Constructores visuales que ya gestionan el sizes o el espacio reservado.
- Estilos CSS propios que no esperan este nuevo comportamiento.
Cuando WordPress fuerza el uso de sizes="auto" junto con una regla CSS que reserva un espacio de 3000×1500 píxeles, las imágenes pueden aparecer:
- Exageradamente grandes o pequeñas.
- Fuera de proporción con el resto del contenido.
- Mal alineadas, generando espacios en blanco o superposición con otros elementos.
Esto sucede porque ese tamaño intrínseco predeterminado puede no tener nada que ver con el tamaño real de tus imágenes ni con el diseño de tu tema. Y si tu CSS no está preparado para sobrescribir esa regla, el resultado es una web visualmente rota.
Por suerte, puedes recuperar el comportamiento anterior con una única línea de código, que desactiva esta funcionalidad sin afectar otras partes del sistema.
La solución rápida: desactiva la funcionalidad con una línea de código
Si este nuevo comportamiento de WordPress está afectando la presentación de tus imágenes, puedes recuperar el comportamiento anterior desactivando la generación automática del atributo sizes=»auto».
Para hacerlo, simplemente utiliza el filtro wp_img_tag_add_auto_sizes de esta forma:
add_filter('wp_img_tag_add_auto_sizes', '__return_false');Esta línea utiliza un filtro nativo de WordPress que permite detener la inclusión automática del atributo sizes en las imágenes.
¿Qué hace exactamente esta línea?
- add_filter() es una función de WordPress que permite modificar el comportamiento predeterminado.
- ‘wp_img_tag_add_auto_sizes’ es el filtro específico que añade el sizes=»auto».
- ‘__return_false’ le dice a WordPress que no debe añadir esa funcionalidad.
El resultado es que WordPress dejará de incluir el atributo sizes="auto" en las etiquetas <img>, y como consecuencia, ya no se inyectará la regla CSS conflictiva que mencionamos antes.
Así de simple: una línea, un cambio, problema resuelto.
¿Dónde debo colocar este filtro?
La línea de código que vimos en el apartado anterior necesita estar en un lugar donde WordPress la ejecute correctamente cada vez que se cargue tu sitio.
Aquí te dejo las opciones más comunes y recomendadas:
Opción 1: En el archivo functions.php de tu tema hijo
Es la opción más sencilla si estás usando un tema hijo. Solo tienes que abrir el archivo functions.php y añadir la línea al final del archivo:
add_filter('wp_img_tag_add_auto_sizes', '__return_false');Opción 2: Crear un plugin personalizado
Si prefieres mantener tus funciones personalizadas fuera del tema (recomendado en sitios más complejos o mantenibles), puedes crear un pequeño plugin con este filtro.
- Entra en la carpeta wp-content/plugins/.
- Crea un archivo llamado desactivar-sizes-auto.php (o el nombre que prefieras).
- Añade el código que me muestro más abajo.
- Guarda el archivo y actívalo desde el panel de Plugins en el escritorio de WordPress.
<?php
/*
Plugin Name: Desactivar sizes="auto"
Description: Elimina el atributo sizes="auto" de las imágenes en WordPress 6.7.1+
*/
add_filter('wp_img_tag_add_auto_sizes', '__return_false');Opción 3: Usar un plugin de fragmentos de código
Si no quieres tocar archivos directamente, puedes instalar un plugin como Code Snippets, que te permite añadir funciones personalizadas de forma segura desde el administrador de WordPress.
Solo tienes que crear un nuevo fragmento, pegar la línea, y asegurarte de que esté activo.
Cualquiera de estas tres opciones es válida. Lo importante es no olvidar que este código debe ejecutarse en el hook adecuado, lo cual ya ocurre automáticamente si lo colocas en alguno de estos contextos.
¿Afecta esto al rendimiento o SEO de las imágenes?
Una de las primeras dudas que surgen al desactivar una funcionalidad introducida por WordPress es:
¿Estoy comprometiendo el rendimiento o el SEO de mi sitio?
La respuesta corta es: no, si tu tema ya gestiona correctamente los tamaños de imagen.
¿Qué mejora WordPress con sizes=’auto’?
La inclusión de sizes=»auto» y la regla CSS asociada busca reducir el desplazamiento de contenido (CLS) durante la carga. Esto forma parte de las métricas de Core Web Vitals, que Google utiliza como factor de posicionamiento.
En teoría, ayuda a reservar espacio para las imágenes antes de que se descarguen completamente, evitando que el contenido “salte” cuando la imagen aparece.
¿Cuándo es seguro desactivarlo?
Puedes desactivar esta funcionalidad sin afectar negativamente al SEO si:
- Tu tema ya define correctamente los atributos width, height o sizes en las imágenes.
- Utilizas un constructor visual que gestiona estos atributos automáticamente.
- No estás experimentando problemas de CLS en tus mediciones de rendimiento (por ejemplo, en PageSpeed o Lighthouse).
Consejo experto: Puedes probar tu sitio con PageSpeed Insights antes y después de aplicar el filtro. Si los valores de CLS no cambian o mejoran, no hay ningún riesgo en desactivar esta funcionalidad.
¿Deberías aplicar esta solución en tu sitio?
A continuación, te dejo una tabla comparativa para ayudarte a decidir si te conviene desactivar el atributo sizes=»auto» o mantenerlo activo:
Aplica el filtro __return_false si… | Mantén sizes="auto" si… |
|---|---|
| Las imágenes se ven alteradas tras actualizar WordPress. | No has notado ningún cambio visual en tu sitio. |
| Tu tema o constructor ya gestiona bien los tamaños de imagen. | El cambio mejora el CLS y no afecta el diseño. |
| El diseño se rompe, aparecen márgenes o deformaciones. | Usas un tema que se beneficia de sizes="auto". |
| Prefieres controlar los tamaños con CSS propio. | No estás familiarizado con los ajustes del tema o los filtros. |
Recuerda que esta funcionalidad no es un error, pero puede entrar en conflicto con diseños personalizados. Si decides desactivarla, lo puedes hacer de forma segura con una simple línea de código, como vimos en los apartados anteriores.
¿Qué deberías hacer ahora con sizes=’auto’?
Como has visto, esta nueva funcionalidad de WordPress no es un error, sino una mejora orientada al rendimiento visual. Sin embargo, su implementación automática puede causar conflictos en sitios con diseños personalizados o temas que ya gestionan correctamente los atributos de imagen.
Por eso, es importante que evalúes el comportamiento real en tu sitio y tomes la decisión más adecuada: mantener la funcionalidad si mejora tu CLS, o desactivarla si altera el diseño y complica la experiencia visual.
Y ahora que sabes qué causa el problema y cómo solucionarlo, puedes decidir si mantener o desactivar esta funcionalidad según tu proyecto.
