When should I inline an image as base64?

When the image is tiny (under ~2 KB), only used once, and the extra HTTP request would be a measurable share of the page weight. Common cases: an SVG icon embedded in a CSS module, a one-off background pattern in an email template, an inline logo for a static documentation page.

When should I NOT inline?

Big images. Anything over ~10 KB is better served as a separate file because (a) the browser can cache it across pages, (b) base64 adds ~33 % overhead, and (c) inline content can't be lazy-loaded. Marketing hero images and product photos are almost never good base64 candidates.

What's the size overhead?

Roughly 4/3 (33 % bigger). 3 bytes of binary become 4 base64 characters. So a 12 KB PNG becomes ~16 KB once encoded. Gzip recovers some of that on the wire but not all.

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.

Roda no seu navegador

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.

Solte uma imagem aqui ou clique para escolher

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

Como usar

Pick the direction
Encode (image → base64) or decode (base64 → image) via the tab switch.
Drop or paste
Encode: drag a PNG / JPG / WebP / SVG. Decode: paste a `data:image/...` Data URI string.
Copy the snippet you need
Three ready snippets: raw Data URI, CSS `background-image: url(...)`, HTML `<img src='...'>`.

O que é?

Base64 is a text encoding for binary data - every 3 bytes become 4 ASCII characters drawn from `A-Za-z0-9+/`. When prefixed with `data:image/png;base64,` (or another MIME type) the result is a Data URI: a self-contained reference to an image that browsers, CSS engines and HTML parsers all dereference inline. The trade-off is a ~33 % size penalty in exchange for skipping the HTTP request.

Quando usar

Embedding small SVG icons in a CSS module, including a one-shot background pattern in an HTML email, inlining a logo in a build-time-generated PDF, bundling test fixtures in unit tests, or generating an OG image dynamically and serving it as a Data URI. Anywhere you'd otherwise need an extra HTTP request for a tiny asset.

Erros comuns

Inlining a marketing-hero photo and tanking the HTML's parsing time. Forgetting to URL-encode the `+`, `/` and `=` characters when putting the Data URI inside another URL. Pasting a Data URI without the `data:image/png;base64,` prefix (browsers reject it). And inlining a large asset that the browser could otherwise cache across pages.

FAQ

When should I inline an image as base64?: When the image is tiny (under ~2 KB), only used once, and the extra HTTP request would be a measurable share of the page weight. Common cases: an SVG icon embedded in a CSS module, a one-off background pattern in an email template, an inline logo for a static documentation page.
When should I NOT inline?: Big images. Anything over ~10 KB is better served as a separate file because (a) the browser can cache it across pages, (b) base64 adds ~33 % overhead, and (c) inline content can't be lazy-loaded. Marketing hero images and product photos are almost never good base64 candidates.
What's the size overhead?: Roughly 4/3 (33 % bigger). 3 bytes of binary become 4 base64 characters. So a 12 KB PNG becomes ~16 KB once encoded. Gzip recovers some of that on the wire but not all.

Conversor de imagem

Converte PNG, JPG, WebP e AVIF no seu navegador - sem upload, sem cadastro.

Codificador / Decodificador Base64

Codifica e decodifica strings Base64 (texto e arquivos).

Redimensionar imagem

Redimensiona imagens por pixels ou porcentagem no seu navegador - sem upload.