Imagen a Base64 o data URI
Image to Base64 / Data URI
Codifica una imagen como cadena Base64 o como data URI listo para pegar en CSS, HTML o JSON.
Incrustar una imagen como data URI elimina una petición y añade un tercio a su tamaño, para siempre, en cada visita, porque un data URI no puede cachearse aparte del documento que lo lleva. Esta herramienta codifica el archivo y te pone las dos mitades de ese intercambio delante antes de que lo pegues.
Suelta una imagen
Se codifica en esta pestaña. Base64 no es compresión: hace el archivo un tercio más grande.
Cómo se usa
Suelta la imagen
El tipo se decide por los bytes, no por la extensión: un .png que en realidad es un JPEG es común, y una imagen incrustada con el tipo equivocado no se renderiza.
Lee el veredicto
Por debajo de unos 4 KB incrustar es gratis; pasados unos 100 KB está retrasando el primer pintado por un recurso que de otro modo se descargaría en paralelo y se cachearía.
Elige el envoltorio
CSS te da la forma url(), HTML una etiqueta img y JSON una cadena entre comillas, pegadas directamente en vez de armadas a mano.
Preguntas frecuentes
¿Base64 comprime la imagen?
Al contrario. Codifica tres bytes como cuatro caracteres, así que el texto es exactamente un 33⅓ % más largo que el archivo antes de cualquier compresión de transporte. Es una codificación, no una compresión.
¿Debo incrustar mi SVG de esta forma?
No. Un SVG ya es texto, así que codificarlo como URL cuesta alrededor de un 10 % en vez de un 33 % y el resultado sigue siendo legible y comparable. Base64 sobre un SVG es el error común que esta página señala cuando ve uno.
¿Por qué rechaza archivos de más de 8 MB?
El data URI serían más de 10 MB de texto en una sola línea. La mayoría de los editores, y las herramientas de desarrollo de varios navegadores, se vuelven inutilizables a ese tamaño, y una imagen incrustada de 8 MB nunca fue la respuesta correcta.
Puede recibir de
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
Imagen de relleno
Placeholder Image
Genera una imagen de relleno de color plano o degradado en cualquier tamaño, con las dimensiones escritas encima.
Base64 a imagen
Base64 to Image
Descodifica una cadena Base64 o un data URI y lo devuelve como imagen que puedes ver y descargar.
Codificador y decodificador Base64
Base64 Encoder & Decoder
Codifica y decodifica Base64 y Base64URL, para texto o archivos, tratando UTF-8 correctamente.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Codificador y decodificador Base64
Base64 Encoder & Decoder
Codifica y decodifica Base64 y Base64URL, para texto o archivos, tratando UTF-8 correctamente.
Base64 a imagen
Base64 to Image
Descodifica una cadena Base64 o un data URI y lo devuelve como imagen que puedes ver y descargar.
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
SVG a data URI para CSS
SVG to CSS Data URI
Codifica un SVG como data URI de fondo en CSS, escapando solo lo imprescindible para que ocupe poco.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.