Sesión en abierto
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.
Mantener una buena optimización de las imágenes nos permitirá mejorar la experiencia de usuario.
Contenido del curso
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.
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.
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.
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.
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.