Intégration d'images PNG directement dans HTML

L'intégration d'images PNG dans HTML permet un affichage direct dans le navigateur sans référencement de fichier externe. Pour y parvenir, utilisez la technique d'encodage Base64 :

Encoder l'image PNG en Base64 :

Utilisez des encodeurs en ligne pour convertir l'image PNG en chaîne Base64. Cette chaîne représente les données d'image binaires au format texte.

Incorporer la chaîne Base64 dans HTML :

Option CSS :

Définissez une classe CSS pour l'image et définissez la propriété background-image à l'aide de la fonction url() et de la chaîne Base64. Par exemple :

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

Option de balise d'image :

Vous pouvez également intégrer la chaîne Base64 directement dans la balise  :

Cela convertit l'image PNG en un schéma d'URI de données, ce qui permet au navigateur d'interpréter et d'afficher l'image directement.