En tant que développeur web vous êtes censés connaître une règle d’or en terme de performances en web design : générer un minimum de requêtes HTTP surtout sur plateforme mobile où les temps de latence élevés représentent la norme.
Vous devez savoir que les Data URI (Uniform Resource Identifier) sont considérés comme des bonnes pratiques dans le domaine des performances web en réduisant ces requêtes.
Les Data URI permettent d’embarquer les images directement dans le code HTML ou dans la feuille de style en les encodant en une chaîne de caractères.
Utilisées pour des images de petite taille, les Data URI permettent aussi d'encoder du texte, des fichiers audio et vidéo, etc.
Elles se présentent sous ce format : data:[
Il vous faudra passer par un convertisseur en ligne qui transformera votre image en chaîne de caractères.
Ainsi le logo de Developpez.com ci-dessous :
Sera converti en Data URI :
| Code : | Sélectionner tout |
data:image/jpeg;base64,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
Dans son article Peter McLachlan :
- commente l’usage des images via Data URI et les images nécessitant des requête HTTP ;
- analyse les résultats de ses expériences ;
- suggère les futures bonnes pratiques concernant l’utilisation des Data URI dans le cadre de l’optimisation lors de la création de sites en version mobile.
- affichage d’images sur navigateurs mobile : requête HTTP contre Data URI ;
- 5 essais, image de 17,6kb, le temps le plus faible étant le meilleur ;
- couleur verte : affichage par requête HTTP ;
- couleur bleue : affichage par Data URI ;
- axe des ordonnées : temps moyen en ms.
Sans bannir l’utilisation de Data URI l’auteur conseille d’une part de les employer avec précaution et de privilégier le concept des sprites.
Lien vers l’articleEt vous ?
Comment intégrez-vous les images dans vos conceptions ? Êtes-vous un utilisateur des Data URI ? Cela changera-t-il votre manière de travailler ?