Imatge a Base64

Arrossegueu imatges aquí o feu clic per seleccionar

Suporta PNG, JPG, GIF, WebP

Eina gratuïta en línia per convertir imatges a Base64, compatible amb PNG/JPG/WebP/GIF/SVG/BMP/AVIF i altres formats. Processament local al navegador amb Web Worker, sense pujades i sense bloquejos. Genera Data URL per inserir en CSS, HTML, plantilles de correu i transmissions API.

Relacionats

Base64 a imatge

Base64 a Text

Convertidor Base64 DataURL

Comprimir JSON

Formatejador de JavaScript

Analitzador d'URL

Què és imatge a Base64?

Imatge a Base64 és una tècnica que codifica dades binàries d'imatge com a cadena de text ASCII. Base64 utilitza 64 caràcters imprimibles (A-Z, a-z, 0-9, +, /) per representar dades binàries, converteix cada 3 bytes en 4 caràcters Base64 i afegeix = com a farciment al final. Tot el procés segueix l'estàndard RFC 4648.

**Principi de codificació**: Base64 divideix cada 3 bytes (24 bits) en quatre grups de 6 bits, cadascun assignat a un caràcter de l'alfabet Base64. Si el nombre de bytes no és múltiple de 3, s'afegeixen 1-2 caràcters = de farciment. Això explica per què la mida augmenta aproximadament un 33% (4/3 ≈ 1.33).

**Optimització amb Web Worker**: aquesta eina utilitza Web Workers per executar la codificació en un fil del navegador independent del fil principal. ArrayBuffer.transfer() permet transferir dades al Worker sense còpia i evita bloquejos. Això manté la UI fluida fins i tot amb imatges de diversos MB, mentre el progrés es mostra en temps real.

**Privadesa i seguretat**: a diferència d'eines que requereixen pujar imatges a un servidor, aquesta eina s'executa completament al navegador. Les dades de la imatge no passen per servidors de tercers, cosa especialment important per a imatges sensibles com documents d'identitat o contractes.

**Casos d'ús**: les imatges Base64 s'utilitzen sovint en CSS Sprites (reducció de peticions HTTP), plantilles de correu HTML (evitar bloquejos d'imatges dels clients de correu), transmissió API de dades binàries i extensions de navegador o aplicacions d'un sol fitxer (quan no es poden referenciar recursos externs).

Casos d'ús

  • CSS Sprites: incrusta icones petites i imatges a CSS background per reduir peticions HTTP i accelerar el primer renderitzat
  • Inserció d'imatges HTML: incrusta logotips, placeholders i recursos UI directament en etiquetes HTML img per reduir peticions d'imatges
  • Plantilles de correu: els clients de correu bloquegen imatges externes per defecte; Base64 incrustat ajuda a mostrar-les immediatament sense autorització de l'usuari
  • Transmissió API: converteix dades binàries d'imatge en cadenes Base64 i insereix-les en cossos JSON per a crides API
  • Optimització de rendiment frontend: redueix el nombre de peticions HTTP per inserir recursos crítics del primer viewport
  • Extensions de navegador i aplicacions d'un sol fitxer: incrusta totes les imatges amb Base64 quan no es poden referenciar recursos externs

Com usar-ho

  1. Selecciona o arrossega el fitxer d'imatge que vols codificar (PNG/JPG/WebP/GIF, etc.)
  2. L'eina converteix automàticament la imatge a Base64 dins d'un Web Worker del navegador i mostra el progrés en temps real
  3. Consulta el resultat codificat: cadena Base64 pura, Data URL complet o etiqueta HTML img, i copia el format que necessitis
  4. Enganxa el resultat a CSS, HTML, fitxers de configuració JSON o sol·licituds API

Característiques

  • Compatibilitat completa de formats: detecta automàticament el MIME de PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF i altres formats habituals
  • Acceleració amb Web Worker: la codificació de fitxers grans s'executa en un fil independent amb barra de progrés en temps real, sense bloquejar la interfície principal
  • Processament local sense pujades: les imatges es transfereixen al Worker amb ArrayBuffer de còpia zero i les dades no passen per cap servidor
  • Generació automàtica de Data URL: crea el prefix data:image/xxx;base64, llest per enganxar a HTML img o propietats CSS background
  • Conversió bidireccional: admet tant imatge a Base64 com Base64 a imatge sense interferències entre modes
  • Còpia i descàrrega amb un clic: copia Base64 pur, Data URL complet, etiqueta HTML img o descarrega-ho com a fitxer .txt

Preguntes freqients

Quins formats d'imatge són compatibles?

Admet PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF i altres formats habituals. L'eina detecta automàticament el tipus MIME i genera el prefix Data URL corresponent, com ara data:image/png;base64,...

Com funciona l'acceleració amb Web Worker?

Un Web Worker és un fil de navegador independent del fil principal de la interfície. La codificació tradicional pot bloquejar la pàgina; aquesta eina executa la tasca al Worker amb transferència ArrayBuffer i callbacks de progrés perquè la interfície continuï responent amb fitxers grans.

Les imatges es pugen a un servidor?

No. La conversió es completa directament al fil Worker del navegador amb tecnologia ArrayBuffer de còpia zero. El contingut de la imatge no passa per cap servidor, a diferència d'eines que afirmen processar al navegador però realment pugen dades.

Quant creix el fitxer després de codificar en Base64?

La codificació Base64 produeix aproximadament el 133% de la mida binària original, és a dir, un augment d'uns 33%. Cada 3 bytes (24 bits) es converteixen en 4 caràcters Base64 (6 bits cadascun), amb farciment = al final si cal. Es recomana mantenir cada imatge incrustada per sota de 10KB.

Quines imatges són adequades per incrustar en Base64?

Es recomana per a icones i imatges petites de menys de 10KB. Incrustar imatges petites redueix peticions HTTP, però les imatges grans augmenten la mida d'HTML/CSS i poden perjudicar el rendiment de càrrega. Les imatges grans haurien d'usar URL independents.

Quina diferència hi ha entre Data URL i Base64 pur?

Un Data URL té el format data:image/png;base64, seguit del contingut codificat en Base64, i es pot posar directament a l'atribut src d'un HTML img. El Base64 pur és només la cadena codificada i necessita un prefix MIME per utilitzar-se correctament.

Puc fer servir aquesta eina per provar integracions API?

Sí. Després de convertir una imatge a Base64, pots enviar-la com a valor de camp en un cos JSON cap a una API backend. L'eina admet còpia amb un clic i és compatible amb la majoria d'exemples de documentació API.

Per què triar Base64 incrustat en lloc de referències d'imatge normals?

Base64 incrustat és adequat per a fitxers petits (<10KB) perquè redueix peticions HTTP. Per a imatges grans, les URL independents carreguen més ràpid perquè el navegador pot descarregar recursos en paral·lel i aprofitar la memòria cau.