Gerador de CSS Background Image Base64

Gerador de CSS Background Image Base64

Converta imagens em declarações CSS background-image prontas para usar com data URIs Base64 incorporados. Solte uma imagem no campo acima, selecione o formato de saída CSS Background e cole o resultado diretamente na sua folha de estilo.

Como Usar

1. Solte um arquivo de imagem (PNG, JPG, SVG, WebP, GIF) na área de upload
2. Selecione “CSS Background” como formato de saída
3. Copie a declaração CSS gerada
4. Cole na sua folha de estilo

A saída fica assim:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);

Quando Usar Fundos CSS com Base64

Padrões repetidos pequenos

Padrões de fundo (pontos, listras, texturas) são geralmente imagens muito pequenas (4x4 a 16x16 pixels) repetidas com background-repeat. São ideais para incorporação Base64 porque o arquivo tem menos de 1 KB.

.pattern {
  background-image: url(data:image/png;base64,iVBOR...);
  background-repeat: repeat;
  background-size: 8px 8px;
}

Ícones somente CSS

Pseudoelementos (::before, ::after) podem exibir imagens com background-image ou content: url(...). Data URIs Base64 permitem usar imagens rasterizadas nesses contextos sem alterações no HTML.

Distribuições de arquivo único

Ao gerar PDFs, templates de e-mail ou HTML offline, incorporar todas as imagens como Base64 cria um arquivo autocontido. Sem imagens quebradas por referências ausentes.

CSS crítico

Incorporar um fundo de herói pequeno no CSS crítico garante que ele carregue na primeira pintura. Issó elimina o flash de fundo sem estilo que ocorre quando a imagem de fundo é um arquivo separado.

Propriedades CSS de Fundo e Base64

O data URI funciona com todas as propriedades CSS relacionadas a fundo:

.element {
  background-image: url(data:image/png;base64,...);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

E na forma abreviada:

.element {
  background: url(data:image/png;base64,...) center / cover no-repeat;
}

Múltiplos fundos também funcionam:

.element {
  background-image:
    url(data:image/svg+xml;base64,...),
    url(data:image/png;base64,...);
}

Considerações de Desempenho

Comportamento de cache

Uma imagem Base64 em CSS não pode ser armazenada em cache independentemente da folha de estilo. Se a folha de estilo mudar, o navegador baixa tudo novamente.

Tempo de interpretação

Navegadores interpretam CSS de forma síncrona. Um grande string Base64 em CSS atrasa a renderização.

Compressão Gzip

Texto Base64 tem alta entropia e comprime mal com gzip/brotli.

Recomendação

SVG vs Base64 para Fundos CSS

Para gráficos vetoriais, você tem uma escolha entre SVG codificado em Base64 e SVG codificado em URL:

/* Base64 SVG */
background-image: url(data:image/svg+xml;base64,PHN2Zy...);

/* URL-encoded SVG (geralmente menor) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");

SVG codificado em URL é tipicamente 10-30% menor que Base64 SVG porque SVG já é texto.

Para codificação de imagem em outros formatos, veja Imagem para Base64, SVG para Base64 ou PNG para Base64.