Comment puis-je intégrer des images PNG directement dans HTML ?

Intégrer des 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 :

Encodez en Base64 l'image PNG :

Utilisez des encodeurs en ligne pour convertir l'image PNG en une 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 :

<code class="css">div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

Option de balise d'image :

Vous pouvez également intégrer la chaîne Base64 directement dans le fichier tag :

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!