Te damos la bienvenida a Learn Images

Este curso se creó para desarrolladores web principiantes y avanzados y abarca todos los aspectos básicos, desde los aspectos básicos para garantizar que las fuentes de imágenes se soliciten y rendericen de manera eficiente, hasta los detalles de cómo se comunican los formatos de imagen comunes de un servidor a otro. A lo largo de este curso, aprenderás a lograr los tamaños de transferencia más pequeños posibles para tus imágenes sin comprometer su calidad; al menos, no de una forma que nadie pueda ver.

Puedes ver la serie de principio a fin para comprender de forma integral cómo funcionan las imágenes en la Web moderna, o usarla como referencia para los conceptos específicos y los patrones de marcado que utilizarás en tu trabajo diario.

Si no tienes experiencia en el desarrollo web, consulta los cursos de Aprende HTML para conocer los conceptos básicos del uso del lenguaje de marcado, los cursos Aprende sobre CSS para aplicar estilos básicos y los cursos Aprende sobre el diseño responsivo para comprender cómo se renderizarán las imágenes en los diseños responsivos.

Esto es lo que aprenderás:

Una breve historia de las imágenes en la Web

Una historia de imágenes en la Web, comenzando con el elemento de imagen en 1993

Problemas clave de rendimiento

Aprende formas de garantizar que tus solicitudes de imágenes sean lo más pequeñas y eficaces posible.

Imágenes vectoriales

Obtén información sobre SVG, el formato de imagen vectorial que se usa en la Web.

Imágenes de trama

Descubre imágenes de trama, como JPEG, GIF, PNG y WebP.

Formatos de imagen: GIF

Comprender el formato de imagen GIF y una explicación de cómo funciona la codificación de imágenes

Formatos de imagen: PNG

Descubre cuándo PNG es el mejor formato de imagen para elegir.

Formatos de imagen: JPEG

Obtén más información sobre el formato de imagen más común en la Web.

Formatos de imagen: WebP

Obtén información sobre WebP y comprende la diferencia entre este formato y otros.

Formatos de imagen: AVIF

El formato de archivo de imagen AV1 (AVIF) es una codificación basada en el códec de video AV1 de código abierto.

Imágenes responsivas

Un análisis detallado de las imágenes responsivas

Sintaxis descriptivas

Usar srcset y size para proporcionarle al navegador información sobre las fuentes de imágenes y cómo se usarán

Sintaxis prescriptiva

Obtén información sobre el elemento de imagen.

Automatización de la compresión y la codificación

Haz que la generación de fuentes de imágenes de alto rendimiento sea una parte fluida de tu proceso de desarrollo.

Generadores de sitios, frameworks y CMS

Descubre cómo los CMS, como WordPress, y otros generadores de sitios pueden facilitar el uso de imágenes responsivas.

Redes de distribución de contenidos de imágenes

Descubre cómo las CDN de imágenes tienen la capacidad de transformar y optimizar el contenido de una imagen.

Conclusión

Algunos recursos adicionales.

¿Todo listo para aprender sobre Imágenes?