En varias ocasiones me he detenido a consultarle a diseñadores web que hacen para optmizar las imágenes a la hora de maquetar un sitio, y las respuestas fueron muy diversas y la mayoría sin sustento técnico. Los diseñadores en general no poseen ese espíritu de investigación que tienen los ingenieros, esa pasión técnica, la búsqueda de los por qué… Obviamente siempre hay excepciones para todas las generalidades. Si, también hay ingenieros que se saben vestir bien y tienen buen gusto 
Dado que el 62% del tiempo de carga de un sitio es debido a las imágenes, creo que todos les debiéramos prestar una mayor atención.
Emprecemos por entender las bases de las imágenes comprimidas:
Formatos de imágenes
Hay muchos formatos de imágenes pero unos pocos se utilizan en web por ser soportados por la mayoría de los navegadores, cada uno tiene ciertas particularidades que lo hacen necesario en el ecosistema visual de la web, entender estas propiedades nos dará la posibilidad de usarlos mejor.
Para empezar debemos entender que estos formatos lo que realizan es compresión de la imagen original, obviamente al comprimir estamos perdiendo calidad. Hay dos tipos de compresión lossy y loseless.
Al comprimir de forma lossy al descomprimir la información no obtendremos la misma imagen original. Pero esto solamente será notado cuando miremos muy a fondo el resultado. Por eso y que además usan menos cantidad de memoria, es que este tipo de compresión es usado para web.
En contraposición, al descomprimir una imagen loseless obtenemos la misma que la original. La desventaja es la cantidad de memoria utilizada.
JPEG
Este formato es lossy y nos permite controlar el nivel de compresión en la mayoría de los editores de imagen.
Se utiliza para comprimir imágenes con millones de colores, como las fotografías, dibujos con muchas sombras, imágenes con muchos degrades, etc.
GIF
Este formato es un bitmap, o sea un arreglo/matriz de pequeños píxeles cuadrados. La información de cada pixel es guardada, por ello es que se puede obtener la imagen original tras su descompresión (loseless). Se pueden guardar 256 colores y los píxeles pueden ser transparentes.
Una ventaja de este formato es que pueden tener más de un frame para hacer animaciones.
Se utiliza para imágenes con pocos colores, botones, bullets, imágenes de texto, colores planos, etc.
PNG
Existen dos tipos de PNG: PNG8 y PNG24. La ventaja del PNG24 (truecolor) es la profundidad de colores y las transparencias que puede manejar, junto a una gran compresión. El PNG8 tiene todas las propiedades del GIF (excepto la animación) con una mayor compresión, debido a esto es que no recomiendo usar GIF.
Sin dudas es el mejor formato para comprimir imágenes que poseen transparencias y una cantidad importante de colores. Su compresión es loseless, por ende el espacio en memoria utilizado es mayor que el JPEG.
Renderización: Progressive (Interlaced) vs Baseline
Si hay algo que a los heavy users de internet odiamos, son los tiempos lentos de carga y renderización. No por nada huimos de sitios hechos en flash…
Al exportar una imagen en Photoshop utilizando “Save for Web & Devices”, veremos que si elegimos como formato JPEG, dentro de las opciones tenemos progressive, qué es esto? Bueno existen dos tipos de JPG: los progressive que están compuestos por una serie de escaneos de la imagen original incrementando su calidad en cada uno de ellos, y los baseline que son una captura completa de la imagen a alta resolución. Del mismo modo que el formato analiza la imagen es también como el navegador la renderiza: progresivamente o en bloque.
Nuestra cultura occidental nos inculcó que “más rápido es mejor”, y para el caso de la carga de las imágenes progressive es mejor. Ya que al cargar un sitio la imagen aparece inmediatamente en baja calidad y progresivamente va mejorando a medida que se descarga el resto de los datos: La velocidad percibida es más importante que la velocidad real. Actualmente el 92% de los JPEG son baseline, como en una época la mayoría de los usuarios navegaban con IE… Y es por el mismo motivo: es la opción por default.
Es común creer que los JPEG progressive ocupen más memoria, como lo hacen las imágenes interlaced (PNG), pero como denota Stoyan Stefanov en su libro Book of Speed después de haber realizado pruebas con 10000 imágenes, las mayores a 10k usando la opción progressive ocupan menos espacio. Y cuando una imagen baseline es menor es por un porcentaje muy chico, mientras que cuando es menor la progressive es por un porcentaje bastante alto.
Se preguntarán cuanto CPU utilizan estas opciones al renderizar un JPEG: lo mismo, obvio que este es un dato importante para quienes desarrollan para dispositivos móviles.
Facebook utiliza progressive en las fotos hace tiempo, de a poco todos los grandes sitios que les interesa la experiencia de usuario migrarán a esta opción y empujarán que todos los navegadores den soporte completo a progressive (actualmente cargan en todos los navegadores, pero no en todos renderiza de la mejor forma).
A optimizar 