Descodificador Base64 d'Imatges | Descodifica i Previsualitza Imatges en Línia

Què és un descodificador d’imatges en base64?

Un descodificador d’imatges en base64 és una eina que torna a convertir una cadena de text codificada en base64 en una imatge. Base64 és una manera d’escriure dades binàries, com els bytes d’un fitxer d’imatge, utilitzant només 64 caràcters de text pla (lletres, dígits, +, / i = per al farciment). Els navegadors, els correus electrònics i moltes API emmagatzemen les imatges d’aquesta manera perquè una imatge pugui viatjar dins de text pla en lloc de fer-ho com un fitxer separat. El descodificador reverteix aquest procés: s’hi enganxa la cadena i apareix la imatge original.

El format d’URL de dades

Al web, una imatge en base64 normalment s’escriu com un URL de dades. El patró és:

Per exemple:

Cada part té una funció:

• data: indica que és un URL de dades, no una adreça web normal.
• image/png és el tipus MIME, que indica al navegador de quin tipus de fitxer es tracta.
• ;base64 indica que les dades posteriors a la coma estan codificades en base64.
• Tot el que hi ha després de la coma és la imatge codificada.

Com funciona el descodificador

La descodificació es fa en quatre passos.

1. L’eina comprova si la cadena comença per data:. Un URL de dades que indiqui un tipus de mitjà diferent d’una imatge, com ara data:text/plain, es rebutja immediatament, perquè no es pot mostrar com una imatge.
2. Elimina els espais, les tabulacions i els salts de línia, ja que les cadenes base64 llargues de vegades es distribueixen en diverses línies. Una càrrega útil que utilitzi codificació percentual en lloc de base64, que la RFC 2397 també permet, es transmet sense canvis.
3. Descodifica el text base64 de nou en bytes en brut.
4. Examina els primers bytes del resultat. Tots els formats d’imatge habituals comencen amb una seqüència fixa de bytes, anomenada signatura o «número màgic». Els fitxers PNG comencen per 89 50 4E 47, els fitxers JPEG per FF D8 FF, i així successivament. El descodificador compara aquestes signatures i assigna a la imatge el tipus que identifiquen.

Els bytes prevalen sobre l’etiqueta. Si un URL de dades indica data:image/png però els bytes comencen per FF D8 FF, el descodificador reconstrueix l’URL com data:image/jpeg, de manera que la cadena que ofereix el botó «Copia l’URL de la imatge» mai no descriu incorrectament el seu propi contingut.

Si la cadena no té el prefix data:, el descodificador la tracta com a dades base64 en brut, les descodifica i llegeix la signatura de la mateixa manera. Si els bytes no coincideixen amb cap signatura d’imatge coneguda i tampoc no semblen text SVG, el descodificador informa que la cadena no sembla una imatge. No n’endevina el format ni recorre a cap tipus predeterminat.

SVG es gestiona de manera diferent perquè és un format de text (XML), no binari, i per tant no té una signatura fixa de bytes. El descodificador comprova els primers 1024 bytes del text descodificat per detectar una etiqueta <svg, una declaració XML com <?xml version="1.0"?> seguida d’aquesta etiqueta, o una declaració de tipus de document SVG seguida d’aquesta etiqueta. S’ignora un marcador d’ordre de bytes al principi, que alguns editors afegeixen als fitxers UTF-8. Com que SVG no es pot identificar mitjançant una signatura de bytes, un URL de dades que declari image/svg+xml conserva el tipus que declara.

Fórmula de la mida d’una imatge en base64

Base64 transforma cada 3 bytes de dades binàries en 4 caràcters de text. La fórmula de la longitud codificada és:

Els símbols ⌈ ⌉ volen dir «arrodonir cap amunt fins al nombre enter següent», perquè base64 sempre treballa en grups de 4 caràcters i completa amb signes = el grup que queda incomplet.

En fitxers grans, això equival aproximadament a un augment de mida del 33 %, ja que 4 ÷ 3 ≈ 1,33. Els fitxers petits poden mostrar un augment percentual més gran, perquè arrodonir fins al grup següent de 4 caràcters té més importància quan d’entrada hi ha poques dades.

Exemple resolt

L’exemple PNG anterior es descodifica en 85 bytes de dades d’imatge. Aplicant la fórmula:

La cadena base64 té efectivament 116 caràcters, cosa que coincideix. Això representa un augment del 36 % respecte dels 85 bytes originals (116 ÷ 85 ≈ 1,36), una mica per sobre del 33 % perquè el fitxer és molt petit.

Formats d’imatge compatibles

El descodificador llegeix la signatura de bytes de les dades descodificades per identificar-ne el format. Reconeix aquests tipus:

Com descodificar una imatge en base64

1. Copia la cadena base64, amb el prefix data:image/... o sense, des d’HTML, CSS, una resposta d’una API o un correu electrònic.
2. Enganxa-la al camp d’entrada.
3. La imatge es descodifica automàticament un instant després d’aturar-se l’escriptura, o prement el botó de descodificació.
4. La imatge descodificada apareix a l’àrea de previsualització. El seu URL de dades es pot copiar amb el botó «Copia l’URL de la imatge», i la imatge es pot desar fent-hi clic amb el botó dret a la previsualització i triant l’opció de desar-la, ja que es mostra com un element d’imatge normal al navegador.

Usos habituals de les imatges en base64

• Incrustació en HTML, CSS o JavaScript: posar les dades de la imatge directament al codi evita haver de sol·licitar un fitxer separat.
• Plantilles de correu electrònic: alguns clients de correu bloquegen per defecte les imatges enllaçades externament, però una imatge base64 incrustada continua mostrant-se.
• Eines HTML d’un sol fitxer: una pàgina sencera, incloses les imatges, es pot distribuir com un únic fitxer autosuficient.
• Respostes d’API: una imatge pot viatjar dins d’una càrrega útil JSON en lloc de necessitar el seu propi punt final.
• Fons i icones CSS: de vegades les icones petites s’escriuen directament en un full d’estils com a URL de dades.

Avantatges i inconvenients de les imatges en base64

La codificació base64 és pràctica, però té un cost:

• El text codificat és aproximadament un terç més gran que el fitxer original.
• Els navegadors no poden emmagatzemar en memòria cau una imatge incrustada de la mateixa manera que un fitxer enllaçat, de manera que es torna a descarregar cada vegada que ho fa la pàgina o el full d’estils que l’envolta.
• El navegador ha de descodificar el text base64 abans de poder mostrar la imatge, cosa que requereix una petita quantitat de processament addicional.
• A causa de l’augment de mida i de la pèrdua de memòria cau, la incrustació en base64 és adequada per a imatges petites, com ara icones i logotips senzills. Les fotografies grans normalment es serveixen millor com a fitxers d’imatge ordinaris.

Preguntes més freqüents

Què és un descodificador d’imatges en base64?

És una eina que torna a convertir una cadena de text codificada en base64 en una imatge que es pot visualitzar, com ara un fitxer PNG, JPEG, GIF, WebP, BMP o SVG.

Com descodifico una imatge en base64?

Enganxa la cadena base64, amb el prefix data:image/... o sense, al descodificador. Llegirà la cadena, la descodificarà i mostrarà la imatge resultant.

Es pot descodificar una cadena base64 sense el prefix d’URL de dades?

Sí. El descodificador la tracta com a dades base64 en brut, descodifica els bytes i llegeix els primers bytes per identificar el format a partir de la seva signatura, com ara PNG, JPEG, GIF, WebP, BMP o ICO. SVG s’identifica buscant una etiqueta <svg en el text descodificat. Si no coincideix amb cap d’aquests formats, el descodificador informa que la cadena no sembla una imatge en lloc d’endevinar-ne el format.

Per què no es descodifica la meva imatge base64?

Tres causes expliquen la majoria dels casos. La cadena pot contenir caràcters fora de l’alfabet base64 estàndard, que és A–Z, a–z, 0–9, +, / i =; la variant base64url que s’utilitza en alguns tokens web escriu - i _ en lloc d’aquests caràcters i no s’accepta. És possible que la cadena s’hagi truncat, deixant una longitud que és una unitat superior a un múltiple de quatre, cosa que no pot tenir mai una cadena base64 vàlida. O pot ser que els bytes simplement no corresponguin a cap dels formats d’imatge compatibles. L’absència del farciment =, per si sola, no és un problema, i els espais o salts de línia s’eliminen abans de la descodificació.

La codificació base64 és una forma de seguretat o xifratge?

No. Base64 només és una manera de representar bytes com a text; no amaga res. Qualsevol persona pot descodificar una cadena base64 en qüestió de segons amb una eina gratuïta, per la qual cosa no s’ha d’utilitzar mai per protegir imatges privades ni altres dades.

Quant és més gran una cadena base64 que la imatge original?

Aproximadament un terç més gran en fitxers grans, ja que cada 3 bytes de les dades originals es converteix en 4 caràcters de text. Una imatge de 100 KB es converteix aproximadament en 133 KB un cop codificada. Les imatges petites poden mostrar un augment percentual una mica més gran a causa de l’arrodoniment.

Història

Base64 prové d’esquemes de codificació desenvolupats durant les dècades dels 1970 i els 1980 per enviar dades binàries a través de sistemes de correu que només gestionaven text pla; es va formalitzar per al correu electrònic a la RFC 989 (1987) i posteriorment a la RFC 1421. El seu ús per incrustar imatges en pàgines web es va fer possible quan l’esquema d’URL data: es va definir a la RFC 2397 (1998), i es va fer més habitual a mitjan dècada dels 2000 quan els desenvolupadors buscaven maneres de reduir les sol·licituds HTTP separades, especialment en connexions mòbils lentes.

Referències

1. RFC 4648: Les codificacions de dades Base16, Base32 i Base64
2. RFC 2397: L’esquema d’URL «data»
3. MDN Web Docs: URL de dades
4. Estàndard WHATWG d’inspecció MIME