Com converteixo una imatge en un URI de dades Base64 per a CSS?

Deixa anar o enganxa una imatge (Ctrl+V), obre la pestanya CSS i fes clic a Copia. Obtindràs una regla background-image: url(...) amb l'URI de dades incrustat. Les pestanyes HTML, Markdown, Raw Base64 i JSON funcionen igual.

Per què la sortida en Base64 és aproximadament un terç més gran que la meva imatge?

Base64 converteix cada 3 bytes en 4 caràcters de text, de manera que el text és al voltant d'un 33% més gran que el fitxer. Per això els URI de dades van bé per a icones i logotips petits, no per a fotos grans.

Com puc fer més curta la cadena Base64?

Obre primer Redueix i defineix una Amplada màxima o un Format (WebP, JPEG o PNG), i baixa la Qualitat per a WebP o JPEG. Els fitxers SVG i GIF no es poden reduir d'aquesta manera; l'SVG disposa d'una pestanya SVG (codificat per a URL).

Puc tornar a convertir una cadena Base64 en una imatge?

Sí. Canvia la Direcció a Base64 a imatge i enganxa un URI de dades o Base64 sense més. Reconeix PNG, JPEG, GIF, WebP, SVG, BMP, ICO i AVIF, i després ofereix una descàrrega. Una entrada no vàlida mostra un error.

Per què falla Copia o la previsualització es veu tallada amb una imatge gran?

La previsualització només mostra els primers 2000 caràcters, però Copia i Baixa donen el valor complet. Les cadenes molt grans poden superar el límit del porta-retalls del navegador, així que fes servir Baixa o redueix primer la imatge.

És realment gratuït?

Sí. Totes les eines són gratuïtes, sense compte ni targeta de crèdit. El treball s'executa al teu dispositiu en lloc dels nostres servidors, i això és el que permet que sigui gratuït.

Es pugen els meus fitxers?

No. Els fitxers s'obren i es processen al navegador i no s'envien a LibraTool. Algunes eines baixen primer al navegador un motor de processament o un model d'IA; aquesta baixada no conté cap dada vostra.

Sí. Funciona als navegadors mòbils actuals d'iOS i Android, sense instal·lar res. Els fitxers molt grans poden anar lents o esgotar la memòria del telèfon, així que per a aquests useu un ordinador.

🖼️

Imatge a Base64 de franc

Converteix una imatge en un URI de dades Base64 per a ús en línia en CSS, HTML o Markdown. Copia fragments ja preparats. Codificat al teu navegador; mai es puja.

La mida del fitxer depèn del teu dispositiuEls fitxers es mantenen privatsNo cal iniciar sessióGratuït per sempre

Funciona sense connexió un cop carregat

Deixeu un fitxer aquí o feu clic per cercar-lo

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · processat al teu dispositiu

o premeu Ctrl+V per enganxar des del porta-retalls

Navegar pels fitxers

Consell: també pots enganxar una imatge del porta-retalls (Ctrl+V).

Els teus fitxers no surten mai del teu dispositiu. Tot el processament es fa localment al teu navegador.

Converteix una imatge a una URI de dades Base64 que pots enganxar directament a CSS, HTML o Markdown — sense fitxer separat. Codificada al navegador; mai no es penja.

Usos habituals

Incrusta una imatge en CSSIncrustra una icona o fons petit com a data URI en la teva full d'estil.
Incrustra una imatge en HTMLIncrustra un logotip o icona directament en HTML autosuficient.
Converteix SVG o icona a Base64Converteix una icona petita en data URI per incrustar.
Incrustra una imatge en MarkdownIncrustra una imatge petita en un fitxer Markdown amb data URI.
Obté una imatge Data URIProdueix un data: URI raw que pots utilitzar a tot arreu.

Com funciona

Un URI de dades incrusta una imatge directament en el teu codi com a text, de manera que es carrega sense una sol·licitud de fitxer separat — útil per a icones petites i HTML autocontingut. Això la codifica en el teu navegador.

1
Tu desesx una imatge
Es llegeix localment amb l'API FileReader — mai es carrega.
2
Es codifica en Base64
Els bytes de la imatge es converteixen en un URI de dades: (data:image/...;base64,…) directament en el teu navegador.
3
Tu selecciones un fragment
Copia l'URI de dades en brut, o CSS preparat (background-image), HTML (<img>), o Markdown.
4
Enganxa-la en el teu codi
La imatge ara viatja alineada amb el teu CSS/HTML — cap fitxer extra per allotjar.

La imatge es codifica completament en el teu dispositiu. Tingueu en compte que Base64 és ~33% més gran que l'original, per la qual cosa els URIs de dades són millors per a imatges petites.

Eines relacionades

🖼️

Esteganografia d'imatge (amaga text en imatge)

Amaga un missatge de text secret dins d'un PNG usant esteganografia de bits menys significatius, amb xifratge opcional AES-256-GCM amb contrasenya. Extreu-lo més tard amb la mateixa eina. Tot s'executa al teu navegador.

Prova-hoEls fitxers es queden en local

🔢

Codificador i descodificador Base64

Codifica text o fitxers a Base64, o descodifica cadenes Base64 a text pla. Instantani, privat i gratuït.

Prova-ho

🔗

Codificador i descodificador d'URL

Codifica i descodifica URL i cadenes de consulta. Compatible amb encodeURIComponent, decodeURIComponent i anàlisi de cadenes de consulta.