¿Cuándo conviene inlinear una imagen en base64?

Cuando la imagen es diminuta (menos de ~2 KB), se usa una sola vez y la petición HTTP extra sería una parte medible del peso de la página. Casos típicos: un icono SVG incrustado en un módulo CSS, un patrón de fondo puntual en una plantilla de correo, un logo inline para una página de documentación estática.

¿Cuándo NO inlinear?

Imágenes grandes. Cualquier cosa por encima de ~10 KB se sirve mejor como archivo separado porque (a) el navegador puede cachearla entre páginas, (b) el base64 añade ~33 % de sobrecoste, y (c) el contenido inline no se puede cargar en diferido. Las imágenes hero de marketing y las fotos de producto casi nunca son buenas candidatas a base64.

¿Cuál es el sobrecoste de tamaño?

Aproximadamente 4/3 (un 33 % más). 3 bytes binarios se convierten en 4 caracteres base64. Así, un PNG de 12 KB pasa a ~16 KB una vez codificado. El gzip recupera parte de eso en la red, pero no todo.

Imagen a Base64

Convierte una imagen a Data URI (base64) con fragmentos CSS y HTML listos para pegar - o pega un Data URI para previsualizar.

Suelta una imagen o haz clic para elegir una

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

Dos direcciones en una pestaña. Codificar: suelta una imagen, obtén el `data:image/...;base64,...` más fragmentos CSS y HTML listos. Decodificar: pega un Data URI, previsualiza, descarga la imagen. Nada sale del navegador.

Cómo usarla

Elige la dirección
Codificar (imagen → base64) o decodificar (base64 → imagen) con el cambio de pestaña.
Suelta o pega
Codificar: arrastra un PNG / JPG / WebP / SVG. Decodificar: pega una cadena Data URI `data:image/...`.
Copia el fragmento que necesites
Tres fragmentos listos: Data URI en bruto, CSS `background-image: url(...)`, HTML `<img src='...'>`.

¿Qué es?

El base64 es una codificación de texto para datos binarios - cada 3 bytes se convierten en 4 caracteres ASCII tomados de `A-Za-z0-9+/`. Con el prefijo `data:image/png;base64,` (u otro tipo MIME) el resultado es un Data URI: una referencia autónoma a una imagen que navegadores, motores CSS y parsers HTML resuelven inline. La contrapartida es un sobrecoste de tamaño de ~33 % a cambio de ahorrarse la petición HTTP.

Cuándo usarla

Incrustar iconos SVG pequeños en un módulo CSS, incluir un patrón de fondo puntual en un correo HTML, inlinear un logo en un PDF generado en el build, empaquetar fixtures de test, o generar una imagen OG dinámicamente y servirla como Data URI. Donde de otro modo harías una petición HTTP extra por un recurso diminuto.

Errores comunes

Inlinear una foto hero de marketing y hundir el tiempo de análisis del HTML. Olvidar URL-codificar los caracteres `+`, `/` y `=` al meter el Data URI dentro de otra URL. Pegar un Data URI sin el prefijo `data:image/png;base64,` (los navegadores lo rechazan). E inlinear un recurso grande que el navegador podría cachear entre páginas.

Preguntas frecuentes

¿Cuándo conviene inlinear una imagen en base64?: Cuando la imagen es diminuta (menos de ~2 KB), se usa una sola vez y la petición HTTP extra sería una parte medible del peso de la página. Casos típicos: un icono SVG incrustado en un módulo CSS, un patrón de fondo puntual en una plantilla de correo, un logo inline para una página de documentación estática.
¿Cuándo NO inlinear?: Imágenes grandes. Cualquier cosa por encima de ~10 KB se sirve mejor como archivo separado porque (a) el navegador puede cachearla entre páginas, (b) el base64 añade ~33 % de sobrecoste, y (c) el contenido inline no se puede cargar en diferido. Las imágenes hero de marketing y las fotos de producto casi nunca son buenas candidatas a base64.
¿Cuál es el sobrecoste de tamaño?: Aproximadamente 4/3 (un 33 % más). 3 bytes binarios se convierten en 4 caracteres base64. Así, un PNG de 12 KB pasa a ~16 KB una vez codificado. El gzip recupera parte de eso en la red, pero no todo.