©2023 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
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
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
Repasamos varios proyectos web en busca de errores que generan problemas de rendimiento.
Segunda parte del "clinic de rendimiento" con el equipo de Perf Review.
Última parte de la sesión en busca de errores que generan problemas de rendimiento en un proyecto web.
- Importancia de las imágenes para los contenidos de nuestras webs y apps.
- El formato correcto según el dispositivo.
- 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.
- 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.
- 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.
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
Juan Caravaca
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 190 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.