¿Cómo optimizar las imágenes PNG y JPG para tener un sitio más rápido?

Tener un sitio o página web rápida y liviana es muy importante, no porque Google lo pida, sino por que tus lectores lo agradeceran, y es para ellos que escribes verdad?

Si tienes un sitio con muchas imágenes, pues es posible que las páginas sean algo pesadas, y por lo tanto carguen lentamente, lo mejor que puedes hacer es optimizar las imágenes para optimizar un poco el tiempo de carga de la página web.

Veamos ahora como realizar esa tarea para los archivos jpg y png

Optimizar archivos jpg o jpeg

Vamos a utilizar las siguiente herramientas para lograr este objetivo: jpegtran y jpegoptim, así que lo primero es instalarlas (En mi caso en Ubuntu eso sería)

sudo apt-get install jpegoptim libjpeg-progs

Ahora utilizando jpegoptim vamos a comprimir y además reducir la calidad de los archivos hasta el 80%, una imágen con calidad de 80% aún se ve muy bien en la web, y la verdad no se requiere más.

find . -name "*.jpg" | xargs jpegoptim -m 80 -t

Si no quieres bajar la calidad de las imágenes, puedes usar este otro comando:

find . -name "*.jpg" | xargs jpegoptim -t

Utilizando jpegtran vamos a convertir esos archivos en imágenes de formato progresivo, la gran diferencia con las imágenes regulares, es que cargan capa por capa, es decir en lugar de ver como la imagen se va "dibujando" línea por línea, vemos que aparece toda una capa, y luego otra encima, hasta que alcanza la calidad final, esto da una mejor experiencia al usuario, pues da la impresión que la imágen carga más rápido.

for img in `ls *.jpg`; do jpegtran -copy none -optimise -outfile $img $img; done

Optimizar archivos png

Otro formato muy popular en páginas web, es el formato png, veamos como optimizar este tipo de archivos.

sudo apt-get install optipng

Con eso hemos instalado optipng, que es la herramienta que nos va a ayudar en nuestra tarea.

find . -name "*.png" | xargs optipng -o5 -quiet -preserve -log optipng.log

Lo que hace ese comando es buscar todos los archivos con extensión png en el directorio actual y todos los subdirectorios, luego a cada uno le aplica el comando optipng indicando con un nivel de optimización 5, el cual es algo lento pero efectivo, preservando los atributos del archivo, y generando un archivo log en este caso en optipng.log

Eso es todo, espero y le ayude a alguien a hacer el Interent más rápido.


¡Solicite presupuesto!