Transformez et Incorporez Des Images en Data URI
Objectifs
Les objectifs de cette vidéo sont de comprendre le format Data URI, d'apprendre à convertir des images en Data URI, et d'incorporer ces images directement dans une page HTML en utilisant différentes méthodes.
Résumé
Découvrez comment optimiser vos pages web en transformant des images en Data URI et en les incorporant directement dans votre HTML.
Description
Dans cette leçon, nous explorons l'idée d'optimiser les images sur les pages web en utilisant le format Data URI. Le format Data URI permet d'intégrer directement les données de l'image dans le code HTML, évitant ainsi des requêtes supplémentaires vers le serveur.
Nous aborderons le processus de transformation d'une image en Data URI en utilisant le site dataurl.net. Après avoir glissé une image dans la zone dédiée du site web, l'image sera convertie et son poids affiché, qui est généralement légèrement supérieur au poids initial de l'image.
La leçon montre également deux méthodes d'incorporation des Data URI dans une page HTML : en utilisant la balise img et en plaçant l'image en arrière-plan de blocs div. Ces méthodes permettent non seulement d'alléger les requêtes vers le serveur, mais aussi d'améliorer potentiellement les performances et la vitesse de chargement des pages web.
Questions - réponses
Programme détaillé
Module 1 - Introduction video
Module 2 - Principes généraux
Module 3 - Réaliser une maquette en responsive Design
Module 4 - Maitriser l'intégration en Responsive Design
Module 5 - Le travail des textes
Module 6 - Intégrer des images optimisées
Module 7 - Une réalisation complète
Module 8 - Connaissances complémentaires
Module 9 - Conclusion
