Ce cours s'adresse aussi bien aux développeurs Web débutants qu'avancés. Il couvre tous les sujets, des principes de base permettant de s'assurer que les sources d'images sont demandées et affichées efficacement, jusqu'aux détails de la communication des formats d'image courants d'un serveur à un client. Tout au long de ce cours, vous allez apprendre à obtenir la plus petite taille de transfert possible pour vos images sans compromettre leur qualité (du moins de manière à ce que personne ne puisse les voir).
Vous pouvez parcourir la série du début à la fin pour comprendre le fonctionnement des images sur le Web moderne, ou vous en servir comme référence pour les concepts et modèles de balisage spécifiques que vous utiliserez dans votre travail quotidien.
Si vous débutez dans le développement Web, consultez les cours Apprendre le HTML pour connaître les principes de base du balisage, Découvrir le CSS pour connaître les principes de base du style et Découvrir le responsive design pour comprendre le rendu des images dans les mises en page responsives.
Vous y découvrirez:
Bref historique des images sur le Web
Historique des images sur le Web, en commençant par l'élément image en 1993
Principaux problèmes de performances
Découvrez comment vous assurer que vos requêtes d'images sont aussi petites et performantes que possible.
Images vectorielles
Découvrez SVG, le format d'image vectorielle utilisé sur le Web.
Images matricielles
Découvrez des images matricielles, telles que JPEG, GIF, PNG et WebP.
Formats d'image: GIF
Comprenez le format d'image GIF et expliquez comment fonctionne l'encodage d'image.
Formats d'image: PNG
Découvrez quel format d'image PNG est le plus adapté.
Formats d'image: JPEG
Découvrez le format d'image le plus courant sur le Web.
Formats d'image: WebP
Découvrez WebP et comprenez la différence entre ce format et les autres.
Formats d'image: AVIF
Le format de fichier AVIF (AV1 Image File Format) est un encodage basé sur le codec vidéo AV1 Open Source.
Images responsives
Présentation détaillée des images responsives
Syntaxe descriptives
Utilisation des attributs "srcset" et "sizes" pour fournir au navigateur des informations sur les sources des images et leur utilisation
Syntaxe prescriptive
Familiarisez-vous avec l'élément illustration.
Automatiser la compression et l'encodage
Intégrez facilement la génération de sources d'images hautement performantes à votre processus de développement.
Générateurs de site, frameworks et CMS
Découvrez comment les CMS tels que WordPress et d'autres générateurs de sites facilitent l'utilisation des images responsives.
Réseaux de diffusion de contenu image
Découvrez comment les CDN pour images peuvent transformer et optimiser le contenu d'une image.
Conclusion
Autres ressources
Alors, êtes-vous prêt à apprendre les images ?