Hace unos días hablamos sobre la importancia de la velocidad en nuestra web, y hablamos de un optimizador para WordPress llamado WP-Rocket.
Su misión era optimizar nuestra web para que fuera más rápida optimizando el código JS, HTML, y CSS o pudiendo por ejemplo retrasar la carga de contenido bloqueante.
Hoy os hablo de otra parte muy importante de las webs, las imágenes. Generalmente, estas son las que más espacio consumen, y por tanto, para ser transferidas, obviamente necesitarán un mayor tiempo de procesamiento.
Para mejorar nuestra web en este aspecto, vamos a ayudarnos del plugin ShortPixel Image Optimizer.
Es un plugin gratuito, que se puede instalar desde la biblioteca de WordPress o descargarlo desde su propia web.
Una vez instalado, nos registramos y nos enviarán por email un código llamado API Key, el cual tendremos que usar para activar el plugin en nuestro sitio.
El registro, tambien podemos hacerlo una vez activamos el plugin, haciendo clic en “get your API Key“.
Ahora podremos acceder al plugin mediante el menu de WordPress lateral “Ajustes->ShortPixel“.
¿ Como funciona ?
Si antes de empezar a trastear queréis saber lo que este plugin os puede ayudar con vuestras imágenes, podéis hacer un test de vuestra web directamente en :
https://shortpixel.com/image-compression-test/site/ . En mi caso, me indican que en mi página principal, hay 11 imágenes, las cuales puedo comprimir un 24%.
Una vez insertamos nuestra API Key en el plugin, aparecerán todas las opciones posibles.
La configuración del plugin es bastante intuititva, algo que es de agradecer a los desarrolladores, pero veámosla punto a punto.
Lo primero, es decidir que tipo de compresión desearemos en nuestra web, pudiendo elegir entre:
- Lossy, ofreciendo la mejor tasa de compresión, y por tanto mejorando la velocidad de carga, pero el precio, es la pérdida de calidad.
- Glossy, la cual, ofrece un grado de compresión menor que Lossy, con lo que la calidad de la imagen será mejor, pero el tamaño será mayor. Si no te importa mucho la velocidad, esta es tu mejor opción.
- Lossless, es la que menor tasa de compresión refiere, pero sin pérdida, ya que son idénticas a las originales.
La siguiente opción que nos ofrece la aplicación es la de comprimir las imágenes en miniatura (thumbnails) algo altamente recomendable para mejorar la experiencia de navegación.
Una opción que me ha encantado y que algunos plugin similares carecen, es la posilibidad de hacer un backup de todas nuestras imágenes por si en algún momento deseamos recuperar las imágenes originales.
Para las fotos tomadas con cámara y subidas a la web directamente, estarán en formato CMYK, en vez de RGB, así pues, el plugin se encargará de modificarlas por ti si activamos la opción CMYK to RGB conversion.
Continuamos con la opción Remove EXIF, la cual elimina de nuestras imágenes datos innecesarios como datos GPS, fecha y hora de la toma, ya que estos datos ocupan espacio. Si queréis mantenerlos, desactivar la casilla.
La última opción que veremos es la opción de redimensionar la imágenes grandes hasta un máximo de tamaño que podemos establecer manualmente.
Si pasamos a la pestaña “Avanzado“, podemos agregar más directorios para que el plugin sea capaz de optimizar tanto las imágenes, como PDF.
Opcionalmente, podemos marcar la opción para crear imágenes WebP, el cual reduce vuestras imágenes hasta un 26% imágenes PNG y entre un 25%-34% las JPEG.
Por último, indicar que podemos excluir determinados ficheros, rutas o determinado tamaño de la optimización. Esta opción es muy útil, ya que se acabó el “todo o nada”, pudiendo ser el dueño de que imágenes queremos comprimir y cuales no.
Por último, dejaremos marcada la opción “Optimize media on Upload“, para que a partir de ahora, cuando subamos cualquier imagen a la web, sea automáticamente optimizada, sin tener que volver a ejecutar este proceso nuevamente.
Una vez está todo configurado… Pulsamos en “Save and Go to Bulk Process” y dejamos al plugin que trabaje por nosotros.
Desde que comienza el proceso, podemos visualizar imagen a imagen la compresión que se le ha aplicado y el tiempo estimado restante que queda pendiente.
En mi caso, el proceso para unas 4500 imágenes han sido unas 4 horas.
Os comento que cuando el plugin está en funcionamiento, si cerráis la pantalla, el plugin se pondrá en pausa, con lo que os recomiendo que cuando empecéis le dejéis trabajar hasta finalizar el proceso completo.
Una vez ha terminado, podemos ver si hubo algún error con alguna imagen. En mi caso fueron 4 imágenes.
Si lo deseáis, podéis acceder en el plugin en la pestaña “Statistics”, y deleitaros con los datos que nos muestran..
En mi caso en concreto, la media de compresión entre todos los ficheros ronda el 40.64%, lo que significa que no estaba muy optimizada 😉 y ahorraré en torno a 1,85 TB en ancho de banda por cada 10.000 impresiones de dichas imágenes, gracias a ShortPixel.
¿ Cuanto cuesta ?
Una vez lo habéis visto en funcionamiento, existen varias modalidades de usar ShortPixel, una es mediante planes mensuales y otra por número de compresiones.
De forma completamente gratuita, ShortPixel comprime las 100 primeras imágenes de tu sitio web cada mes.
Si por el contrario, tienes un blog con mucha “actividad”, a lo mejor te interesaría acceder a los siguientes planes:
- 5000 imágenes / mes -> 4,99$
- 12.000 imágenes / mes -> 9,99$
- 55.000 imágenes / mes -> 29,99$
Por otra parte, la otra opción es adquirir un paquete con un número de compresiones, algo que merece la pena si tu web ya lleva un tiempo funcionando y tienes 30.000 imágenes que comprimir.
- 10.000 imágenes -> 9,99$
- 30.000 imágenes -> 19,99$
- 50.000 imágenes -> 29,99$
- 170.000 imágenes -> 99,99$
Más Información | ShortPixel