Imagens no CSS com codificação Base64

Quando em 2010 publiquei este artigo no Mocheco⊗Marafado, ainda era uma novidade experimental colocar as imagens directamente no CSS ou no HTML usando a codificação Base64.
De então para cá, a coisa evoluiu e a codificação Base64 tornou-se prática comum em muitos sites, incluindo no próprio Blogger.

Entretanto também surgiram outras formas de colocar imagens nos sites, principalmente ícones e fundos, tal como com o SVG ou o WebP, mas isso é assunto para outro dia...

NOTA: O texto seguinte é baseado no que escrevi há quase 12 anos...

---

No entanto devido à evolução que o assunto em questão sofreu desde então, tentei actualizar este artigo onde necessário, incluindo com alguns exemplos práticos.

Uma das coisas que mais atrapalha a visualização dum site ou blogue é a velocidade a que carregam as páginas...
E velocidade é importante na Net de hoje.
Sendo uma das razões para um visitante fartar-se de esperar até uma página carregue... e desistir, nunca mais voltando ao blogue/site aumentando a taxa de rejeição. :(

Isso é algo que sempre considero ao criar um novo template para um site ou para o Blogger, e uma das coisas que notei que pesam muito no carregamento duma página são as imagens que colocamos no CSS para servir como fundo, seja ao próprio corpo do blogue, ícone ou a algum outro elemento.

Após considerar os prós e contras, uma das coisas que decidi foi livrar-me dessas imagens sempre que possível.
E uma maneira de fazer isso é com a codificação Base64.

Atenção: antes de tentar modificar o código do blogue, é recomendado que salve sempre o modelo actual!

Explicando então o processo de colocar as imagens dentro do próprio código CSS...

Normalmente ao utilizar um template que contenha imagens de fundo, seja um template nativo do Blogger ou algum personalizado que tenha criado ou descarregado de algum site, o que se encontra no código CSS onde se utilizam imagens como fundo é o seguinte ou algo similar:

body {
  background: #000 url("URL_DA_IMAGEM.[png|gif|jpg|jpeg|svg|webp]") repeat scroll left top;
  color: #fff;
  font: 400 16px Ubuntu, sans-serif;
  margin: 0;
  min-height: 100vh;
}

Tomando como exemplo o código acima que se refere ao corpo (body) do blogue e que tem uma imagem de fundo alojada em qualquer site externo ao blogue.
Isso significa que ao carregar a página, o navegador tem que ir buscar essa imagem a esse site externo para carregar a dita cuja no blogue.
Essa "viagem" demora alguns milissegundos, o que pode não parecer muito, mas no caso de termos um Template/Modelo que utilize muitas imagens externas como fundo vai fazer muita diferença.

Ora para reduzir estes pedidos para essas imagens utilizadas nos fundos não existem muitas soluções.
Pesquisando sobre o assunto, a mais comum e recomendada é criar uma única imagem contendo todos os elementos necessários ao(s) fundo(s) e utilizar a técnica CSS Sprites, que basicamente significa utilizar o CSS de forma matemática para calcular onde a desejada porção dessa imagem única vai aparecer e como.

Confuso, não? :S

Claro que podemos utilizar mais do que uma imagem com esta técnica, eu mesmo já a utilizei antes mas para reduzir os pedidos de todas as imagens utilizadas nos fundos do blogue e miniaplicações, teria que ser tipo um génio matemático...
Ou usar um Gerador Online que faz o trabalho quase todo. :D

Mas, durante as minhas pesquisas tentando descobrir formas de reduzir o peso das paginas do blogue, eis que encontro uma outra solução para este problema das imagens nos fundos.
Claro que não é perfeita, tem as suas falhas, é um pouco trabalhosa de implementar e só funciona nas versões do Internet Explorer da versão 8 para cima, mas pelas estatísticas do meu blogue em 2010, o IE já era o 3º ou 4º navegador mais utilizado, estava perdendo força a cada dia que passava e entretanto evoluiu para o Edge deixando de ser uma preocupação. :G

Ou seja, caso considerem implementar esta técnica no vosso blogue, fica a recomendação:
Sempre dêem uma olhadela nas estatísticas do vosso blogue, vejam quais os navegadores mais utilizados pelos vossos visitantes e façam as contas para ver se compensa.

Então, esta técnica que vou mostrar e que estou actualmente utilizando neste blogue funciona da seguinte maneira:
Como qualquer outra informação na Net, as imagens também são dados informáticos que são codificadas numa linguagem a ser entendida pelos navegadores.
Ora neste caso, podemos codificar qualquer imagem que se deseje e colocar esse código directamente no CSS do nosso blogue, utilizando a codificação Base64 para converter cada imagem a utilizar em código Base64, o que pode ser feito com um dos muitos Conversores Online que existem actualmente (Inclusive, podem encontrar um no fim deste artigo ;) ).

Por exemplo, vejamos esta imagem em formato png:

Depois de convertida para Base64, obtemos o seguinte código:

Ver Código

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4jWNgGAVYgX09i5Br8jlh1+T3Iq5JdhSbJ+ieog0yUMg1MRBIL6LYQGG3pGhhl+S5gi4JukADD1BuoGvyKpChAo5J8sIuSUcoNcxXyCXpPENoKLOga7I1kL+QKI3irjHcQNtjRdxS0kBY0DXRE2QYUOyeiEuCKkgN0LuzgHgLTI2IS1KqoHOSJVYDgQoLgXgPEHdAcNJzoMvuiDknKoEV1NczAcVrEfJgNT1A+i7IYmxeaxBySSxAWJB0EeRiAh5jBOpbI+ScGEeUgSJuyeH4TBPyiOYD+uIZKJ1SxUABp2Q9YHK6L28fz0EVA4F6WoEurMclSZKBgi5pcqA0KeKSEkm0gcIuKUeAAe4C5DKiqwdmw2S82RCc5oCZH2jrOyh+DIploMH70cTBGJxcXJJMcBo4cgAAvI+BQeqtO2YAAAAASUVORK5CYII=

Ocultar Código

Parece complicado?
Depois de apanharmos o jeito, garanto que não é. :-`

Então agora que temos a imagem codificada, já a podemos colocar directamente no código CSS/HTML.
Antes de lhes mostrar como se faz, sugiro que dêem outra olhadela no primeiro código acima onde mostro como colocar uma imagem alojada em um site externo.

Vou ali beber um café enquanto fazem isso...

Então? Repararam como se faz?
Agora vou mostrar como colocar uma imagem codificada como fundo num elemento no CSS e directamente no HTML:

Ver Código

Nos estilos dum elemento no CSS, é desta maneira:

body {
  background: #000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4jWNgGAVYgX09i5Br8jlh1+T3Iq5JdhSbJ+ieog0yUMg1MRBIL6LYQGG3pGhhl+S5gi4JukADD1BuoGvyKpChAo5J8sIuSUcoNcxXyCXpPENoKLOga7I1kL+QKI3irjHcQNtjRdxS0kBY0DXRE2QYUOyeiEuCKkgN0LuzgHgLTI2IS1KqoHOSJVYDgQoLgXgPEHdAcNJzoMvuiDknKoEV1NczAcVrEfJgNT1A+i7IYmxeaxBySSxAWJB0EeRiAh5jBOpbI+ScGEeUgSJuyeH4TBPyiOYD+uIZKJ1SxUABp2Q9YHK6L28fz0EVA4F6WoEurMclSZKBgi5pcqA0KeKSEkm0gcIuKUeAAe4C5DKiqwdmw2S82RCc5oCZH2jrOyh+DIploMH70cTBGJxcXJJMcBo4cgAAvI+BQeqtO2YAAAAASUVORK5CYII=") repeat scroll left top;
  color: #fff;
  font: 400 16px Ubuntu, sans-serif;
  margin: 0;
  min-height: 100vh;
}

E directamente no HTML será da seguinte maneira:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4jWNgGAVYgX09i5Br8jlh1+T3Iq5JdhSbJ+ieog0yUMg1MRBIL6LYQGG3pGhhl+S5gi4JukADD1BuoGvyKpChAo5J8sIuSUcoNcxXyCXpPENoKLOga7I1kL+QKI3irjHcQNtjRdxS0kBY0DXRE2QYUOyeiEuCKkgN0LuzgHgLTI2IS1KqoHOSJVYDgQoLgXgPEHdAcNJzoMvuiDknKoEV1NczAcVrEfJgNT1A+i7IYmxeaxBySSxAWJB0EeRiAh5jBOpbI+ScGEeUgSJuyeH4TBPyiOYD+uIZKJ1SxUABp2Q9YHK6L28fz0EVA4F6WoEurMclSZKBgi5pcqA0KeKSEkm0gcIuKUeAAe4C5DKiqwdmw2S82RCc5oCZH2jrOyh+DIploMH70cTBGJxcXJJMcBo4cgAAvI+BQeqtO2YAAAAASUVORK5CYII=" alt="Um Icone Gosto" />

Ocultar Código

Para explicar como funciona, reparem no código da imagem convertida para Base64 acima:
• A VERDE especifica de que tipo de ficheiro se trata, neste caso de uma imagem (data:image)
• A LARANJA designa o formato da imagem: png|gif|jpg|jpeg|svg|webp
• A AZUL é onde está o tipo de codificação: Base64
• A VERMELHO é parte referente à imagem codificada, que para este exemplo é a mesma do exemplo acima.

Como disse, este método tem os seus prós e contras mas pelo que tenho visto no meu blogue, desta maneira não existem pedidos para imagens utilizadas nos fundos do blogue, miniaplicações e afins.
Tenho até notado que em determinadas páginas, as imagens incluídas nos estilos CSS com esta técnica, aparecem ainda mais rápido do que a página carrega.

Agora a questão que fica é, será que as vantagens desta técnica compensa as desvantagens?
Na minha opinião sim, mas isso depende da escolha que fazemos ao implementar um estilo ao blogue e em qualquer caso, mesmo em navegadores mais arcaicos que não reconheçam o código, se colocar uma cor por detrás da imagem tal como neste exemplo, será essa cor que aparecerá...

As maiores desvantagens que encontrei até agora com a codificação Base64 é que não é muito prático com imagens acima dum determinado tamanho... A codificação: Base64 aumenta em cerca de 33% o tamanho da imagem codificada, sendo a única vantagem a diminuição de pedidos HTTP.

Um grande contra é a utilização desta técnica para colocar imagens nos artigos, em parte devido ao tamanho mas também porque exactamente por serem grandes não compensa porque também vão demorar a carregar e neste caso, ainda é pior...
Resumindo, Base64 tem a sua utilidade ser for para imagens pequenas e para colocar no CSS como fundo dum elemento. Fora disso, melhor usar a alternativa. :)

Termino aqui este artigo, mas não sem deixar aqui o Conversor Base64 que eu utilizo há vários anos:

Conversor de imagem para Base64

Selecciona um arquivo

O código do Arquivo convertido em Base64

Pré-visualização da imagem

<img src="data:image/[png|gif|jpg|jpeg|svg|webp];base64,[...]" alt="A minha imagem maravilhosa">

Pré-visualização como fundo

div {
  background-image: url(data:image/[png|gif|jpg|jpeg|svg|webp];base64,[...]);
}

Conversor criado por Emilio Cobos

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?