Integração de imagens PNG diretamente em HTML

A incorporação de imagens PNG em HTML permite a exibição direta no navegador sem referência de arquivo externo. Para conseguir isso, utilize a técnica de codificação Base64:

Codifique a imagem PNG em Base64:

Use codificadores online para converter a imagem PNG em uma string Base64. Esta string representa os dados da imagem binária em formato de texto.

Incorpore a string Base64 em HTML:

Opção CSS:

Defina uma classe CSS para a imagem e defina a propriedade background-image usando a função url() e a string Base64. Por exemplo:

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

Opção de tag de imagem:

Como alternativa, incorpore a string Base64 diretamente na tag :

Isso converte a imagem PNG em um esquema de URI de dados, que permite ao navegador interpretar e exibir a imagem diretamente.