El Convertidor d'imatges a Base64 és una eina especialitzada que permet transformar fitxers d'imatge en format de text Base64 per a la seva incrustació directa en codi web, així com realitzar el procés invers: descodificar cadenes de text Base64 per recuperar el fitxer d'imatge original.
Funcionament de la conversió de dades
La codificació Base64 és un sistema de representació que transforma dades binàries en un format de text pla utilitzant un conjunt de 64 caràcters ASCII. En l'àmbit del desenvolupament web, aquest mètode s'utilitza principalment per generar un URI de dades, que integra el tipus de contingut de la imatge i les seves dades codificades en una sola línia de text.
Quan es converteix una imatge a Base64, el volum de dades resultant augmenta aproximadament un terç (un 33% més) en comparació amb la mida del fitxer binari original. L'eina realitza exclusivament la codificació o la restauració dels bytes originals de la imatge; no aplica cap tipus de compressió, retallada, canvi de dimensions ni conversió de format (com ara transformar de PNG a JPG).
Processament local i privadesa
La lectura i la conversió de les imatges es realitzen íntegrament dins del navegador web de l'usuari. Durant aquest procés, no es puja cap fitxer ni dada als servidors de BroBroGo, garantint que la informació es manté localment en el dispositiu de l'usuari.
Conversió d'Imatge a Base64 (Codificació)
Per iniciar la conversió, es pot arrossegar un fitxer d'imatge o fer clic per seleccionar-lo des del dispositiu. L'eina admet els següents formats d'imatge: PNG, JPG, GIF, WebP, SVG, AVIF, BMP, ICO i TIFF. La mida màxima permesa per a la codificació de fitxers és de 5 MB.
Regles i comportaments del sistema:
- Si s'arrosseguen múltiples imatges de manera simultània, el sistema només processarà la primera imatge.
- Si el fitxer introduït no correspon a un format compatible, es mostra el missatge d'error: "Aquest fitxer no és una imatge compatible.".
- Si la mida del fitxer supera el límit establert, es mostra l'error: "Aquesta imatge és més gran de
{max}. Provi amb una de més petita.". - En cas que el sistema no pugui accedir al fitxer, es generarà l'error: "No s'ha pogut llegir el fitxer.".
Formats de sortida disponibles:
Un cop processada la imatge, es mostra l'etiqueta "Sortida" i es generen diferents estructures de text segons les necessitats del projecte:
- URI de dades: La cadena completa amb l'esquema
data:image/...a punt per ser utilitzada. - Base64: El text codificat en brut, sense cap tipus de format addicional.
- CSS: El codi estructurat com a propietat de fons, ideal per a fulls d'estil:
background-image: url("data:image/...");. - HTML: L'etiqueta d'imatge estructurada per a documents web:
<img src="data:image/..." />.
L'eina també calcula i mostra de manera automàtica els "Caràcters de sortida" i la "Mida de la imatge" en píxels.
Conversió de Base64 a Imatge (Descodificació)
El procés invers permet enganxar un URI de dades o una cadena Base64 en brut per recuperar el fitxer d'imatge original. El límit màxim de longitud per a la descodificació de text és de 8 MB. L'eina accepta tant el format Base64 estàndard com el format segur per a URL (URL-safe), i és capaç de processar cadenes que continguin espais en blanc o salts de línia.
Durant la descodificació, el sistema detecta automàticament el tipus d'imatge a partir de les dades analitzades. Un cop descodificada correctament, es pot utilitzar el botó "Descarrega la imatge". El fitxer es descarregarà amb el nom predeterminat imatge-brobrogo. seguit de l'extensió de fitxer corresponent que s'hagi detectat.
Errors de descodificació:
- Si el text introduït no compleix l'estructura de codificació, es mostra: "Això no és un Base64 vàlid.".
- Si la cadena es descodifica però no es reconeix cap estructura de fitxer d'imatge, es mostra: "Aquest codi Base64 no es descodifica en una imatge reconeixible.".
- Si la longitud del text supera el límit de processament, es mostra: "Aquesta entrada és massa llarga. Mantingui-la per sota de
{max}.". - Si les dades es descodifiquen correctament però el navegador no pot renderitzar el contingut visualment, es mostra: "Les dades de la imatge s'han descodificat però no s'han pogut mostrar.".
Avantatges i desavantatges de l'ús de Base64
L'ús d'imatges incrustades en Base64 és una pràctica habitual en el desenvolupament web i la maquetació de correus electrònics, però cal avaluar-ne l'aplicació segons el cas d'ús.
Avantatges:
- Reducció de peticions HTTP: En incloure la imatge directament en el fitxer HTML o CSS, el navegador no ha de realitzar una connexió addicional al servidor per descarregar el recurs, millorant el temps de renderització inicial en elements petits.
- Portabilitat en correus electrònics: En les plantilles de correu electrònic (newsletters), l'ús de Base64 evita que les imatges es mostrin com a enllaços trencats si el servidor extern falla o si el gestor de correu bloqueja les imatges externes.
Desavantatges:
- Increment de la mida del fitxer: Com que la codificació augmenta la mida de les dades un 33% aproximadament, l'ús de Base64 en imatges grans alenteix la descàrrega del codi font de la pàgina.
- Gestió de memòria cau (Caching): Les imatges incrustades en HTML o CSS no es poden desar a la memòria cau del navegador de manera independent. Si es modifica el codi de la pàgina, s'haurà de tornar a descarregar tota la cadena de text de la imatge.
Preguntes freqüents (FAQ)
Què és una imatge URI de dades en Base64?
És una imatge codificada com a text, de manera que es pot incloure directament dins d'un fitxer HTML o CSS en lloc de carregar-se des d'un fitxer independent. Això estalvia una petició HTTP, la qual cosa és molt útil per a icones minúscules o plantilles de correu electrònic.
Hauria d'incrustar imatges grans d'aquesta manera?
És millor no fer-ho. La codificació Base64 augmenta la mida de les dades aproximadament un terç i no es pot desar a la memòria cau de manera independent de la pàgina. Per tant, es recomana limitar-ho a recursos molt petits i enllaçar les imatges grans com a fitxers normals.
Es pot tornar a convertir una cadena Base64 en un fitxer d'imatge?
Sí. Canvieu al mode Base64 → Imatge, enganxeu un URI de dades o una cadena Base64 sense format, i l'eina detectarà el tipus d'imatge, en mostrarà una vista prèvia i us permetrà descarregar el fitxer.