Codifica un archivo PNG, JPEG, WebP, GIF, AVIF, BMP o ICO como data URI Base64. El formato se lee de los propios bytes del archivo, la vista previa se genera a partir de la URI resultante y el aumento de tamaño se mide en lugar de suponerse.
Aún no hay nada cargado
O pega una desde el portapapeles con ⌘V / Ctrl+V. PNG, JPEG, WebP, GIF, AVIF, BMP, ICO y SVG se reconocen por sus propios bytes, no por el nombre del archivo.
10 MB como máximo · una imagen cada vez · nunca se sube
Cada formato de la lista tiene una firma en sus primeros bytes, y eso es lo que decide el tipo MIME de tu URI. Un PNG que alguien renombró a .jpg se codifica como PNG, porque declarar el tipo equivocado produce una URI que se muestra en un navegador y falla sin avisar en el siguiente.
La imagen de abajo se carga desde la propia cadena codificada, sobre un fondo de cuadros para que se vea la transparencia. Si se dibuja aquí, se dibujará en tu página.
Carga una imagen y aparecerá aquí, generada a partir de la cadena exacta que te dan los botones de copiar.
Codificar siempre funciona. Si conviene hacerlo es otra cuestión, y la respuesta depende de lo grande que sea la cadena final y de lo que le hace al archivo donde acaba.
Carga una imagen y aquí aparecerá el veredicto, clasificado por el tamaño de la URI final y no por el del archivo.
Una imagen incrustada no tiene URL, y todo lo que la plataforma ofrece para imágenes se dirige a una URL: srcset y sizes, loading="lazy", fetchpriority, preload y una CDN capaz de redimensionar bajo demanda. Dentro de una cadena, nada de eso se aplica.
Un archivo se guarda en caché una vez y se reutiliza hasta que cambia. Una imagen incrustada solo se guarda en caché como parte del archivo que la contiene, así que editar una regla CSS vuelve a enviar todas las imágenes de esa hoja de estilos, y usar el mismo recurso dos veces lo envía dos veces.
El texto se comprime bien, pero el Base64 de un PNG o un JPEG ya comprimido no: los bytes originales son casi aleatorios, y el codificador añade un tercio antes de que gzip llegue a verlos. Cuenta con recuperar un par de puntos porcentuales, no el aumento.
Una carga útil larga se muestra sin su parte central para que la página siga siendo usable. Cada botón de copiar entrega la cadena completa.
Carga una imagen y aquí aparecerán cinco resultados listos para copiar: la data URI, la carga útil Base64 en bruto, una declaración background-image, una etiqueta de imagen con su tamaño en píxeles y una imagen Markdown.
Un gráfico vectorial es texto: la codificación URL lo mantiene legible y cerca de su tamaño original en lugar de añadirle un tercio.
Codifica una fuente, un archivo comprimido o texto plano, o decodifica una cadena Base64 que te hayan pasado.
Reduce primero la imagen original; cada byte que eliminas antes de codificar son 1.33 bytes menos en la cadena final.
Una data URI lleva el archivo entero dentro de la referencia, así que el código que nombra la imagen ya la contiene. Para un formato binario eso significa Base64: tres bytes se convierten en cuatro caracteres imprimibles, un crecimiento fijo de un tercio a cambio de una cadena que sobrevive en cualquier hoja de estilos, plantilla o campo JSON sin más escapes. Esta página lee el archivo en tu navegador, lo identifica por sus primeros bytes y no por su nombre, muestra el resultado a partir de la URI generada y después te dice con franqueza si el intercambio compensa para esta imagen en concreto.
Suelta un archivo en el panel, elige uno con el selector o pega una captura de pantalla directamente desde el portapapeles. Se lee en esta pestaña, y el límite de 10 MB mantiene la cadena codificada en un tamaño que el navegador todavía puede manejar.
La cabecera se compara con la firma de cada formato compatible, así que un archivo renombrado se codifica igualmente como lo que realmente es. Después, la vista previa se dibuja a partir de la URI generada, que es donde una descarga truncada se delata.
La data URI completa, la carga útil Base64 en bruto, una declaración background-image, una etiqueta de imagen con el tamaño en píxeles decodificado o una imagen Markdown. El veredicto que las acompaña indica si incrustar este archivo en concreto es buena idea.
Cada formato compatible se identifica por sus bytes mágicos, no por su extensión ni por el tipo que adivinó el navegador. Importa porque un tipo MIME incorrecto en una data URI no da error: se muestra en un navegador y no dibuja nada en el siguiente.
Cuatro caracteres por cada tres bytes, más hasta dos caracteres de relleno, más el prefijo. El panel nombra cada parte por separado para el archivo que cargaste, así que la cifra es aritmética que puedes comprobar y no un tercio recordado de memoria.
Por debajo de un kilobyte, incrustar elimina una petición que cuesta más que la carga útil. Por encima de cuarenta, se infla un archivo que bloquea el renderizado para ahorrarse una descarga en paralelo. Cada franja viene con su razonamiento, para que puedas discrepar con conocimiento de causa.
La vista previa carga la propia URI codificada sobre un fondo de cuadros, de modo que la transparencia se ve y un archivo dañado falla aquí y no en producción. Su tamaño en píxeles decodificado se escribe en la etiqueta de imagen para que el diseño no se desplace.
Los archivos no compatibles se identifican en lugar de rechazarse sin explicación, porque saber que has entregado un HEIC (que ningún navegador puede dibujar) marca la diferencia entre convertirlo y quedarte mirando un recuadro vacío.
El archivo se lee con la propia File API del navegador y se codifica en memoria a partir de esos bytes. No hay subida, ni cola, ni petición, ni conservación de datos, así que un recurso aún no publicado se queda en tu equipo.
Es el archivo entero reescrito como una URL. La cadena empieza por data:image/png;base64, y todo lo que va después de la coma son los bytes del archivo escritos con el alfabeto de 64 caracteres formado por letras, dígitos, el signo más y la barra. Como la imagen viaja dentro de la referencia, lo que haya cargado la hoja de estilos o el HTML ya tiene la imagen, y no se hace una segunda petición para obtenerla.
Porque los bytes son binarios. La codificación porcentual deja intacto el ASCII imprimible y gasta tres caracteres en todo lo demás, lo que es una ganga para el marcado y un desastre para un PNG: los datos de imagen comprimidos son casi aleatorios, así que prácticamente cada byte necesitaría escape y la cadena acabaría cerca del triple del tamaño del archivo. Base64 cobra una tarifa fija de cuatro caracteres por cada tres bytes sea cual sea el contenido, y su alfabeto no necesita más escapes en CSS, HTML ni JSON. Para el SVG, que es texto, el intercambio se invierte, y por eso ese formato tiene su propia página aquí.
Para un recurso pequeño en la ruta crítica, normalmente sí: una petición tiene costes fijos de establecimiento de conexión, cabeceras y latencia que superan con creces a un icono de 600 bytes. Más allá de eso, la respuesta se vuelve negativa enseguida. Los bytes pasan a formar parte de un archivo que bloquea el renderizado, se vuelven a descargar cada vez que ese archivo cambia, no se pueden cargar de forma diferida ni bajar de prioridad, y no se pueden descargar en paralelo como lo haría una URL separada. Incrustar cambia una petición por peso en el lugar equivocado; solo compensa mientras ese peso es insignificante.
La carga útil ocupa ceil(bytes / 3) × 4 caracteres (un 33.3% fijo antes de redondear), más el relleno necesario para llegar a un múltiplo de cuatro, más el prefijo data:…;base64, de unos veinte bytes. Un PNG de 10 KB se convierte en unos 13.4 KB de texto. La compresión tampoco lo arregla: gzip y brotli aprovechan las repeticiones, y a una imagen ya comprimida casi no le quedan, así que recuperas un par de puntos porcentuales, no el aumento.
PNG, JPEG, WebP, GIF, AVIF, BMP e ICO se codifican y se muestran como data URI, y también se acepta SVG, aunque su sitio es la página de SVG. HEIC es el rechazo más notable: es lo que guarda un iPhone por defecto y ningún navegador puede decodificarlo, así que codificarlo solo produciría una URI que no se muestra en ninguna parte. Con TIFF, PDF y los archivos RAW de cámara pasa lo mismo. Conviértelos primero a PNG o JPEG y codifica el resultado.
El de los bytes. Las extensiones son una convención de nombres que cualquiera puede cambiar, y los archivos se renombran constantemente: una captura PNG guardada como .jpg, un WebP descargado con el sufijo .png. Todo formato de imagen empieza con una firma fija, así que la cabecera es la que manda y es lo que usa esta página. Si escribes en la URI el tipo MIME de la extensión, los navegadores no se ponen de acuerdo sobre si analizar el contenido o fiarse de la declaración, y así es como una imagen acaba mostrándose en tu equipo y no en el de otra persona.
Como favicon, sí: <link rel="icon" href="data:image/png;base64,…"> funciona en todos los navegadores actuales y ahorra una petición en el primer pintado. El correo es lo contrario: Outlook ignora directamente las data URI y Gmail las elimina, así que las imágenes incrustadas en un correo siguen necesitando un adjunto CID o una URL alojada. También conviene saberlo: los navegadores bloquean desde 2017 la navegación directa a URL data:, así que pegar una en la barra de direcciones para comprobarla no funcionará. Usa la vista previa de arriba.
No uno que importe en los navegadores modernos: una data URI de varios megabytes se carga desde una hoja de estilos o una etiqueta de imagen. Los límites que afectan son prácticos. Esta página limita la entrada a 10 MB porque la cadena codificada tiene que vivir en la memoria de la pestaña y en el DOM. Más allá de eso, los paquetes minificados y los source maps se vuelven ilegibles, algunos campos de CMS y bases de datos truncan los valores largos sin avisar, las DevTools se arrastran cuando inspeccionas el elemento, y cada kilobyte se vuelve a enviar con el archivo que lo contiene.
Explora una colección cada vez más amplia para cálculos, documentos, escritura y el trabajo diario.