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.

fotografía de ejemplo con peso elevado

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 (€€€).

uso excesivo de creación de post thumbnails personalizados
Ejemplo de un tema de WordPress que genera un número excesivo de thumbnails.

¿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.

force regenerate thumbnails interfaz de usuario

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.

force regenerate thumbnails resultado

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


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (2 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.

2 thoughts on “Generación desmedida de Post Thumbnails y de cómo resolverlo”

  1. Buenas Mau,

    Un tema que me tiene desde hace tiempo algo loco.
    ¿Qué pasa cuando tienes una web compleja que realmente necesita generar al menos 15-20 tamaños? Y los necesita porque a veces se usan unos y a veces otros en distintos lugares de una web muy compleja.
    Si no los creas, google te penaliza (y los tiempos de carga se ven afectados también).
    Si los creas, pasa lo que explicas aquí arriba.

    Tengo que leerme ese otro artículo (y mil perdones si lo explicas ahí), pero me gustaría saber tu opinión profesional para ver si lo de google o la velocidad no lo consideras un problema.
    Un día tomando unas cañas hablamos del sistema a fondo!

    Gracias!!

    1. Hola Ángel!

      Si estás frente a un tema que necesita de 20 thumbnails de distintos tamaño es porque está mal maquetado el Frontend. Claramente NO ES NECESARIO tener tanta cantidad de thumbnails.
      De tener que trabajar con este tema, tendrás que modificar el PHP de todas las plantillas para cambiar el nombre del thumbnail en la función get_thumbnail() (aunque con un buscar y reemplazar lo tienes chupado) y luego hacer los ajustes necesarios con CSS.

      Nuevamente, laborioso, pero se puede resolver.

      Abrazo y quedan esas cañas pendientes!
      Mauri

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

WordPress Theme by RichWP