Data URI

Saviez-vous que vous n'aviez pas besoin d'utiliser un lien externe vers une image, vous pouvez embarquer les données de l'image directement dans votre document avec le format codé Data URI.

Par

Saviez-vous que vous n'avez pas besoin d'utiliser un lien externe vers une image lorsque vous utilisez un élément <img> dans HTML ou lorsque vous déclarez une background-image dans CSS ? Vous pouvez embarquer les données de l'image directement dans le document avec le format Data URI.

En CSS, ça ressemble à cela :

li { 
    background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat left center;
    padding: 5px 0 5px 25px;
}

En HTML, ça ressemble à :

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

Pour être plus précis, voici le format :

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

C'est donc une longue chaîne de caractères incompréhensibles, sauf pour les navigateurs bien sûr. Voici une page démo simple, qui ne fait appel à aucune ressource externe.

Pourquoi utiliser les Data URI ?

La principale raison : parce qu'elles permettent d'éviter des requêtes HTTP. Plus encore que la taille du document, c'est le facteur n°1 pour la rapidité de chargement de vos pages. Moins = Mieux.

Comment récupérer ce code ?

En utilisant par exemple cet outil de conversion en ligne. C'est le meilleur que j'aie trouvé. En voici un autre qui fonctionne en glisser/déplacer, ainsi que celui-ci ou celui-là.

Compatibilité navigateurs

Les data URI ne fonctionnent pas avec IE 5-7, mais sont compatibles à partir de IE 8. Vous pouvez :

  • Utiliser une feuille de style spécifique IE pour vos images, ou
  • Utiliser une stratégie d'amélioration progressive dans laquelle l'absence d'image pour les vieux navigateurs est acceptable, ou
  • Ne pas vous en faire,
  • Lire cet article (en anglais) sur une technique alternative.

Notes importantes

  • La taille du code embarqué est un peu plus grande que celle de la ressource elle-même, compression Gzip utile.
  • IE8 accepte au maximum des data URI de 32768 Bytes.
  • Il est plus difficile de maintenir un site avec des data URI embarquées. Il est plus simple de mettre à jour une image et de la remplacer.
  • Si vous utilisez PHP (ou PHP comme CSS), vous pouvez créer des data URI à la volée avec <?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>.
  • De l'importance du cache : avoir un fichier de 300k au lieu de 50k ne vaut la peine que si les 6 requêtes HTTP qu'il vous économise ne sont pas contrebalancées par la nécessité de recharger régulièrement le CSS. Fixez de longs délais d'expiration sur vos fichier CSS.
  • Les data URI ne sont pas limitées aux images, elles peuvent être littéralement tout ce que vous voulez.
  • <canvas> rendra peut-être tout cela obsolète quand la compatibilité sera meilleure et que de bons outils seront disponibles.
  • Si vous utilisez Sass, Compass a un outil.

Ressources complémentaires en français

Le Schéma data URI par SBoudrias
Cache et compression des pages web avec Gzip ou Deflate en HTTP par dew


original paru le dans CSS-Tricks.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Traduit avec l'aimable autorisation de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2010.