Convertir una imagen a Base64
Convierte una imagen en un data URI para pegarlo directamente en CSS, HTML o JSON.
Suelta una imagen para empezar
Funciona en tu navegador. No se sube nada.
Un data URI es la propia imagen escrita como texto, así que una hoja de estilos o una plantilla puede llevarla dentro en vez de apuntar a un archivo. Eso quita una petición a la página y un archivo al despliegue, y por eso los iconos pequeños, los separadores y las firmas de correo se incrustan tan a menudo de esta forma.
De la misma codificación salen cuatro formas, porque son los cuatro sitios donde se acaba pegando. El data URI a secas va en un campo JSON o en un atributo `src` escrito a mano; la regla CSS y la etiqueta img llegan ya con la sintaxis correcta; y el Base64 en bruto, sin el prefijo `data:`, es lo que espera una API que quiere una cadena pelada.
El precio es el tamaño: el Base64 gasta cuatro caracteres por cada tres bytes, así que el texto es alrededor de un tercio más grande que el archivo del que salió, y está en la ruta crítica del documento que lo lleva en vez de guardarse en caché por separado. Por debajo de unos pocos kilobytes el cambio suele merecer la pena, y por encima del centenar normalmente no — el panel muestra las dos cifras, para que la decisión no sea a ojo.
Paso a paso
- 1Suelta aquí la imagen.
- 2Elige la forma que necesitas: el data URI, una regla CSS, una etiqueta img o el Base64 en bruto.
- 3Pulsa Copiar y pégalo donde toque.
Preguntas
¿Qué es un data URI?
Una URL que contiene el archivo en vez de apuntar a él. Empieza por `data:`, declara el tipo de medio y lleva los bytes codificados en Base64, así que cualquier cosa que acepte una URL acepta la imagen entera.
¿Por qué el Base64 es más grande que mi imagen?
Codificar datos binarios como texto cuesta alrededor de un 33%, porque tres bytes se convierten en cuatro caracteres imprimibles. La compresión en tránsito recupera parte, pero el texto siempre es mayor que el archivo.
¿Cuándo es mejor no incrustar una imagen?
Cuando es grande, cuando la usan varias páginas o cuando cambia a menudo. Una imagen incrustada no se puede cachear por su cuenta y se vuelve a descargar con cada copia del documento que la lleva.
¿Se sube mi imagen a algún sitio para codificarla?
No. El archivo lo lee el navegador y se convierte en texto en esta pestaña. No se envía nada a ninguna parte, que es también por lo que funciona sin conexión una vez cargada la página.