Curso de Optimización de Imágenes para la Web
Aprende a optimizar las imágenes de una web o aplicación y mejora rápidamente los resultados del proyecto
Material disponible
Intermedio
8 Clases 11 h
89€
69€
Precio en promoción
El Curso de Optimización de Imágenes para la Web te permitirá mejorar rápidamente los resultados de tu proyecto mediante la optimización de las imágenes incluidas en una web o aplicación.

Qué aprenderé en el 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

Objetivos del curso

  • 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.

Qué tengo que saber

Esta iniciativa está dirigida a todos los que de cualquier manera participen en un proyecto web. Para sacar el máximo provecho de este curso es suficiente con un conocimiento básico en HTML.

Clases y contenidos

Análisis de Rendimiento Web I Gratis

Repasamos varios proyectos web en busca de errores que generan problemas de rendimiento.

Análisis de Rendimiento Web II Gratis

Segunda parte del "clinic de rendimiento" con el equipo de Perf Review.

Análisis de Rendimiento Web III Gratis

Última parte de la sesión en busca de errores que generan problemas de rendimiento en un proyecto web.

Imágenes en la web - El mejor formato según su uso
  • Importancia de las imágenes para los contenidos de nuestras webs y apps.
  • El formato correcto según el dispositivo.
Optimización de imágenes
  • Herramientas para comprobar si nuestras imágenes deben optimizarse.
  • Herramientas online, en el navegador y herramientas CLI (para poder analizar la imágenes desde la consola) para proyectos de apps nativas o juegos.
Automatización y validación de imágenes
  • Algoritmos de validación ¿cuáles son los que utilizan los compresores más utilizados y cómo podemos integrarlos en nuestros desarrollos?
  • Creación de un entorno de desarrollo para automatizar la optimización de imágenes y su validación.
  • Package de node para poder integrarlo con varios de los workflows que utilizamos en el desarrolo de webs modernas.
  • Creación de un benchmark y elección del optimizador que más se adapte a nuestro desarrollo.
Velocidad de carga: Percepción vs Realidad
  • Entorno de desarrollo para webpack y análisis de diferentes soluciones para mejorar la percepción de velocidad.
  • Soluciones implementadas por Facebook, Pinterest y Google.
  • LQIP loader.
Últimos recursos para la Optimización de Imágenes

Trucos, recursos, documentación y herramientas que debemos conocer para mejorar nuestros conocimientos en optimización de imágenes.

Valoraciones

Luis Mas

William Rincón

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete