Cuando realizar una página web siempre hay dos elementos que son lo que más pesan: imágenes y fuentes. Si lo piensas friamente, al final toda tu web es texto. Hablamos de tan solo unos Kbs en total. Pero una imagen, solo una, puede llegar a pesar varios Mbs. Por mucho que optimices tu HTML, CSS o Javascript, tendrás un elemento que te lastra. Si quieres que la navegación sea fluida obligatoriamente deberás optimizar tus imágenes. Eso significa que obtendrás la misma imagen con un tamaño inferior.

Tienes miles de aplicaciones a tu alcance, pero las más efectiva son por medio del terminal. Además, es la manera más cómoda de automatizarlo con Gulp u otro software.

JPEGs

guetzli

Último regalo de Google. Tal vez el mejor algoritmo para la compresión de imágenes JPEGs.

guetzli [imagen origen] [nombre una vez convertida]
guetzli pato.jpg pato_optimizado.jpg

guetzli-recursively

Lamentablemente no te indica el porcentaje que te has ahorrado ni funciona recursivamente buscando otras imágenes en las carpetas. Para ello puedes usar guetzli-recursively. Un script en python que he realizado y tengo en Github.

python3 guetzli-recursively.py [carpeta]
python3 guetzli-recursively.py img

Salida

img/tasks.jpg
Save 6%
img/portfolio/idecrea/space.jpg
It is not necessary to optimize
img/portfolio/home.jpg
Save 3%

jpegoptim

No optimiza tanto con Guetzli pero es muchísimo más rápido.

jpegoptim gato.jpg

Si quieres optimizar toda una carpeta tan solo deberás ejecutar.

find [carpeta] -name '*.jpg' -print0 | xargs -0 jpegoptim
find img -name '*.jpg' -print0 | xargs -0 jpegoptim

optipng

Para trabajar con PNGs nada mejor que optipng. Tienes 3 niveles para elegir como quieres de optimizado.

Normal.

optipng oca.png

Alto.

optipng -o5 oca.png

Muy alto.

optipng -o7 oca.png

Obviamente, cuanto más alto más lento será.