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?