Intégrer des images PNG dans des pages HTML

La tâche d'intégrer une image PNG dans une page HTML sans créer de lien vers le fichier image soulève la question : comment incorporer les données d'image directement dans le HTML ?

Intégration avec l'encodage Base64

L'encodage Base64 fournit une solution pour intégrer des images dans HTML. Il existe différents encodeurs Base64 en ligne, mais il est recommandé d'en utiliser un robuste comme celui trouvé sur http://www.greywyvern.com/code/php/binary2base64.

Cet outil présente deux principales options d'intégration. : en utilisant CSS ou la balise .

Intégration CSS

En CSS, l'intégration peut être réalisée comme suit :

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}

Intégration de balises

Alternativement, la balise peut être utilisée :

En utilisant l'encodage Base64, vous pouvez intégrer des images PNG directement dans des pages HTML, permettant ainsi l'affichage d'images sans avoir besoin de fichiers d'images externes.