Optimisation des Images en Utilisant le Format Data URI

Travailler avec des images data URIs
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre le Responsive Design
Revoir le teaser Je m'abonne
Transcription

59,90€ 29,95€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ 29,95€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

Découvrez comment optimiser vos pages web en transformant des images en Data URI et en les incorporant directement dans votre HTML.

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.

Voir plus
Questions réponses
Pourquoi utiliser le format Data URI pour les images sur une page web?
Utiliser le format Data URI permet d'éviter les requêtes HTTP supplémentaires, ce qui peut améliorer la vitesse de chargement de la page web.
Quels sont les avantages d'incorporer une image en Data URI dans la balise img?
Incorporer une image en Data URI dans la balise img permet de référencer directement l'image sans avoir à charger un fichier externe, réduisant ainsi les temps de latence et les dépendances.
Quels sont les cas d'usage typiques pour les images en Data URI?
Les images en Data URI sont principalement utilisées pour de petits éléments graphiques comme les icônes, les puces ou les motifs de fond.

Programme détaillé