El gran problema de las miniaturas que genera WordPress

Miniaturas o thumbnails en WordPress

Hoy quiero hablar de una función que tiene WordPress y que sin duda todos utilizamos día con día en nuestras Páginas Web. Se trata de las miniaturas o thumbnails.

Para aquellos que no lo sepan, las miniaturas o thumbails son copias o versiones de una misma imagen que genera WordPress de manera automática pero en diferentes tamaños (Grande, mediana, chica) que te permiten hacer más ligera la carga de tu página web.

Por ejemplo: Si nosotros subimos una imagen de 600x400px a nuestra biblioteca de medios, WordPress de manera predeterminada genera dos copias de esta misma imagen pero con un tamaño de 300x300px y 150x150px (que son los tamaños que trae por defecto y siempre se pueden cambiar).

Estas dos nuevas imágenes las utilizara en sitios donde se requiera una imagen de un tamaño inferior, como puede ser en la sección de artículos relacionados, en el sidebar o en el propio editor visual de WordPress.

¿Cuál es el problema con las miniaturas que genera WordPress?

Estoy seguro que ya habrás escuchado hasta el cansancio que para que tu sitio web cargue de manera rápida debes comprimir y reducir el peso de tus imágenes, ya que no es lo mismo para tu servidor descargar una imagen de 200 KB a una de 25 KB ¿Hay mucha diferencia cierto?

Bueno, pues el otro día mientras hacia limpieza de uno de mis proyectos eliminando manualmente todas las imágenes que no utilizaba, me di cuenta de algo muy curioso…

¡Qué las miniaturas que generaba WordPress eran más pesadas que la imagen original! 😱

Sí, tal cual lo estas leyendo, las miniaturas que en teoría por ser más pequeñas tendrían que pesar menos, pesaban más que la imagen original.

Miniaturas Generadas WordPress

Copias generadas por WordPress

En este caso la imagen original mide 720x320px y pesa tan solo 8.65 KB y las otras copias que genero WordPress pesan más de 22 KB, incluso la más pequeña que tan solo mide 150x150px pesa el doble que la original ¡Vaya sorpresa me vine a encontrar!

A partir de todo esto surge la siguiente pregunta…

¿Cómo me afecta que las miniaturas sean más pesadas?

Seguramente estés pensando que la diferencia que hubo en el tamaño no es mucho, pero tomemos en cuenta que en la mayoría de sitios se utilizan muchas miniaturas, por ejemplo en la sección de artículos relacionados, en el sidebar e inclusive dentro del contenido para Ilustrarlo ¿Ahora sí cambian las cosas cierto?

Pero ese no es el mayor problema…

Sí ustedes son curiosos y se mantienen al día, se habrán dado cuenta que WordPress desde su versión 4.4 ha incluido un nuevo atributo, el srcset, el cual toma todos los tamaños disponibles de una imagen y los agrega a la etiqueta img, para que el Navegador decida cuál es el tamaño más optimo a mostrar ignorando los demás.

 

Entonces si vemos nuestra página desde un ordenador, no se notara la diferencia ya que cargara la imagen más grande, que en este caso es la de 720x320px y ya vimos que solo pesa 8 KB.

El problema será cuando veamos nuestra página web desde un dispositivo móvil, por ejemplo un IPhone 5 que tiene una resolución de 320x568px, ya que el navegador optara por la imagen más cercana a esa resolución que en este caso sería la de 680x320px (retomando el ejemplo de la primer imagen), entonces en lugar de descargar los 8 KB que pesa la imagen original, va a estar descargando 22.58 KB por esta nueva imagen… ¡Una barbaridad para un dispositivo móvil!

¿Como solucionar el peso de las miniaturas?

Para solucionar el problema del peso de las miniaturas que nos genera WordPress tenemos varías opciones, ahora mismo te explico cuales son…

Comprimir las imágenes manualmente

Sí, esta es la opción más laboriosa de todas las que te voy a mostrar, pero también es con la que mejores resultados vamos a obtener.

Para hacer esto solamente tenemos que descargar todas las miniaturas hacía nuestro ordenador (lo puedes hacer mediante FTP o desde CPanel) e iremos reduciendo el peso de cada una de las miniaturas.

Esto lo podemos hacer con programas como Adobe Photoshop o Riot (este es el que más recomiendo 😉)

No haré un tutorial (al menos en este articulo) de como utilizar este software, ya que si no el post se haría muy largo y pesado, pero te lo dejo como opción.

Comprimir las imágenes mediante herramientas Online

Para está opción también es necesario descargar todas las miniaturas a nuestro PC, la diferencia es que hay herramientas online que nos permiten subir lotes de imagenes y optimizarlas todas al mismo tiempo, en lugar de hacerlo una por una como en la opción anterior.

¿Cuál es la desventaja? Que no tenemos un control sobre el peso final de la imagen y no siempre quedan tan comprimidas como quisiéramos, pero si esto no es problema para ti estas son las herramientas que te recomiendo:

  • TinyPng.com: Es una excelente aplicación online que te permite reducir el peso de hasta 20 imágenes al mismo tiempo.
  • Compressor.io: Es otra aplicación online que consigue una reducción de peso de tus imágenes bastante buena y sin perder casi nada de calidad.

Comprimir las imágenes mediante Plugins

Está es la solución más sencilla de todas y consiste en comprimir nuestras imágenes mediante un Plugin de WordPress, el plugin más popular y utilizado es Smush.it, el único problema es que si tienes muchas imágenes, el Plugin te consumirá bastantes recursos de tu servidor, por lo que si tu Hosting esta un poco limitado te recomiendo que utilices las opciones anteriores.

Desactivar la creación automática de miniaturas en WordPress

Está no es la opción más recomendada, ya que WordPress y tu plantilla hacen uso de estás imágenes y podrían haber errores de visualización. Pero si tú no haces uso de ninguna miniatura y solo usas las imágenes con su tamaño original dentro de tus artículos, las puedes desactivar sin ningún problema.

Nota: En el siguiente articulo te explicare a detalle a como hacerlo, así que guarda este articulo en favoritos que desde aquí lo enlazare 😉

Conclusión

El algoritmo de generación de miniaturas de WordPress cumple con su cometido, generar versiones más pequeñas de nuestras imágenes.

En nuestras manos está optimizar esas imágenes que WordPress nos genera automáticamente y que sin duda se agradece, ¿se imaginan tener que estar generando miniaturas de nuestras imágenes manualmente? ¡Sería titanico!

Así que date una vuelta por tus carpetas de imágenes y checa que imágenes necesitan ser optimizadas, te aseguro que tu servidor te lo agradecerá y sobre todo los visitantes de tu blog 😉

¿Me ayudas puntuando el articulo?

FlojaNo esta malBienMuy bien¡Impecable! (3 votos, promedio: 5,00 de 5)
Cargando…

¿Te gusta este Artículo?

Entonces te recomiendo una cosa...

Suscríbete y recibe los mejores contenidos de Creativos Blog directamente en tu bandeja de entrada ¡Anímate y no te pierdas las actualizaciones de este Blog!