Cada vez que subes una imagen a la biblioteca de medios de WordPress, el sistema genera automáticamente varios tamaños de imagen recortados adicionales. Si tu sitio no los utiliza, estos archivos pueden ocupar espacio innecesario y aumentar el tamaño de las copias de seguridad del servidor.
En esta guía, te explicaré cuáles son los tamaños de imagen predeterminados, por qué WordPress los crea, cómo identificar los tamaños recortados adicionales y cómo evitar su generación con un simple fragmento de código.
Tamaños de imagen predeterminados en WordPress
A continuación, te muestro una tabla con los tamaños de imagen predeterminados en WordPress:
Como puedes ver, WordPress genera varios tamaños de imagen recortados automáticamente.
Esto significa que, cada vez que subes una imagen a tu sitio, WordPress puede generar hasta 7 versiones adicionales de la misma. Y estos son solo los tamaños predeterminados del sistema, sin contar los tamaños extra creados por temas y plugins.
Tamaños de imagen recortados creados por tu tema y plugins en WordPress
La mayoría de los temas clásicos de WordPress (no basados en bloques) no utilizan los tamaños predeterminados como thumbnail, medium y large. En su lugar, registran sus propios tamaños de imagen recortados para adaptarse mejor al diseño y estructura del tema.
Los plugins también pueden generar nuevos tamaños de imagen, especialmente aquellos diseñados para mostrar publicaciones o tipos de contenido personalizados. Algunos ejemplos son plugins para directorios, eventos, inmobiliarias, comercio electrónico, LMS o constructores de páginas.
Esto significa que tu sitio podría estar generando aún más tamaños de imagen recortados, lo que puede sobrecargar el servidor y aumentar el tamaño de las copias de seguridad.
Es recomendable revisar la documentación de tu tema y de los plugins instalados para verificar si están creando versiones innecesarias de las imágenes. Muchos temas y plugins bien desarrollados incluyen opciones para modificar o desactivar la generación de estos tamaños adicionales.
Más adelante en esta guía, te mostraré una solución sencilla basada en código para visualizar todos los tamaños de imagen registrados en tu sitio.
¿Por qué WordPress crea tamaños de imagen recortados?
Antes de explicar cómo evitar que WordPress genere tamaños de imagen recortados adicionales, es importante comprender por qué el sistema los crea. Estas son las principales razones:
- Carga más rápida: Las imágenes más pequeñas se cargan con mayor velocidad.
- Imágenes responsivas: WordPress genera diferentes tamaños para adaptarse a distintos dispositivos.
- Consistencia visual: Permite que todas las imágenes destacadas mantengan un tamaño uniforme.
- Pantallas de alta resolución: Se crean versiones optimizadas para pantallas retina y HDPI.
- Miniaturas y elementos personalizados: Se generan imágenes específicas para distintas secciones del sitio, según el tema o los plugins instalados.
- Rendimiento del servidor: Algunas versiones escaladas, como las imágenes «-scaled», ayudan a reducir la carga del servidor.
Configuración de los tamaños de imagen en WordPress
Si accedes a Ajustes > Medios en tu panel de WordPress, encontrarás opciones para definir tres de los tamaños predeterminados: Miniatura, Mediano y Grande.
Si estableces el ancho y alto en 0, evitarás que WordPress cree estas versiones adicionales. Esta es una de las primeras configuraciones recomendadas al instalar WordPress para reducir el consumo de almacenamiento y mejorar el rendimiento del sitio.
El umbral de tamaño de imagen en WordPress y cómo desactivarlo
Establecer los tamaños en 0 en la configuración de medios no es una solución completa para evitar que WordPress genere tamaños de imagen recortados. A continuación, te explico otro factor importante y cómo desactivarlo con código.
El umbral de tamaño de imagen en WordPress
Desde la versión 5.3, WordPress introdujo el Big Image Size Threshold, un límite que determina el tamaño máximo (ancho o alto) de una imagen antes de que se generen versiones adicionales. Por defecto, este umbral es 2560 píxeles.
Cuando subes una imagen que supera ese tamaño, WordPress la escala automáticamente y usa esta versión reducida como la más grande disponible. A partir de esa versión escalada, se generan los demás tamaños de imagen recortados definidos en tu sitio.
Si subes imágenes con un ancho o alto mayor a 2560 píxeles, WordPress creará varias versiones adicionales, ocupando espacio en el servidor. Para evitarlo, puedes desactivar o ajustar este umbral según tus necesidades.
Cómo gestionar los tamaños de imagen recortados en WordPress:
Desactivar el umbral de tamaño de imagen grande
Si deseas subir imágenes grandes sin que WordPress las redimensione ni cree versiones alternativas, puedes desactivar el Big Image Size Threshold agregando el siguiente código en tu archivo functions.php:
// Desactivar el umbral de tamaño de imagen grande
add_filter( 'big_image_size_threshold', '__return_false' );
Advertencia: Este umbral existe para mejorar el rendimiento del sitio, por lo que no se recomienda desactivarlo. Si tu sitio solo maneja imágenes pequeñas, puedes hacerlo sin problemas, pero en la mayoría de los casos, es mejor dejarlo activado.
Modificar el umbral de tamaño de imagen grande
Si necesitas permitir imágenes más grandes (por ejemplo, en un sitio de fotografía), puedes aumentar el umbral de tamaño en lugar de desactivarlo. Para cambiar el valor predeterminado de 2560 píxeles a 5000 píxeles, usa el siguiente código:
// Modificar el umbral de tamaño de imagen grande
add_filter( 'big_image_size_threshold', function( $threshold ) {
return 5000;
} );
Cómo ver los tamaños de imagen recortados en tu sitio
Método rápido con código
WordPress no tiene una opción nativa para ver todos los tamaños de imagen registrados en tu sitio. Sin embargo, puedes usar este código para mostrar una lista en la parte superior de tu sitio:
// Mostrar todos los tamaños de imagen registrados en el sitio
add_action( 'wp_head', function() {
echo '<pre>';
foreach ( (array) wp_get_registered_image_subsizes() as $size => $dims ) {
$width = $dims['width'] ?? 0;
$height = $dims['height'] ?? 0;
echo "{$size}: {$width}x{$height}\n";
}
echo '</pre>';
} );
Este código imprimirá la lista en la parte superior del sitio. Copia los datos y luego elimina el código para evitar que sigan apareciendo.
Mostrar los tamaños de imagen en el panel de administración
Para ver los tamaños de imagen recortados directamente en el panel de administración de WordPress, agrega este código a functions.php. Creará una tabla en Ajustes > Medios mostrando todos los tamaños de imagen registrados:
// Agregar una tabla con los tamaños de imagen en Ajustes > Medios
add_action( 'admin_init', function() {
add_settings_section(
'image_sizes_info',
esc_html__( 'Tamaños de Imagen Registrados', 'text_domain' ),
function() {
echo '<table class="wp-list-table widefat fixed striped">';
echo '<thead><tr><th>' . esc_html__( 'Nombre', 'text_domain' ) . '</th><th>' . esc_html__( 'Dimensiones', 'text_domain' ) . '</th></tr></thead>';
foreach ( (array) wp_get_registered_image_subsizes() as $size => $dims ) {
if ( ! in_array( $size, [ 'thumbnail', 'medium', 'large' ], true ) ) {
$width = $dims['width'] ?? 0;
$height = $dims['height'] ?? 0;
echo "<tr><td><strong>{$size}</strong></td><td>{$width}x{$height}</td>";
}
}
echo '</table>';
},
'media'
);
}, PHP_INT_MAX );
Con esta tabla, podrás monitorear si un tema o plugin está generando tamaños de imagen recortados innecesarios y optimizar tu almacenamiento en el servidor.
Este ejemplo proviene del tema Total, donde los tamaños de imagen registrados por defecto están configurados a 9999×9999, lo que es muy grande, por lo que no se recortarán de forma predeterminada.
Evitar que WordPress cree tamaños de imagen adicionales
No hay ninguna opción en el panel de administración de WordPress para evitar que se creen versiones recortadas de tus imágenes, por lo que necesitarás usar un poco de código. Afortunadamente, se puede hacer con una sola línea de código.
// Retorna falso para las dimensiones de imagen redimensionadas calculadas
add_filter( 'image_resize_dimensions', '__return_false' );
Para entender cómo funciona este código, vamos a ver la función image_resize_dimensions(). Es bastante larga, así que no la publicaré aquí, pero puedes hacer clic en el enlace anterior si deseas ver todo el código relacionado con la función.
Básicamente, cada vez que WordPress crea un nuevo tamaño de imagen, utiliza esta función para devolver las dimensiones calculadas del redimensionado de la imagen, las cuales luego pasa a la clase WP_Image_Editor. Al engancharse en el filtro image_resize_dimensions y devolver false, se hace que la función termine antes, de modo que no se realicen cálculos y, finalmente, no se genere ninguna imagen adicional.
Fragmento de código optimizado
El fragmento anterior evitará que WordPress recorte cualquier imagen cuando se solicite un nuevo tamaño. Esto funcionará sin importar cuándo se solicite un tamaño de imagen.
Sin embargo, podemos optimizar el código enganchándonos al filtro intermediate_image_sizes_advanced, que devuelve el arreglo de tamaños de imagen generados automáticamente al subir una imagen.
// Devuelve una lista vacía de tamaños de imagen a generar al cargar
add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );
Al devolver un arreglo vacío para el filtro, le indicamos a WordPress que no debe generar imágenes adicionales cuando se suba una nueva imagen a nuestro sitio. Ahora, cada vez que subas una imagen, solo se agregará la imagen original al servidor.
Fragmento completo:
Aquí están ambos fragmentos combinados:
// Retorna falso para las dimensiones de imagen redimensionadas calculadas
add_filter( 'image_resize_dimensions', '__return_false' );
// Devuelve una lista vacía de tamaños de imagen a generar al cargar
add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );
Si ya estás enganchado al filtro intermediate_image_sizes_advanced, no es necesario que te enganches también al filtro image_resize_dimensions.
La razón de enganchar ambos filtros es en caso de que un tema o plugin esté utilizando una solución personalizada de recorte «en tiempo real», que probablemente haga uso de la función image_resize_dimensions().
Plugin «WP Disable All Image Sizes»
He colocado este fragmento de código en un pequeño plugin, por si prefieres descargarlo e instalarlo directamente. Este plugin nunca debería necesitar actualizaciones, y dado que el proceso de revisión de plugins de WordPress es complicado, por ahora lo dejo en Github.
Repositorio del plugin WP Disable All Image Sizes en Github
El plugin hará 3 cosas:
- Deshabilitará el umbral de tamaño de imagen grande.
- Retornará falso para el filtro image_resize_dimensions.
- Retornará un arreglo vacío para el filtro intermediate_image_sizes_advanced.
¿Qué hacer si aún se crean tamaños de imagen adicionales?
Si has agregado el fragmento de código a tu sitio y encuentras que los tamaños de imagen aún se generan cuando subes imágenes, deberás deshabilitar los plugins y/o tu tema para identificar el culpable.
Como se mencionó anteriormente, es posible que haya una solución personalizada de recorte de imágenes «en tiempo real» en tu sitio que no esté utilizando la funcionalidad principal de WP y, por lo tanto, los filtros principales no la afectarán.
Excluir tamaños de imagen específicos de ser creados al subir
Tal vez no quieras evitar que se generen todos los tamaños de imagen. Es posible modificar el código para excluir solo ciertos tamaños de imagen, de la siguiente manera:
// Excluir ciertos tamaños de imagen de ser generados al cargar
add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
$sizes_to_exclude = [
'thumbnail',
'medium',
'large',
'medium_large',
'1536×1536',
'2048×2048',
];
foreach ( $sizes_to_exclude as $size_to_exclude ) {
unset( $sizes[ $size_to_exclude ] );
}
return $sizes;
} );
Si deseas excluir solo ciertos tamaños de imagen, asegúrate de no enganchar el filtro image_resize_dimensions y devolver false.
Probablemente notaste que incluí los tamaños de imagen thumbnail, medium y large en el fragmento. De este modo, incluso si alguien modifica la configuración en el panel de administración, esos tamaños de imagen serán excluidos.
Consejos para reducir la necesidad de imágenes redimensionadas
Al principio del artículo mencioné algunas razones por las cuales WordPress crea tamaños de imagen adicionales. Con esas razones en mente, si planeas desactivar los tamaños de imagen adicionales, aquí tienes algunos consejos para asegurarte de no crear «problemas» adicionales:
- No subas imágenes gigantes: Asegúrate de no subir imágenes demasiado grandes a tu sitio. Si no tienes control sobre esto, asegúrate de no eliminar el umbral de tamaño de imagen grande y acepta que tu sitio creará imágenes escaladas cuando sea necesario.
- Sube imágenes suficientemente grandes: Es difícil determinar qué tan grande debe ser una imagen, ya que depende del sitio y el contexto en el que se agregue. Sin embargo, querrás que tus imágenes sean lo suficientemente grandes para que se vean bien en pantallas de alta resolución, pero pequeñas (en kb) para no ralentizar la carga del sitio.
- Optimiza imágenes antes de subirlas: Existen muchos excelentes plugins de optimización de imágenes, pero ¿por qué sobrecargar tu sitio y consumir recursos del servidor si puedes optimizar las imágenes antes de cargarlas? Personalmente, utilizo tinypng.com y convierto mis imágenes a formato webP antes de subirlas.
- Usa proporciones de imagen: Una de las principales razones por las que se crean tamaños de imagen es para mantener una apariencia consistente en tus publicaciones, ya que todas tus imágenes destacadas se recortarán a las mismas dimensiones. Sin embargo, puedes usar la propiedad aspect-ratio en CSS para controlar tus imágenes.
Estos son los principales consejos que se me ocurren. Déjame saber en los comentarios si tienes otras sugerencias o preocupaciones que deberían ser abordadas.
Cómo eliminar tamaños de imagen antiguos de tu servidor
Agregar el código para evitar que WordPress cree tamaños de imagen adicionales solo afectará a las imágenes subidas recientemente. Si estás agregando el código a un sitio existente, es posible que haya muchas imágenes recortadas antiguas en el servidor que querrás limpiar.
Hay varios métodos que puedes usar para eliminar las imágenes redimensionadas antiguas, y muchos blogs recomiendan usar CLI (terminal). Sin embargo, como WordPress almacena los tamaños de imagen en los metadatos del archivo adjunto, no recomiendo esa solución.
El método más fácil que he encontrado es usar el plugin Force Regenerate Thumbnails. Puedes habilitar el plugin, ejecutar el proceso y luego eliminarlo de tu sitio.
El plugin funciona recorriendo cada archivo de imagen en el sitio, obteniendo los tamaños definidos desde los metadatos y eliminándolos todos. Después de eliminar los tamaños de imagen, ejecuta la función principal wp_generate_attachment_metadata(), que volverá a crear los tamaños de imagen intermedios para el archivo adjunto. Entonces, si has deshabilitado los tamaños de imagen adicionales con el código anterior, no se generarán nuevas imágenes.
Podría proporcionarte un fragmento de código para eliminar tamaños de imagen antiguos de tu sitio, pero el proceso puede ser muy intensivo en recursos y es mejor hacerlo usando AJAX. El plugin Force Regenerate Thumbnails recorrerá cada imagen a la vez y, si hay problemas, los registrará y mostrará.
El plugin también te mostrará qué imágenes fueron eliminadas y generadas, ¡lo cual es muy útil!
Como siempre, antes de instalar cualquier nuevo plugin o eliminar algo de tu sitio, asegúrate de tener una copia de seguridad completa. He usado el plugin muchas veces sin problemas, pero siempre es mejor prevenir que lamentar.
Resumen:
Personalmente, creo que desactivar todos los tamaños adicionales de imagen es lo mejor para la mayoría de los sitios web. Esto garantiza que el espacio en el servidor no se consuma con imágenes (muchas de las cuales nunca se utilizarán) y, a su vez, mantiene tus copias de seguridad considerablemente más pequeñas.
También podría haber un argumento en favor del SEO. No sé mucho sobre la Optimización para la Búsqueda de Imágenes en Google, pero tal vez tener muchas versiones de la misma imagen en diferentes tamaños podría causar problemas.
Si estás profundizando tus conocimientos en el mundo WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.
