Incorporando imagens PNG em páginas HTML

A tarefa de incorporar uma imagem PNG em uma página HTML sem vincular ao arquivo de imagem levanta a questão : como incorporar os dados da imagem diretamente no HTML?

Incorporação com Base64 Codificação

A codificação Base64 fornece uma solução para incorporar imagens em HTML. Existem vários codificadores Base64 online disponíveis, mas é recomendado usar um robusto como o encontrado em http://www.greywyvern.com/code/php/binary2base64.

Esta ferramenta apresenta duas opções principais de incorporação : usando CSS ou a tag .

CSS Embedding

Em CSS, incorporação pode ser alcançado da seguinte forma:

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

Incorporação de tags

Como alternativa, a tag pode ser usada:

Ao utilizar a codificação Base64, você pode incorporar imagens PNG diretamente em páginas HTML, permitindo a exibição de imagens sem a necessidade de arquivos de imagem externos.