Quando vale a pena inlinar uma imagem em base64?

Quando a imagem é minúscula (menos de ~2 KB), usada uma única vez, e a requisição HTTP extra seria uma parcela mensurável do peso da página. Casos comuns: um ícone SVG embutido num módulo CSS, um padrão de fundo pontual num template de e-mail, um logo inline para uma página de documentação estática.

Imagens grandes. Qualquer coisa acima de ~10 KB é melhor servida como arquivo separado porque (a) o navegador pode cacheá-la entre páginas, (b) o base64 adiciona ~33 % de sobrecarga, e (c) conteúdo inline não pode ser carregado em lazy. Imagens hero de marketing e fotos de produto quase nunca são boas candidatas a base64.

Qual é a sobrecarga de tamanho?

Cerca de 4/3 (33 % maior). 3 bytes binários viram 4 caracteres base64. Então um PNG de 12 KB fica ~16 KB depois de codificado. O gzip recupera parte disso na rede, mas não tudo.

Imagem para Base64

Converte uma imagem em Data URI (base64) com trechos CSS e HTML prontos para colar - ou cole um Data URI para pré-visualizar.

Solte uma imagem aqui ou clique para escolher

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Duas direções numa aba. Codificar: solte uma imagem, obtenha o `data:image/...;base64,...` mais trechos CSS e HTML prontos. Decodificar: cole um Data URI, pré-visualize, baixe a imagem. Nada sai do navegador.

Como usar

Escolha a direção
Codificar (imagem → base64) ou decodificar (base64 → imagem) pela troca de aba.
Solte ou cole
Codificar: arraste um PNG / JPG / WebP / SVG. Decodificar: cole uma string Data URI `data:image/...`.
Copie o trecho que precisar
Três trechos prontos: Data URI cru, CSS `background-image: url(...)`, HTML `<img src='...'>`.

O que é?

Base64 é uma codificação de texto para dados binários - a cada 3 bytes viram 4 caracteres ASCII tirados de `A-Za-z0-9+/`. Com o prefixo `data:image/png;base64,` (ou outro tipo MIME), o resultado é um Data URI: uma referência autônoma a uma imagem que navegadores, motores CSS e parsers HTML resolvem inline. O trade-off é um acréscimo de tamanho de ~33 % em troca de pular a requisição HTTP.

Quando usar

Embutir ícones SVG pequenos num módulo CSS, incluir um padrão de fundo pontual num e-mail HTML, inlinar um logo num PDF gerado no build, empacotar fixtures de teste, ou gerar uma imagem OG dinamicamente e servi-la como Data URI. Onde de outra forma você faria uma requisição HTTP extra por um recurso minúsculo.

Erros comuns

Inlinar uma foto hero de marketing e afundar o tempo de parsing do HTML. Esquecer de URL-encodar os caracteres `+`, `/` e `=` ao colocar o Data URI dentro de outra URL. Colar um Data URI sem o prefixo `data:image/png;base64,` (os navegadores rejeitam). E inlinar um recurso grande que o navegador poderia cachear entre páginas.

FAQ

Quando vale a pena inlinar uma imagem em base64?: Quando a imagem é minúscula (menos de ~2 KB), usada uma única vez, e a requisição HTTP extra seria uma parcela mensurável do peso da página. Casos comuns: um ícone SVG embutido num módulo CSS, um padrão de fundo pontual num template de e-mail, um logo inline para uma página de documentação estática.
Quando NÃO inlinar?: Imagens grandes. Qualquer coisa acima de ~10 KB é melhor servida como arquivo separado porque (a) o navegador pode cacheá-la entre páginas, (b) o base64 adiciona ~33 % de sobrecarga, e (c) conteúdo inline não pode ser carregado em lazy. Imagens hero de marketing e fotos de produto quase nunca são boas candidatas a base64.
Qual é a sobrecarga de tamanho?: Cerca de 4/3 (33 % maior). 3 bytes binários viram 4 caracteres base64. Então um PNG de 12 KB fica ~16 KB depois de codificado. O gzip recupera parte disso na rede, mas não tudo.