Optimizar las imágenes es algo vital en WordPress por dos motivos: la optimización de los tiempos de carga de la web (algo que afecta tanto a la experiencia del usuario como al SEO) y evitar que el espacio de almacenamiento usado en el servidor aumente de forma descontrolada.

En cuanto al primer punto está bastante claro: si cada página tiene que cargar varias imágenes pesadas, la carga se ralentiza. Y los usuarios de internet son (somos) hoy día muy impacientes, el tiempo medio de espera (lo que el visitante está dispuesto a esperar antes de cerrar la ventana e irse) es de tres segundos. Todo lo que lo supere hace crecer exponencialmente la tasa de abandono. Esto es especialmente importante en un comercio electrónico, en el que un segundo más de carga de la página puede suponer muchas ventas menos.

Por otra parte, cada vez que subes una imagen a la galería de medios de WordPress automáticamente se generan varias (mínimo tres) versiones de esa misma imagen, miniaturas en diversos tamaños (los que tengas establecidos en Ajustes > Medios) que WordPress, o mejor dicho la plantilla que tengas, utiliza en distintos lugares. Si además tienes instalado WooCommerce y/o algún plugin de portfolio el número de imágenes resultantes se dispara, ya que cada uno genera sus propias miniaturas, al igual que muchas plantillas crean también sus propias versiones de cada imagen. El resultado es que el número de archivos subidos se multiplica por tres, cuatro, cinco o a veces más. Y también el espacio ocupado en el servidor.

Por eso es vital optimizar las imágenes que subamos a WordPress, algo que podemos hacer de varias formas.

Controlar el modo en que WordPress optimiza las imágenes

Para optimizar espacio y transferencia, WordPress ya realiza por defecto una pequeña optimización de las imágenes en JPG (todo esto no se aplica a los PNG). De hecho, cada imagen que subes a la galería de medios pierde un 18% de su calidad (y de su peso) gracias a esta optimización automática.

Esto puede ser algo positivo o negativo. Si son sólo imágenes para ilustrar algún artículo puede ser beneficioso ya que te ayuda precisamente a optimizar estas imágenes. Sin embargo quizá no te interese que las imágenes subidas a WordPress pierdan calidad por varios motivos, como por ejemplo:

• Eres fotógrafo y quieres mostrar tu trabajo con fotografías de alta calidad
• Es una imagen de producto para una tienda online y debe verse perfecta
• Vas a utilizar la imagen como cabecera o como fondo y no quieres imperfecciones
• O quizá ya has optimizado la imagen manualmente (como veremos ahora después)

Afortunadamente este valor (el de conservar sólo un 82% de la calidad de la imagen original) se puede cambiar bien por código o bien utilizando un plugin, tal y como explico en este otro artículo.

La cuestión es saber encontrar un compromiso entre la calidad de la imagen y su peso, para evitar que la imagen se vea con calidad pobre pero también que la página no tarde excesivamente en cargar por el peso de las imágenes.

Arriba una imagen optimizada, con un compromiso entre calidad y peso. Abajo, imagen sobreoptimizada con mucha pérdida de calidad.

Optimizar las imágenes tú mismo

Si eres un perfeccionista y tienes tiempo y ganas, lo mejor es siempre optimizar las imágenes tú mismo, de forma que puedas controlar exactamente cómo queda cada imagen. La solución ideal para perfeccionistas maniáticos del control… como yo. Para ello es importante que utilices la función de la que hablaba en el apartado anterior: si optimizas la imagen a tu gusto y después WordPress le quita un 10% adicional de calidad, el resultado será una calidad pobre o, al menos, menor de la que tú habías establecido.

Para ello tendrás que utilizar un software de edición de imágenes. Como el más extendido es Photoshop, ése es el que voy a mencionar aquí, pero como las operaciones que hay que hacer no son avanzadas, cualquier otro programa medianamente aceptable te servirá si no tienes Photoshop. Una alternativa libre (y por tanto gratuita) y de calidad que además tiene versión para Windows, Mac y GNU/Linux, es GIMP.

El proceso es, como digo, bastante sencillo. Lo primero a tener en cuenta es redimensionar la imagen al tamaño que se va a mostrar. No tiene sentido publicar una imagen con 3000 píxeles de ancho para mostrarla en la web a 500px, porque pesará mucho más de lo necesario.

Por lo demás, la opción para guardar la imagen en el formato óptimo la tienes en Archivo → Guardar para Web…. Verás un cuadro de diálogo como éste:

Las partes importantes las tienes destacadas con un cuadro rojo. Arriba a la derecha tienes el selector de calidad, con cinco valores preestablecidos:

• Baja
• Mediana
• Alta
• Muy alta
• Máxima

No necesitarás tantos, normalmente lo correcto estará en Mediana o en Alta. Puedes ir probándolas y previsualizar el resultado en el panel. La gran mayoría de veces bastará con Mediana, a no ser que la imagen incluya textos o degradados, en cuyo caso quizá merezca la pena elegir Alta.

A la derecha tienes un control deslizante con la leyenda Calidad. Como su nombre indica, con él puedes ajustar la calidad manualmente a un porcentaje concreto.

En cualquier caso, abajo a la izquierda podrás ver el peso que tendrá la imagen resultante. Obviamente, cuanto menos mejor, pero por debajo de los 100 Kb es suficiente. A no ser que vayas a incluir muchas imágenes en una misma página.

WP Smush

Y como no podía ser de otra forma tratándose de WordPress, siempre podemos echar mano de un plugin. En este caso el más recomendable (y recomendado) es el plugin gratuito WP Smush, capaz de optimizar las imágenes automáticamente al momento de subirlas a tu biblioteca de medios.

Al activarlo aparecerá una nueva pantalla de opciones en Medios → WP Smush, donde podrás ver las estadísticas de imágenes optimizadas, el ahorro en Kb y en porcentaje que esa optimización te ha supuesto, o realizar una optimización en grupo de las imágenes de tu biblioteca de medios.

Algo más abajo tienes también las opciones del plugin, como si deseas activar la optimización automática durante la subida o qué miniaturas (de las que generan WordPress, tu plantilla y los plugins que uses) quieres optimizar. Lo mejor es dejarlo todo como está por defecto, a no ser que seas fotógrafo o tengas requerimientos especiales, en cuyo caso quizá desees dejar alguno de los tamaños sin tocar (seguramente el original) y decirle que conserve los datos EXIF (por defecto los elimina para reducir el tamaño del archivo).

Por último, si vas a la biblioteca de medios y ves el detalle de cualquier imagen que no esté optimizada, verás un botón para optimizarla automáticamente con WP Smush. Si ya está optimizada, podrás ver las estadísticas de ahorro de tamaño de archivo para cada una de las miniaturas de esa imagen.

Conclusiones

Como has podido ver, optimizar una imagen en WordPress es una tarea que, aunque si la realizas tú mismo puede llevar bastante trabajo, se puede automatizar y convertirse en algo fácil y rápido. Algo que además tiene un triple beneficio:

• Mejora la experiencia de usuario, disminuyendo la espera durante la carga de la página
• Mejora el SEO, debido también a esa mayor rapidez de carga
• Ahorra espacio en el servidor

Así que no tienes excusa para no hacerlo. Si te ha quedado cualquier duda o tienes alguna consulta sobre este o cualquier otro tema relacionado con WordPress o WooCommerce me tienes a tu disposición tanto en los comentarios como a través del formulario de contacto.