Integrar imágenes PNG directamente en HTML

Incrustar imágenes PNG en HTML permite la visualización directa dentro del navegador sin referencia a archivos externos. Para lograr esto, utilice la técnica de codificación Base64:

Codifique Base64 la imagen PNG:

Utilice codificadores en línea para convertir la imagen PNG a una cadena Base64. Esta cadena representa los datos de la imagen binaria en formato de texto.

Incorporar cadena Base64 en HTML:

Opción CSS:

Defina una clase CSS para la imagen y establezca la propiedad background-image usando la función url() y la cadena Base64. Por ejemplo:

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

Opción de etiqueta de imagen:

Como alternativa, incruste la cadena Base64 directamente en la etiqueta :

Esto convierte la imagen PNG en un esquema de URI de datos, que permite al navegador interpretar y mostrar la imagen directamente.