Cómo optimizar las imágenes de tu WordPress

En el artículo Cómo eliminar las imágenes inútiles de WordPress vimos cómo configurar bien nuestro WordPress para que no genere versiones inútiles de una imagen. La idea era ahorrar espacio en el servidor, recursos, optimizar.

En este artículo vamos a ver cómo optimizar esas imágenes restantes, las que sí son útiles y mostramos a nuestros usuarios, ahora no sólo estaremos ahorrando recursos del servidor sino que mejoraremos la velocidad de nuestro sitio, su rendimiento y por tanto el posicionamiento y la experiencia de nuestros usuarios.

Antes de optimizar

Antes de empezar a optimizar te aconsejo eliminar las imágenes inútiles. En elfinalde.com me deshice de muchas, logré eliminar 4GB.

Tenía una versión «inútil», era muy parecida a la que crea WP para «responsive», la medium_large para resoluciones de 768px de ancho. Decidí quedarme sólo con 3 versiones de cada imagen además de la original. Es cierto que cuantos más tamaños disponga mejor resultado tendrás, pero en este proyecto el nº de imágenes es muy grande, así que opté por reducir las opciones, la mayoría se muestran pequeñas en una galería (100×100) y se amplían en una lightbox, además como tienen carga perezosa no me preocupa.

Así que para que WP no me creara el código de imágenes responsive con <picture> lo desactivé:

function elfinalde_disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'elfinalde_disable_srcset' );


Cómo optimizar las imágenes en WordPress

Existen varias soluciones, desde la manual hasta la automatización con un cron y la línea de comandos (ver WP CLI). En medio hay varios plugins que nos facilitan el proceso de optimización.

Yo he utilizado ShortPixel, un plugin freemium gratuito hasta 100 imágenes al mes. Antes había utilizado EWWW Image Optimizer porque el volumen de imágenes en elfinalde.com supera con creces la centena, en cambio en muchos sitios será más que suficiente con la versión gratuita de ShortPixel.  La cuestión es que me contactaron para probarlo en elfinalde.com y el resultado ha sido brutal.

¡Alerta SPOILER! con ShortPixel pasé de 22,2GB a 9,9GB (ahorrado más de 12GB)

Principalmente el ratio de compresión es mucho mayor además de características como copias de seguridad. Puedes hacer un test online del % de optimización que puedes lograr con ShortPixel. En elfinalde ha sido del 79%. Siempre tendrás acceso a las estadísticas

La optimización se hace cada vez que subes una imagen aunque si ya tienes imágenes anteriores como era mi caso debes ejecutar la optimización en masa, por lotes. Tuve que procesar más de 70.000 imágenes, daros cuenta que cada tamaño es una imagen es 1 crédito, es decir, si tu sitio crea 4 versiones distintas de una imagen, el proceso se hará en 5 imágenes y también estarás consumiendo 5 créditos con ShortPixel. Por tanto asegúrate de no estar creando imágenes inútiles.

Entre las opciones os recomiendo que activéis la eliminación de datos EXIF y que limites el tamaño máximo sobre todo si esas subidas no son manuales, si la hace un cliente o es a través de una API, en mi caso lo he fijado a 1200px.

En los ajustes avanzados puede que te resulte llamativo crear una versión gratuita en formato WebP de Google. Con la configuración adecuada se incluirá esa versión en el elemento <picture> generado por WP. Yo lo hice, generé un imagen .webp por cada imagen pero me di cuenta que no sólo no ocupaban menos que su homónimo JPEG sino que muchas veces ocupaban más. Además de que si mi intención era ahorrar espacio en disco con esto lo estaba duplicando.

Otra opción que me dio problema es la de convertir los PNG en JPEG, aunque el proceso lo hace bien, la imagen destacada que usaba el PNG no se actualiza con el JPEG.

La optimización en lote te va informando del proceso, se hace en segundo plano y puedes seguir trabajando aunque siempre es recomendable no hacerlo por no saturar. Yo decidí para ahorrar créditos y recursos no optimizar las miniaturas, sólo las imágenes originales y tardó 4 días :O

Por último debes tener en cuenta que ShortPixel crea una copia de seguridad que te permite revertir ese proceso. Y claro, esa copia ocupa espacio en tu servidor, puedes eliminarla desde la misma interfaz de ShortPixel.

Conclusiones

Dependerá del tipo de web que tienes, si usas o no muchas imágenes. En un blog donde publiques un par de artículos a la semana tienes de sobra con ShortPixel gratuito pero en un proyecto con miles de imágenes tener bien optimizada tu librería de medios es muy importante. Date cuenta que no sólo ahorras el espacio en tu librería sino también cada vez que haces un simple backup.

En mi caso pasé de 26,5GB a 9,9GB.