Optimización de imágenes para mejorar la velocidad de carga de una web

Este artículo será de mucha ayuda para todos aquellos que lleven idea de optimizar la velocidad de carga de su página web.

Según mi experiencia personal en temas de optimización de webs, considero que hay que intentar sacar el mayor partido a nuestras imágenes ya que suponen alrededor de un 30% de mejora a la hora de cargar una página web.


Debemos tener en cuenta que a mayor tamaño de foto, mayor será el tiempo de petición http y sobretodo mayor será la respuesta del servidor para recibir esa foto.
Hace un par de semanas realicé una prueba con una foto desde el mismo servidor y a la misma hora del día (Para evitar los flujos de internet). Mi teoría fue la siguiente:

Cuando la foto pesaba: 200kbs:
- Tiempo de respuesta del servidor: 1.67 segundos a 2.10 segundos.

Cuando optimicé la foto a 60kbs:
- Tiempo de respuesta del servidor: 500 ms a 1 segundo

Ahora bien, imaginaros que en vez de tener una sola foto, tenemos 30, ¡Simplemente pensar y realizar cuentas…! 30 fotos con un tamaño en KB excesivo provocará un tiempo de respuesta enorme en el servidor ¡Debemos evitar eso!

¿Cómo optimizar las imágenes para reducir el tiempo de respuesta?
La cuestión es reducir el peso de la foto sin perder calidad visible de la misma. Para ello hay muchas maneras:
1. Si usas el complemento de PageSpeed Insights de Google para páginas web, verás que te ofrece la disponibilidad de tener las mismas imágenes ya optimizadas.

2. Yahoo Smush.It, es un software online de Yahoo, está bastante bien, es cómodo y sencillo, simplemente deberemos subir la foto y descargar la nueva foto que nos proporcione el programa.



3. Riot, este es un programa que debes descargar en tu ordenador, considero que es el mejor. Puedes configurarlo a tu gusto y determinar el peso de la foto, así como la calidad de la misma, ya que dispone de una previsualización.