Codificador de imágenes Base64
Procesando…
Incluir una imagen pequeña como URI de datos Base64 puede evitar una solicitud HTTP y mantiene el recurso junto al HTML o CSS que lo utiliza. Esta herramienta del navegador acepta archivos PNG, JPEG, GIF y WebP validados, además de texto SVG que se analiza con una raíz <svg>, hasta 5 MiB. Genera Base64 sin prefijo, URI de datos, CSS, HTML o JSON. Comprueba que la salida elegida sea adecuada para el destino. El SVG solo recibe una comprobación estructural y aún puede contener contenido activo o inseguro.
Cómo codificar una imagen
-
1
Suelta tu imagen
Elige un PNG, JPG, GIF, WebP o SVG de hasta 5 MiB. Las imágenes rasterizadas no pueden superar 16.384 píxeles en ninguno de sus lados ni 33.554.432 píxeles en total. El texto codificado se mantiene por debajo de 7 MiB.
-
2
La codificación se realiza en el navegador
Los bytes de la imagen se leen, se codifican en Base64 y se prefijan con el encabezado URI `data:` correcto.
-
3
Elige el formato de salida
Base64 sin procesar, regla de CSS `background-image`, etiqueta HTML `<img>` o cadena segura para JSON.
-
4
Copia el resultado
Pega en una hoja de estilo, plantilla o cuerpo de API.
Cuándo vale la pena incluir imágenes
Candidatos que conviene evaluar y probar antes de incluir:
- Iconos de menos de 2 KB, Ahorra una solicitud HTTP con una sobrecarga mínima.
- Plantillas de correo - Los clientes de correo no admiten los URI de datos de forma uniforme. Prueba los clientes de destino y usa imágenes CID o alojadas cuando sea necesario.
- Marcadores de posición de imagen principal (LQIP), Versión borrosa de baja calidad en línea, imagen completa cargada después.
- SVG usados una vez, Como SVG es texto, un URI de datos codificado correctamente con porcentajes puede ser menor que Base64 según sus caracteres y formato.
Malos candidatos:
- Imágenes grandes, Inflar un 33% para una imagen de 500 KB es 166 KB de desperdicio.
- Imágenes reutilizadas en varias páginas, Incluir desactiva la caché del navegador entre rutas.
- CSS crítico, Incluir imágenes pesadas hace que el camino crítico se expanda.
Expectativas de tamaño
| Tamaño de imagen | Tamaño de cadena Base64 |
|---|---|
| 500 bytes | ~680 caracteres |
| 2 KB | ~2.7 KB |
| 20 KB | ~27 KB |
| 200 KB | ~270 KB |
Formato de URI de datos
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
- Esquema
data: - Tipo MIME
- Indicador
;base64, - Los bytes codificados
SVG es un caso especial
Base64 amplía los bytes originales del SVG aproximadamente un tercio antes de añadir la sintaxis envolvente; la codificación porcentual solo añade longitud a los caracteres que deben escaparse. La opción más corta depende del SVG. La forma textual debe usar un valor data:image/svg+xml,... codificado correctamente con porcentajes: el token ;utf8 no es un parámetro estándar de los URI de datos y los caracteres #, %, comillas o espacios sin escapar pueden romper el URI. Esta herramienta comprueba la estructura del SVG, pero no elimina scripts, manejadores de eventos ni referencias externas; revisa cualquier SVG no fiable antes de usar la salida.
Preguntas frecuentes
El texto Base64 ocupa aproximadamente 4/3 de los bytes de origen, más el URI de datos o el envoltorio. El rendimiento depende de la multiplexación, compresión, caché, reutilización, tamaño del paquete y política de seguridad de contenido. Mide la página real: no existe un umbral universal de 4 KB.
La inclusión por sí sola no tiene un efecto garantizado en el SEO. Un fondo CSS no aporta semántica de texto alternativo: usa un elemento <img> con un atributo alt significativo cuando la imagen transmita información. Mantén los fondos decorativos fuera de la estructura de contenido.
No. El codificador lee el archivo localmente con la API FileReader y produce la cadena Base64 en el navegador. Nada sale de tu máquina.
Sí, usa la herramienta de Base64 a Imagen para convertir un URI data:image/... de vuelta a un archivo descargable.
Herramientas relacionadas
Creador de listas por niveles
Crea una lista privada con texto e imágenes locales, personaliza niveles, clasifica con arrastre o teclado y exporta JSON, PNG o SVG.
Comprimir GIF
Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.
Vectorizador de PNG a SVG
Convierte imágenes raster PNG en rutas SVG desde el navegador. Ideal para logotipos, iconos y arte lineal. Controla el umbral, el número de colores y el suavizado.
Generador de códigos QR
Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.
Generador de códigos de barras
Crea en el navegador códigos de barras 1D en Code 128, EAN, UPC, ITF-14 y otros formatos compatibles. Descarga el resultado como SVG o PNG.
BMP a PNG
Convierte archivos BMP a PNG en el navegador. Sin pérdida, preserva la profundidad de color y añade transparencia opcional del canal alfa BMP original.