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

Bending sounds, una experiencia hermosa de domingo por la mañana en los subtes de NY City.

Me encanta ver como todo se modifica con la variable t. Si nos detuviéramos a observar, si realmente fuese posible y no nos absorbiera la rutina, las tareas, las responsabilidades, podríamos disfrutar de imágenes como estas:

Conocí El Bolsón y sus alrededores, unos paisajes que deslumbran hasta al viajero más experimentado.

El siguiente trailer es de la película TimeScapes, que lo disfrutes! (miren esos maravillosos cielos).

Via Acceso Directo

En poco tiempo ya estaré partiendo para Europa y la sensación que siento cada día al despertar es muy parecida a la que transmite este video, espero que les guste.

Si los hombres somos “animales” y estás de novio con una vegana,  ella no te puede romper los huevos porque sería sufrimiento animal?

Pensamientos nacidos entre un matambre de cerdo y una copa de vino

Abrí tus ojos, abrilos…
Mirá a tu alrededor, es hora de explorar, de descubrí. Viví…sientí. Reí!
La Tierra es un lugar fascinante, y la vida el regalo más grande que recibiste…
Hace cuanto que no sonreis por ser feliz?
Qué estás esperando?
Decile que la amás, besala y corré. Mirá hacia atrás con una sonrisa cómplice, ella la disfrutará tanto como vos…
Renunciá a los proyectos de otros e incursioná en los tuyos.
Dejá la casa de tus padres!! A qué le tenés miedo? Abandoná a las zonas de confort…
Fracasá, levantate y aprendé a equivocarte. Necesitamos del error…todos erramos muchas veces hasta lograr algo grande.
Esto, este mundo, este país, esta sociedad no va a cambiar sin que nosotros lo hagamos.
TU realidad no va a cambiar si seguis mirando como la vida se pasa entre twits y peleas idiotas de la farándula local…
Si vas a pelear, peleá por tus ideas y convicciones, no dejes que las pisoteen.
Aunque estés equivocado…discutí. Aprendé a defender una postura. La más necia, no importa.Te dará experiencia para enfrentar las cosas importantes de la vida…

Abrí los ojos…qué estás esperando?

Pronto viajaré a Europa, me gustaría traerme recuerdos como estos…

Muchos debieran saber que “Hay” es haber, “Ahí” es un lugar, “Ay” es una exclamación y “ahy” no existe. “Haya” es haber, “Halla” es encontrar, “Allá” es un lugar, “haiga” no existe. “Botar” es para la basura y “Votar” es su derecho de elegir. “Iba” es de ir, “Iva” es un impuesto, e “Hiba” no existe.”Valla” es un cartel grande, “Vaya” es ir y “Baya” es un fruto.

Cuando suena la alarma para despertar, arranca mi sistema operativo. Mis ojos no se abren hasta que no inicio sesión, que cada día tarda más en suceder. Se lo atribuyo a que analizar mi memoria parece ser muy complicado a medida que mi vida transcurre.

Esta lentitud para arrancar y la cantidad de errores que cometo en mi vida me dan indicios que mi sistema operativo es…windows vista. Es una lástima que mi arquitectura no esté soportada por Ubuntu.