Fija aquí tus herramientas. Se guardan en este navegador.
Fija una herramienta y su pegatina aparece aquí.
Convierte una imagen en un data URI listo para CSS o HTML, o convierte un data URI de nuevo en un archivo de imagen.
Un data URI lleva un archivo dentro de la propia dirección: data:image/png;base64,iVBORw0KGgo…. Después de data: va el tipo de medio, luego un marcador opcional ;base64 que indica cómo está codificado el contenido, y después el contenido, tras una coma. Allí donde un navegador acepta la URL de una imagen, como src en HTML o url() en CSS, acepta un data URI y muestra la imagen sin hacer otra petición. El formato está definido en la RFC 2397.
Base64 escribe cada 3 bytes como 4 caracteres, así que la imagen codificada es alrededor de un 33 % más grande que el archivo. Además, una imagen incrustada queda ligada al documento que la contiene: el navegador no puede guardarla en caché por separado, y se transfiere de nuevo con cada página u hoja de estilos que la repite.
Por eso los data URI encajan bien con unas pocas imágenes pequeñas, como un icono de uno o dos kilobytes o un placeholder, y mal con las fotografías. La herramienta te avisa cuando el resultado pasa de unos 10 KB.
Un archivo SVG es texto, así que puede ir dentro de un data URI como texto: data:image/svg+xml;charset=utf-8,…. Solo hay que codificar con porcentajes algunos caracteres: los que terminarían la URL o las comillas que la rodean, y los que una URL no puede llevar tal cual. Un # sin escapar, habitual en los valores de color, inicia el fragmento de la URL y corta la imagen. Esta herramienta escapa %, #, <, >, ", &, la barra invertida, los espacios en blanco y los caracteres de control, y escribe los caracteres fuera de ASCII como secuencias de escape UTF-8. Al decodificar el resultado se obtiene el mismo texto SVG. La forma de texto se ofrece cuando el archivo es UTF-8 válido.
La forma codificada para URL sigue siendo legible y, como sigue siendo texto plano, gzip y Brotli suelen comprimirla mejor que Base64. Cuál de las dos formas es más corta antes de comprimir depende del archivo, así que la herramienta muestra los dos tamaños.
Tu navegador lee la imagen y JavaScript la codifica en tu dispositivo. La otra dirección funciona igual: el data URI que pegas se decodifica en la página y se te ofrece como archivo. Ni la imagen ni el data URI se suben.
No. Tu navegador lee y codifica el archivo, y la herramienta no hace ninguna petición de red con él. Lo mismo vale para un data URI que pegues para convertirlo de nuevo en un archivo.
Base64 representa cada 3 bytes del archivo con 4 caracteres de texto, lo que añade alrededor de un 33 %. La cabecera corta del principio, como data:image/png;base64, añade unos pocos bytes más.
Cuando la imagen es pequeña, de unos pocos kilobytes, y se necesita en cuanto se renderiza la página, de modo que ahorrarse una petición importa más que la caché. Las imágenes más grandes, y las que comparten muchas páginas, es mejor servirlas como archivos aparte.
Sí. Ponlo dentro de url("…") en CSS o en el atributo src de un elemento img. Si el sitio envía una Content-Security-Policy, la política tiene que permitir data: como origen de imágenes, en img-src o en default-src, para que la imagen aparezca.