Generación desmedida de Post Thumbnails y de cómo resolverlo

Es sabido que WordPress nos permite subir imágenes y que a su vez se generan thumbnails para aligerar su peso, resolución, etcétera. Esto es una funcionalidad excelente ya que los desarrolladores podemos, inicialmente, despreocuparnos de si el usuario sube una imagen de 15 o 25 megabytes con su cámara de último modelo de 145 Megapíxeles, HDR, WiFi y radio AM/FM incluida, porque se crearán tres cuatro nuevas copias con peso y resolución aceptable para la web.

Los thumbnails que se crean por defecto con cualquier WordPress son:

• Thumbnail o Thumb: Una copia de la imagen original con un tamaño de 150px x 150px
• Medium: Ídem con una resolución de 300px x 300px
• Medium_large: Copia con un ancho de 768px y altura automática.
• Large: Copia con un ancho de 1024px y altura automática
• Full: La imagen original sin modificar

En materia de compresión de imágenes, WordPress utilizaba una de compresión del 90% en JPG que luego han reducido a 82% a partir de la versión 4.5.

Vamos a realizar un ejemplo para ver cómo se crean las copias, cómo se reduce el peso y la nomenclatura que utilizan para los nuevos ficheros. Para ello usaremos la siguiente imagen (de mi viaje por Nepal) la cual subiremos sin ningún tipo de tratamiento a un WordPress con el tema Twenty-Seventeen. La misma pesa 12,6Mb (una locura para utilizar en Web) y con una resolución de 6000px x 4000px, otra locura a menos que queramos ver la imagen en una pantalla de cine.

Una vez subida la imagen vemos que se generan los siguientes nuevos ficheros con sus correspondientes detalles:

• nino-de-katmandu-100×100.jpg ➡ 4Kb ➡ reducción del 99,96% ➡ Thumbnail personalizado
• nino-de-katmandu-150×150.jpg ➡ 6Kb ➡ reducción del 99,96% ➡ Thumbnail por defecto
• nino-de-katmandu-300×200.jpg ➡ 14Kb ➡ reducción del 99,95%  ➡ Thumbnail personalizado
• nino-de-katmandu-768×512.jpg ➡ 60Kb ➡ reducción del 99,53%  ➡ Thumbnail por defecto
• nino-de-katmandu-1024×683.jpg ➡ 97Kb ➡ reducción del 99,24%  ➡ Thumbnail por defecto
• nino-de-katmandu-2000×1200.jpg ➡ 267Kb ➡ reducción del 97,93%  ➡ Thumbnail personalizado
• nino-de-katmandu.jpg ➡ 12.902Kb ➡ imagen original  ➡ Thumbnail por defecto

¿Cuál es problema?

El problema está cuando algunos temas de WordPress muy específicos crean excesivas e innecesarias nuevas resoluciones para crear un diseño ad-hoc y el programador no desactiva (o desconoce el problema) aquellas que podrían evitarse. Por ende, cada nuevo fichero que se sube genera un gran uso de procesador para crear una nueva imagen comprimida y de espacio en disco duro, que a la larga termina repercutiendo en los gastos finales de hosting (€€€).

¿Realmente se necesita toda esa cantidad de Thumbnails para que el diseño de una web sea óptimo? Déjame que te responda yo: ¡NO, PARA NADA!

La captura de pantalla anterior pertenece a uno de mis clientes que necesita WPO urgente para mejorar tiempo de respuesta y económicos. El simple fichero «portada.jpg» pesa 111Kb, pero si sumamos todos los thumbnails hacen un total de de 860Kb. Imaginemos ahora si esta web genera 2 o 3 artículos diarios con múltiples imágenes, esto puede llegar a convertirse en un problema grande, innecesario y muy costoso (varios gigas de datos en el servidor).

¿Cómo resolverlo?

Desactivar thumbnails innecesarios

Primero tenemos que hacer una investigación sobre el tema activo de WordPress para saber realmente qué thumbnails se utilizan y cuáles no. Una vez identificados los thumbnails que no necesitamos, procederemos a desactivarlos en el functions.php de nuestro tema hijo:

<?php
/*
*	Esta función quita todos aquellos thumbnails personalizados
*	que el tema padre indica necesitar.
*/
function quitar_thumbnails_innecesarios() {
	// Reemplazar 'nombre-del-thumbnail-personalizado' con 
	// el nombre correspondiente.
	remove_image_size('nombre-del-thumbnail-personalizado');
}
add_action('init', 'quitar_thumbnails_innecesarios');

Una vez que hayamos desactivado los thumbnails tenemos dos opciones:

1. Dejar todo tal cual está sabiendo que las imágenes que se generan de ahora en más tendrán los thumbnails justos y necesarios.
2. Si el peso actual de todas las imágenes compromete la economía de nuestro cliente (factura de hosting), tendremos que regenerar todos los thumbnails y eliminar los ficheros innecesarios para ahorrar espacio en el disco duro.

Regeneración de thumbnails

ADVERTENCIA: Regenerar thumbnails lleva mucha carga de procesamiento con lo que recomiendo no realizarlo en un entorno de producción. También sugiero encarecidamente hacer una copia de seguridad antes de ejecutar esta operación.

Podemos utilizar el plugin Force Regenerate Thumbnails que, a pesar que no esté actualizado desde hace más de 2 años, funciona correctamente hasta la versión 4.9.6 de WordPress.

Este plugin regenera automáticamente todas las imágenes que indique el tema activo y borra aquellas que no concuerden en el disco duro. Tiene una simple pantalla que podemos encontrar en el menú «Herramientas » Force Regenerate Thumbnails». Previa copia de seguridad, basta solo con hacer click en el botón para que comience la magia.

Otra opción es utilizar la opción de WP-CLI para ejecutar el proceso desde línea de comandos:

wp media regenerate

Más información en la documentación oficial de WP-CLI.

En la imagen anterior se puede ver cómo se han borrado todas las imágenes innecesarias y hemos regenerado solo las que vienen por defecto con WordPress (luego se han hecho ajustes de CSS y PHP para reutilizar estos ficheros).

Conclusión

Un buen diseño web no necesita de tantas copias de thumbnails. Con las que vienen por defecto con WordPress alcanzan y sobran. También podemos reutilizar las imágenes y trabajarlas mediante CSS con background-position, background-size, object-fit (del cual tengo un artículo muy extenso) o bien con otros tantos atributos para la manipulación de imágenes.

Venga, pon esto en práctica y ahórrale espacio y algo de dinero a tus clientes.

Imagen destacada de Soragrit Wongsa en Unsplash