Imágenes en WordPress ¡gestionando los tamaños correctos!

Pues de eso va este artículo, de cómo detectar esas imágenes que no se utilizan pero que ocupan espacio en tu Hosting, y que aunque no te importe el espacio, tampoco es plan que tus backups ocupen 300 o 700 MB porque tengas taitantas mil imágenes que no sirven para nada y ni siquiera utilizas. ¡Sigue leyendo que te lo cuento!

¿Qué es eso de las imágenes duplicadas?

No es 100% cierto que sean imágenes duplicadas, ya que salvo que se encuentren en carpetas diferentes, lo que sí es posible, con el mismo nombre, es evidente que la misma imagen, con el mismo nombre no podría estar en la misma carpeta.

Sin embargo si es posible que tengas una imagen con el mismo nombre pero con el añadido del tamaño al final del nombre y que ésta se duplique, triplique, cuadruplique, etc., en base a diferentes tamaños preestablecidos pero que no necesariamente se van a utilizar.

Por ejemplo, subes una imagen llamada galeria2.png y en la Biblioteca de Medios solo verás esa imagen, sin embargo si accedes a /wp-content/uploads/2017/03 encontrarás esa imagen y las variantes de tamaños de esa misma imagen:

galeria2-150x150.png
galeria2-300x111.png
galeria2-142x88.png
galeria2-142x88.png
galeria2-270x270.png
galeria2-200x200.png
galeria2-400x324.png

Un total de 7 imágenes más la que subiste galeria2.png, o sea, 8 imágenes en total que posiblemente nunca utilices y que todas ellas suman un total de 100 MB (dependiendo del tamaño de cada una) lo que es importante si consideramos que apenas estamos hablando de una única imagen subida.

Ahora haz un poco de cálculo e imagina que tienes unas 2000 imágenes en la carpeta /uploads, a poco que desarrolles una regla de 3 simple verás que el espacio ocupado en MB o GB se dispara exponencialmente por lo que es importante tomar medidas antes de llegar a estos excesos.

¿Que dice el Codex al respecto de los thumbnails?

Los tamaños de imagen predeterminados de WordPress son "thumbnail" (y su alias "thumb"), "medium", "large" y "full".

Estos tamaños de imagen se pueden configurar en la configuración de Ajustes, Medios. Si tu tema permite Post Thumbnails entonces "post-thumbnail" también está disponible y este es el valor predeterminado cuando se utiliza Post Thumbnails.

Estos son los tres tamaños de imagen predeterminados, que WordPress llama: miniatura, medio y grande. El tamaño de la miniatura tiene un ajuste especial para recortar en la dimensión exacta que se especifique.

Así se usan estos tamaños predeterminados con the_post_thumbnail():

// Sin parámetro -> Post Thumbnail (Según el tema por medio de set_post_thumbnail_size())
the_post_thumbnail();

the_post_thumbnail('thumbnail');       // Thumbnail (por defecto 150px x 150px max)
the_post_thumbnail('medium');          // Media resolución (por defecto 300px x 300px max)
the_post_thumbnail('large');           // Alta resolución (por defecto 640px x 640px max)
the_post_thumbnail('full');            // Resolución original de la imagen (sin modificar)

the_post_thumbnail( array(100,100) );  // Otras resoluciones

¿10, 4, 6 tamaños generados por el núcleo de WordPress? ahí está sembrada la duda.

Lo cierto es que el core genera una serie de tamaños predeterminados y el resto de tamaños adicionales son generados por el tema o plugins que los necesiten según sus particularidades, esto incluye a WooCommerce y las imágenes de Categorías y Productos.

Desde la versión 2.9 de WordPress, por ejemplo, se incorpora la Imagen Destacada (featured image), lo que añade un tamaño más a la lista de tamaños que se generan tras subir una imagen a la biblioteca de medios.

Luego podríamos añadir la Featured Mobile que es la versión de imagen destacada para dispositivos móviles (responsive), la Sidebar Thumb imagen miniatura de la zona "sidebar" y otras que se van generando en base al tema y plugins usados.

¿Es bueno usar imágenes grandes?

Contundentemente la respuesta es ¡No! y el uso y abuso de imágenes subidas directamente desde cámaras de dispositivos móviles, que disparan con resoluciones nativas muy altas que generan pesadas imágenes de 4, 8 y 16 Mb en el mejor de los casos, acabarán con tu Biblioteca de Medios saturada, tu espacio de disco en el Hosting bastante apurado y copias de seguridad de tamaños considerables por causa de estas imágenes.

Por utilizar imágenes de mayor calidad y resolución no vas a conseguir que se vean mejor en los navegadores y menos aún en los móviles.

Esto afecta al SEO, a tus visitas y a la carga de tu sitio:

• Tus páginas cargarán más lentamente, lo que podría espantar a los visitantes, principalmente a los que lo hagan desde dispositivos móviles (más del 50% de tu tráfico actual seguramente).
• El SEO de tu sitio se verá afectado negativamente pues la velocidad de carga de la página es un factor extremadamente importante.
• Además tus imágenes no tendrán nombres de archivo significativos o entendibles (por ejemplo: 20170313_212925.jpg).

Elimina imágenes no utilizadas en Medios

Entre las imágenes que tu subes a la biblioteca de medios, las que duplicas sin darte mucha cuenta, las que se generan en diferentes tamaños de la misma imagen, tu carpeta /wp-content/uploads acaba llenándose hasta ocupar tamaños considerables que pueden afectar al espacio de tu Hosting.

Existen plugins como DNUI con los que puedes localizar y eliminar esas imágenes que no son necesarias en tu instalación de WordPress sin que tengas que volverte loco buscando.

DNUI que es el acrónimo de Delete Not Used Image buscará imágenes de la base de datos e intentará encontrarlas en cada Post y Página, si una imagen tiene una referencia en un post o página, el plugin te dirá que se utiliza la imagen de forma que no la elimines.

Este plugin utiliza las siguientes tecnologías web:

• AngularJS 1.4.8 core, resource and animate
• Angular UI
• Bootstrap

Con el plugin puedes buscar si la imagen se usa en:

• Extractos (imagen de referencia o código abreviado)
• Publicar post/página (imagen de referencia o código abreviado)
• Borradores/Revisiones de Post/Páginas (imagen de referencia o código abreviado)
• Códigos Cortos (Shortcodes) (incluye la galería)

Un resultado devuelto por el plugin en el dashboard, tras ejecutarlo, sería similar al siguiente:

En este listado de imágenes detectadas con DNUI hay que centrarse en la columna Status ya que es la que nos indica que la imagen no está siendo utilizada y podemos optar por eliminarla manualmente, de una en una, o aplicar una acción conjunta (en bloque) y eliminar todas las que no se utilizan.

Llegado a este punto tengo que recordar la importancia de hacer una copia de seguridad de la biblioteca de medios de WordPress para no liarla parda.

¿Necesitas otros tamaños de imágenes?

Hay algunas soluciones para crear tamaños personalizados de imágenes en WordPress, que están documentados en el Codex de manera general para que te hagas una idea, pero si eres de los que meterle mano al código de WordPress le pone los pelos como escarpias, mejor que te decantes por usar algún plugin, de los muchos que existen, para crear tamaños adicionales de imágenes.

Yo me decanto por Simple Image Sizes, un plugin sencillo de utilizar y bastante eficaz, con más de 80 mil instalaciones a sus espaldas, que son indicador de que a otros les ha ido bien con este plugin.

Lo instalas y activas, te vas a Ajustes, Medios y de repente dispones de más cajas de tamaños adicionales para personalizar otros posibles tamaños que necesites.

Además dispones de la posibilidad de regenerar miniaturas de imágenes en la misma pantalla, más abajo, algo que debes utilizar siempre con cautela, no de forma arbitraria y realizando antes una copia de seguridad de WordPress o al menso de tu Biblioteca de Medios.

Esta funcionalidad de añadir nuevos tamaños de imágenes ¿es la panacea?, ¡pues tampoco! pero para casos puntuales en los que necesites tamaños extra y no quieras recurrir a overrides al tema, es una alternativa aplicable.

¡Optimiza, optimiza, optimiza!

Tan importante es que uses buenas imágenes, de calidad, originales, en tus post y páginas de WordPress, o en los productos de tu tienda WooCommerce (u otras), como que estén bien optimizadas, para mejorar los tiempos de carga sin que la calidad de las mismas se vea afectada.

• La dimensión de la imagen debe ser la que requiera el lugar donde vas a utilizarla y no mayor.
• El tamaño del archivo de la imagen debe ser lo más pequeño posible sin pérdida notable de calidad.

No es nada recomendable subir una imagen de 3000 o 5000 pixel para luego tener que redimensionarla a un tamaño menor en la Biblioteca de Medios.

Lo adecuado es optimizar el tamaño antes de subirla, de manera que se pueda usar sin escalar, ya sea a menor o a mayor tamaño, para no influir ni en su peso y tampoco en la proporcionalidad de la imagen.

• Una imagen grande escalada a un tamaño menor pesará lo mismo a la hora de cargar en pantalla.
• Una imagen menor escalada a un tamaño mayor se mostrará pixelada o con baja calidad en pantalla.

Si eres cliente de Webempresa puedes disfrutar de ImageOptimizer, una herramienta que optimiza todas las imágenes de tu Hosting sin afectar a su calidad y consiguiendo tamaños mucho menores que ayudarán a mejorar los tiempos de carga de las mismas en tu web.

ImageOptimizer - El optimizador de imágenes para clientes de Webempresa

Existen muchas alternativas online para optimizar las imágenes, como por ejemplo, TinyPNG, que vengo utilizando desde hace mucho tiempo para optimizar por ejemplo las imágenes de este Blog, de forma que no pierdan calidad y disminuyan su peso entre un 40 y un 70% de su peso dependiendo de la imagen y el tamaño.

TinyPNG - Compatibilidad con PNG inteligente y JPEG

En esta captura puedes ver varias imágenes con pesos diferentes pasadas por TinyPNG y el grado de compresión obtenido sin afectar a su calidad.

Además tienes plugins como Smush Image Compression and Optimization que te ayudan a mejorar tus imágenes comprimiéndolas y creando los diferentes tamaños requeridos por tu tema y/o plugins.

Uno de mis favoritos es Imsanity que ayuda a redimensionar las imágenes cuando las subes a Medios sin tener que pelearte con configuraciones complejas. Permite hacer un redimensionamiento masivos (bulk) de todas las imágenes de la biblioteca (¡ojo si tienes muchas imágenes porque pondrás a mil el servidor!).

Si eres de los que aún utiliza el formato .bmp (Windows) para las imágenes, con Imsanity podrás dejar que te las convierta a .jpg y debidamente escaladas.

Se trata de un plugin de esos que una vez instalas y configuras, te olvidas de él, ya que se encarga de hacer todo en segundo plano y dejarte trabajar en lo importante, tus publicaciones.

Por cierto ¿no seria mejor usar imágenes en post y páginas, pero que no estén alojadas en el Hosting? ..es que tengo poco espacio!! ..dice un cliente

Externalizar imágenes de medios en la nube

Buahhhh! pensaba que no me lo preguntarías :D

Siempre he pensado que esta es una buena solución para quien anda corto de espacio en el Hosting, o quien gestiona muchos sitios web en un solo Hosting, por ejemplo de 3GB, y necesita descargar un poco de espacio, que casualmente es el que ocupa /uploads con las taitantas mil imágenes de las que venimos hablando.

La nube, esa esponjosa e idealizada imagen que ronda nuestras cabezas, cuan páctica es en muchos casos ¡y este es uno de ellos!

Ya lo comenté tiempo atrás, explicando como insertar imágenes en los post, procedentes estas de Dropbox, aunque también puedes usar Google Drive, que para el caso es un CDN también y te puede servir de almacen de imagenes.

Utiliza en WordPress imágenes almacenadas en DropBox para tus post

Al final esto de las imágenes y los tamaños es como todo, requiere planificación, sentido común y dedicarle tiempo a leer antes de probar.

Y si te lanzas a la piscina para probar la regeneración de imágenes, el escalado, los mil y un tamaños diferentes ¡por favor! no lo hagas en tu web en producción, usa un clon o copia antes para experimentar, no sea que la lies parda y luego te acuerdes de mis ancestros. ヅ

¿Optimizas tus imágenes?, lo haces ¿manualmente o con plugins?, ¿haces copia de seguridad de tu Biblioteca de medios antes de experimentar? ...sea como fuere que lo hagas espero que ahora tengas un poco más clara la importancia de optimizar imágenes y usar los tamaños adecuados. Ya sabes eso de que "lo que no uses desinstálalo".