Cómo optimizar imágenes en WordPress al 100% - Ecdisis Estudio

Cómo optimizar imágenes en WordPress al 100%

Es un hecho ya irrefutable que la optimización de imágenes de tu sitio web te sirve para muchas cosas, desde mejorar la experiencia a tus usuarios hasta tener mejor karma frente a Google y sus bots para que les guste más tu web.

En esta guía definitiva para optimizar imágenes en WordPress quiero que demos un repaso a la Biblioteca de Medios, la configuración de miniaturas y tamaños adicionales de imágenes, pasando por la limpieza de imágenes duplicadas y acabando con la necesaria optimización de estas.

No cabe duda que un sitio web con imágenes ilustrando los contenidos tienen un 80% más de engagement frente a los usuarios o compradores que un sitio pobre en ilustraciones o imágenes de servicios, productos, etc.

Qué espacio ocupan las imágenes en WordPress

Por regla general el 70% del espacio ocupado por cualquier sitio web WordPress es debido a las imágenes alojadas en la carpeta /wp-content/uploads por lo que dedicarle tiempo y esfuerzos a reducir el peso de una imagen sin perder calidad, deberían ser tu próxima cruzada para ganar un lugar en el olimpo y que PageSpeed Insights te de amor.

El porcentaje de peso de las imágenes en una instalación de WordPress varía entre el 30% y el 70% aproximadamente, dependiendo de la web y de si esta utiliza plugins como WooCommerce.

espacio que ocupa una imagen

Es tan importante que utilices buenas imágenes, de calidad, que sean originales, en tus post y páginas de WordPress, o en los productos de tu tienda WooCommerce, como que estén bien optimizadas, para mejorar los tiempos de carga sin que la calidad de las mismas se vea afectada.

Qué dice el Codex sobre las imágenes

Ciertamente el Codex de WordPress, en lo referente a optimización de imágenes es bastante parco y se limita a indicar lo que ya es obvio diciendo algo como:

Asegurarse de que las imágenes en sus publicaciones estén optimizadas para la web ahorre tiempo de carga, ancho de banda y aumente su clasificación en los motores de búsqueda.

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 ajustar en el dashboard, 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.

ajustes de medios en imagenes

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.

Puedes reducir los tamaños establecidos en Medios, pero sólo tendrán efecto para las imágenes recién subidas, las existentes no se verán afectadas por este cambio y seguirás conservando el resto de tamaños.

Así se utilizan 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í queda la duda.

Lo cierto es que el núcleo de WordPress 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 se incorpora la Imagen Destacada (featured image), lo que añade un tamaño más a la lista de tamaños que se crean tras subir una imagen a la biblioteca de medios.

Luego habría que 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.

Qué dice PageSpeed Insights sobre tus imágenes

Si eres de los que todavía no ha utilizado PageSpeed Insights para evaluar la carga de la web ¿a qué estás esperando? obtendrás información muy importante sobre el estado de carga de tu página y podrás detectar los cuellos de botella que la hacen menos deseable a Google …y posiblemente a otros buscadores.

Pongamos como ejemplo una tienda de WooCommerce, en la que publicas regularmente nuevos productos, de los que haces las fotografías desde tu dispositivos móvil a 2 o 4 MB mínimo, posiblemente más y las subes a la tienda “sin optimizar”

¿para qué, verdad?

producto woocommerce no optimizado pagespeed

Este sería un caso en el que PageSpeed detecta que tienes imágenes sin optimizar y te informa del ahorro en tiempo de carga (al margen del espacio ocupado) que reducirías si las optimizaras.

Si eres de los que hacen las cosas bien y optimizas tus imágenes antes de subirlas a la tienda, los usuarios no deberían sufrir las consecuencias al visitar tu tienda y consultar los productos.

Este sería un caso en el que PageSpeed detecta que tus imágenes están optimizadas, simplemente no mostrándote el aviso.

producto woocommerce si optimizado pagespeed

¿Hay diferencia verdad? …pues ya sabes que la optimización es el camino para que tus contenidos sean los que son pero más molones porque cargarán más rápido.

Qué formatos de imágenes son los adecuados

Prestarle atención a los formatos de imágenes que utilizas en tus sitios web WordPress es fundamental porque aunque todos los formatos habituales conocidos para imágenes serían capaces de representar la misma imagen, no todos lo hacen de la misma forma, con la misma calidad y peso y esto determina realmente cual debe ser su uso.

Tenemos cada vez más tendencia a la inmediatez de las publicaciones y en esta ecuación entra en juego el móvil como dispositivo de acción inmediata que permite realizar fotos de cualquier cosa y publicarlas ipso-facto, sin que hayan pasado por un proceso de optimización ¡y esto es poco recomendable!

Por regla general la mayoría de usuarios tiene configurado su dispositivo móvil para que realice las fotografías con la resolución y peso establecidos por defecto por el fabricante que suele oscilar entre los 8 MB y 16 MB o más y la tendencia es que esto vaya en aumento, con el consiguiente problema de optimización que genera su uso directo.

Existen 2 formatos estrella para las imágenes que habitualmente se utilizan:

  • JPG: Formato comprimido que reduce la calidad de la imagen pero que genera archivos de menor tamaño o peso. Ideal para Internet. Recomendado para imágenes con muchos colores.
  • PNG: Formato no comprimido que cuando se comprime pierde determinada información y que genera archivos de mayor tamaño, lo que supone un mayor tiempo de carga. Más pensado para diseño, fotografía e impresión. Recomendado para imágenes más sencillas, con menos colores o que sean de fondos transparentes.

Eliminar imágenes ¿es la solución a la falta de espacio?

Es evidente que antes de acometer una acción tan delicada como es eliminar imágenes de la instalación de WordPress sin tener claro cuales usas y cuales no usas (que no las uses tu no significa que no las use WordPress, tu tema o alguno de los plugins instalados) hay que hacer siempre una copia de seguridad, ya sea de tu web completa o de la biblioteca de medios, algo que explico en este artículo:

Puedes usar plugins como DNUI https://es.wordpress.org/plugins/dnui-delete-not-used-image-wordpress/ para detectar que imágenes no se utilizan en tu instalación, pero igualmente puede haber falsos positivos y se recomienda utilizar este tipo de plugins con precaución y alto nivel de sentido común para no quedarte sin imágenes.

En este otro artículo te explico un poco más detalladamente que archivos de imágenes adicionales se crean cada vez que subes una nueva imagen a tu biblioteca de medios de WordPress:

Más que utilizar plugins para estas cuestiones debes tener precaución en este tipo de tareas y sino optar por usar imágenes en la nube que ayudan a mantener tu espacio de disco en el Hosting más saneado:

  • Evitando la sobrescritura de imágenes existentes

Cuando subes una imagen a WordPress con el mismo nombre de archivo que una imagen ya existente, se cambiará el nombre del archivo para no anular la imagen actual.

Plugins como Overwrite Uploads omiten esta funcionalidad para que puedas sobrescribir fácilmente las imágenes antiguas.

El plugin Overwrite Uploads detecta nuevas subidas de imágenes con el mismo nombre de archivo de una imagen ya existente en Medios, y eliminará el original cargando el nuevo archivo sobrescribiendo el original.

Supongamos que tienes una imagen llamada “foto-de-la-boda.jpg” en tu WordPress pero tienes una versión actualizada de “foto-de-la-boda.jpg” que quieres usar para sustituir la actual.

Con Overwrite Uploads simplemente cargas la nueva imagen y se eliminará la versión anterior evitando imágenes duplicadas, triplicadas, quintuplicarse…. dependiendo de lo insistente que hayas sido y las veces que hayas querido probar la subida de la imagen hasta obtener la que más se adaptaba a lo deseado.

En WordPress de forma predeterminada tendrías que eliminar manualmente la versión anterior de la imagen antes de cargar la nueva.

  •  Algunos plugins para optimizar imágenes

Es cierto que existen muchos plugins para optimizar las imágenes que se utilizan en WordPress, principalmente las de la Biblioteca de Medios, y debo decir que algunos de estos plugins realmente hacen un buen trabajo, pero también es cierto que los que lo hacen muy bien suelen ser comerciales o tienen dependencia de un servicio externo, generalmente de un servicio de servidor de optimización, que suelen ser de pago y esto echa para atrás a muchos usuarios.

Citando algunos de los plugins más habituales:

  • EWWW Image Optimizer
  • WP Smush (Smush Image Compression and Optimization)
  • Imsanity
  • PB Responsive Images
  • Lazy Load
  • BJ Lazy Load
  • Hammy
  • Kraken Image Optimizer
  • ShortPixel Image Optimizer
  • Compress JPG & PNG Images (TinyPNG)
  • Optimus
  • JPG Optimization
  • PNG Optimization

Los niveles de optimización de estos plugins dependen de algunos factores, entre ellos que el servidor permita su ejecución, algo que en el caso de EWWW Image Optimizer es posible que ni siempre sea así en todos los Hostings, por razones de seguridad.

Estos niveles de mejora oscilan entre el 6,3% del peor de los plugins al 89% en los mejores casos para aquellos plugins más elaborados y con mejores recursos a nivel servidor para llevar a cabo las optimizaciones.

Y existe también OptimizadorIO, un plugin que ha irrumpido en el mundo de WordPress con ganas de ofrecer a todos los usuarios de WordPress del mundo una herramienta fácil de utilizar, rápida, que trabaja en segundo plano y que optimiza las imágenes “al vuelo” según se van añadiendo, a coste cero.

  • OptimizadorIO le herramienta de optimización de imágenes definitiva

En Webempresa trabajamos siempre pensando en el retorno a la comunidad y millones de usuarios que hacen uso de herramientas tan molonas como lo es WordPress, por lo que contribuir en forma de plugin es la mejor manera de devolver a la comunidad lo que el CMS nos aporta.

Este plugin, como ya te contaba al principio, nace fruto del éxito que ImageOptimizer tiene entre nuestros clientes y queríamos dar la oportunidad a todos los usuarios de WordPress around the world de disfrutar de la posibilidad de tener sus imágenes optimizadas GRATUITAMENTE y de para siempre en todas sus webs con este CMS.

Write a Comment

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