Curso de Optimización de Imágenes para la Web

• Imágenes en la web - El mejor formato según el caso de uso

• ¿Mis imágenes necesitan optimización?

• Vale!, necesito optimizar mis imágenes

• ¿Me puedo fiar de la optimización automatizada?

• Optimización y validación de imágenes

• Velocidad de carga: Percepción vs Realidad

• Mejorar tus conocimientos en Optimización de Imágenes

• Imágenes en la web

Las imágenes representan más de un 60% del contenido del tráfico web. Desde los inicios de Internet las hemos tenido presentes, lo curioso es que año tras año el porcentaje y peso está creciendo. También las tenemos presentes en las apps que instalamos en nuestros dispositivos móviles. En esta sesión conoceremos con detalle la importancia que tienen las imágenes para los contenidos de nuestras webs y apps.

• El mejor formato según el caso de uso

Una vez tenemos claras las imágenes (y cantidad) para nuestro contenido, debemos poner atención en el formato correcto según el dispositivo. Hay más formatos de lo que creemos, así que vamos a conocerlos e identificar cual es mejor para nuestro caso de uso.

• ¿Mis imágenes necesitan optimización?

La respuesta corta y rápida es: Sí. Hay varias herramientas para comprobar si nuestras imágenes deben pasar por un proceso de optimización. Veremos herramientas online, las que tenemos disponibles en el navegador. Como las imágenes no sólo son para la web, también veremos herramientas CLI (para poder analizar la imágenes desde la consola) para nuestros proyectos de apps nativas o juegos.

• Vale!, necesito optimizar mis imágenes

Ahora que tenemos claro que debemos reducir el peso de las imágenes, vamos a conocer los diferentes codificadores, sus ventajas, inconvenientes, configuración e integración. En esta ocasión veremos cómo crear un workflow de optimización en nuestro entorno de desarrollo, cómo montar nuestro propio optimizador de imágenes en el lado del servidor con soluciones Open Source como Imageflow o Thumbor, y ver los diferentes servicios online que nos ofrecen una API para integrar la optimización de una forma sencilla y transparente.

• ¿Me puedo fiar de la optimización automatizada?

El equipo de diseño, en cuanto oigan hablar de optimización de imágenes de forma automática, seguro que se van a oponer por miedo a que las imágenes no cumplan con la calidad deseada. Tenemos disponibles herramientas que nos permiten poder implementar tests para poder validar esas compresiones. Conoceremos los diferentes algoritmos de validación, cuales son los que utilizan los compresores más utilizados y cómo integrarlos en nuestros desarrollos.

• Optimización y validación de imágene

Crearemos un entorno de desarrollo para automatizar la optimización de imágenes y su validación. Trabajaremos con un package de node para poder integrarlo con varios de los workflows que utilizamos en el desarrolo de webs modernas. Aprovecharemos esta sesión para crear un bechmark y elegir el optimizador que más se adapte a nuestro desarrollo o producto.

• Velocidad de carga: Percepción vs Realidad en la web

Este tema va más allá de la optimización de las imágenes... la percepción del usuario es muy complicada de medir, pero analizaremos diferentes estudios y soluciones para mejorar esa percepción. Vamos a ver las soluciones implementadas por Facebook, Pinterest y Google, así como algunas herramientas que han aparecido con este enfoque, como LQIP loader.

• Mejorar tus conocimientos en Optimización de Imágenes

Por último vamos a dedicar una sesión de la formación a ver los diferentes trucos, recursos, documentación y herramientas que debemos conocer para mejorar nuestros conocimientos en optimización de imágenes.