Optimización de imágenes en WordPress con ShortPixel

Una de las tareas más importantes para optimizar nuestra página web es la optimización de las imágenes.

En ocasiones subimos a nuestra página web imágenes cuyas dimensiones o peso son desproporcional para el hueco que van a ocupar, dando lugar así a un aumento del tiempo de carga o una mala experiencia de usuario si estas tardan en cargar.

Podemos utilizar nuestras imágenes de forma manual, con alguna herramienta o editor antes de subirlas a nuestra web, o si utilizamos WordPress, podemos utilizar también algún plugin, como Shortpixel.

Qué es Shortpixel Image Optimizer

Shortpixel es un plugin para la optimización y compresión de imágenes en WordPress.

Su principal función es permitirnos optimizar los ficheros multimedia (imágenes y PDFs) a medida que los subimos a nuestra instalación, y también el contenido que ya existe; pero también podemos encontrar otras opciones como la generación de imágenes WebP o AVIF y la restauración de imágenes en bloque o de forma individual, además de permitirnos redimensionar imágenes.

También podemos utilizar la herramienta web de la que dispone Shortpixel, si utilizamos otro CMS o necesitamos optimizar imágenes para otras funcionalidades: https://shortpixel.com/online-image-compression

Instalar y configurar Shortpixel Image Optimizer

Podemos instalar Shortpixel desde el administrador de nuestra web. En este vídeo podemos ver cómo realizarlo:

Una vez que hayamos instalado el plugin, lo primero que tendremos que hacer es instalar la clave de API. Si somos clientes nuevos, podemos solicitar una gratis en la ventana que nos aparecerá después de la instalación:



Una vez generada la clave (o configurada, si ya disponemos de ella), podremos acceder a la configuración del plugin (que se encuentra en el menú lateral "Ajustes > Shortpixel").

Esta configuración dispone de 2 modos: simple y avanzado; en este caso, vamos a ver las opciones del modo avanzado.

Overview

En esta página tenemos una vista rápida del estado de los archivos multimedia de nuestra web, además de estadísticas y recomendaciones para mejorar el rendimiento de nuestro sitio web.

Image Optimization

Aquí podremos seleccionar qué tipo de contenido queremos optimizar, además de los ajustes para la comprensión, conversión y cambios de tamaño.

Una cosa a tener en cuenta es que si seleccionamos ‘Optimizar las miniaturas’, estas contarán para la cuota total de créditos, por lo que si tenemos una cantidad de imágenes importante que optimizar y utilizamos una cuenta gratuita, por ejemplo, podemos consumir nuestra cuota total con facilidad.

También en este apartado tenemos la opción de redimensionar imágenes grandes (que puede sernos de utilidad si a lo largo de la vida de nuestra web hemos subido imágenes cuyas dimensiones pueden ser mayores que las utilizadas actualmente), y la opción ‘SmartCrop’, que nos permite recortar imágenes teniendo en cuenta el contenido de la imagen, de forma que evita eliminar contenido relevante para la imagen al recortarla.

Exclusiones

Si queremos que la optimización no afecte a alguno de los contenidos de nuestra web, podemos excluirlo desde este apartado.

Para ello podemos utilizar la exclusión según el tamaño de la miniatura, o bien patrones de exclusión, que podremos crear basándonos en el nombre de la imagen, la ruta o el tamaño.

Esta opción nos permite también utilizar expresiones regulares, que pueden servirnos para ampliar las funcionalidades de los patrones de exclusión.

Procesando

En este apartado podemos seleccionar cómo se procesa la optimización: habilitar la optimización del contenido al subirlo a nuestro sitio web, utilizar el modo en segundo plano (que utilizará las tareas cron para realizar la optimización), hacer un backup de las imágenes originales (se conservarán en nuestro alojamiento y debemos tenerlo en cuenta, ya que ocuparán almacenamiento del mismo) y si queremos que Shortpixel nos permita añadir directorios que no se incluyen en la biblioteca de medios (como pueden ser directorios del tema u otros plugins).

WebP/AVIF & CDN

En esta página encontraremos las opciones de imágenes de nueva generación: generar imágenes WebP e imágenes AVIF y cómo servir las imágenes de nuestra web: utilizando el CDN de Shortpixel (que reemplazará las imágenes con URL del CDN) o servirlas de forma local, en cuyo caso se servirán desde nuestra web utilizando la etiqueta "<picture>" o reglas de .htaccess/nginx.

Es aconsejable utilizar formatos de nueva generación, como WebP en nuestra web para mejorar la experiencia de usuario y también la puntuación de herramientas como PageSpeed.

Integraciones

Actualmente, Shortpixel permite 2 integraciones: una con las credenciales HTTP AUTH, que necesitaremos configurar si nuestro sitio web no es público y requiere contraseña para acceder, y otra con Cloudflare, que nos permite asegurarnos de que las imágenes que se optimicen o restauren con Shortpixel, se actualizarán automáticamente en Cloudflare.

Para configurar Cloudflare, tendremos que iniciar sesión en la cuenta de Cloudflare donde el dominio esté configurado y seleccionar el ID de zona y crear un Token de API, ambos desde la pestaña ‘Información general’ de Cloudflare.

Herramientas

Aquí podremos encontrar varias funcionalidades para hacer cambios de forma masiva en nuestras imágenes y datos de optimización: vaciar la cola de los elementos que están pendientes de optimización, limpiar errores de optimización (si algún elemento ha fallado por ejemplo), restaurar las imágenes originales, eliminar datos heredados (un formato antiguo para almacenar información de las optimizaciones de nuestra web), eliminar los datos de Shortpixel y borrar las copias de seguridad.

Centro de ayuda

En este apartado tenemos a nuestra disposición un enlace a la base de conocimientos, un formulario de contacto y además una función para solicitar alguna característica que podamos echar en falta o sugerencias de mejora.

Optimización por lotes

Una vez que hemos configurado el plugin, podemos ir a "Medios > Shortpixel en lotes", que nos permitirá iniciar la optimización.

Durante el proceso podremos ver el número de imágenes que detecta que se pueden optimizar, las imágenes con formato de nueva generación que sería posible crear y el total de créditos que esa optimización va a utilizar.

Shortpixel VS Imagify

Ambos plugins comparten la mayoría de funciones: optimización automática al subir contenido, backup de las originales, generación de formatos de imagen de nueva generación y redimensionar las imágenes, además de añadir carpetas personalizadas.

En general, por simplificación de la configuración, puede resultarnos más fácil de configurar y utilizar Imagify, no obstante, si necesitamos agregar exclusiones al proceso de optimización, Shortpixel puede adaptarse más a nuestro caso.