Incrustar imágenes PNG en páginas HTML

La tarea de incrustar una imagen PNG en una página HTML sin vincularla al archivo de imagen plantea la pregunta : ¿cómo incorporar los datos de la imagen directamente en HTML?

Incrustar con codificación Base64

La codificación Base64 proporciona una solución para incrustar imágenes en HTML. Hay varios codificadores Base64 en línea disponibles, pero se recomienda utilizar uno robusto como el que se encuentra en http://www.greywyvern.com/code/php/binary2base64.

Esta herramienta presenta dos opciones de incrustación principales : usando CSS o la etiqueta .

Incrustación de CSS

En CSS, la incrustación se puede lograr de la siguiente manera:

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

Incrustación de etiquetas

Como alternativa, se puede utilizar la etiqueta :

Al utilizar la codificación Base64, puede incrustar imágenes PNG directamente en páginas HTML, lo que permite mostrar imágenes sin necesidad de archivos de imagen externos.