Qué es
El Conversor de Imagen a Base64 transforma una imagen en una línea larga de texto que representa exactamente los mismos bytes. Ese texto se puede pegar directamente en HTML, CSS, JSON o un archivo JavaScript, y el navegador dibuja la imagen sin hacer nunca una petición aparte para ella.
Cómo usarlo
- Agrega la imagen arrastrándola o eligiéndola desde tu dispositivo.
- Copia el resultado en la forma que necesites: el base64 crudo, un
data:URI listo, una etiqueta<img>o una regla CSSbackground-image. - Pégalo en tu código.
Cuándo conviene incrustar una imagen
La razón para hacer esto es eliminar una petición HTTP. Un ícono pequeño que vive dentro del archivo CSS carga junto con el CSS, así que no hay un segundo viaje al servidor ni el parpadeo de una imagen que falta.
Funciona bien para cosas chicas: un ícono, un logo en una firma de correo, un marcador de posición, una textura mínima. Deja de funcionar bien a medida que el archivo crece, porque el base64 hace que los datos ocupen cerca de un 33% más que el binario original, y porque una imagen incrustada no se puede cachear por separado: cambia un byte del CSS y el navegador vuelve a descargar la imagen junto con él.
Una regla aproximada que se sostiene en la práctica: por debajo de unos pocos kilobytes, incrustar suele ganar. Por encima, un archivo de imagen normal que el navegador pueda cachear gana casi siempre.
A dónde va el archivo
A ningún lado. La codificación ocurre dentro de tu navegador, así que la imagen nunca se sube, nunca se guarda y nadie más la ve. No hay límite ni cuenta.
Para el camino inverso, convertir base64 de vuelta en imagen, usa el decodificador de base64 a imagen.