> codificar | incrustar | optimizar <

R: La codificación de imagen a Base64 convierte datos binarios de imagen en un string de texto usando codificación Base64. Esencial para incrustar imágenes directamente en HTML, CSS, emails o APIs sin archivos separados.

R: 100% procesamiento local seguro. Toda la codificación de imágenes ocurre en tu navegador. Cero subidas al servidor. Tus imágenes nunca abandonan tu dispositivo.

R: Soporta todos los formatos de imagen web comunes: PNG, JPEG, GIF, WebP, SVG, BMP y más. Mantiene la calidad y formato original de la imagen.

R: Usa el formato URI de datos: <img src="data:image/png;base64,TU_STRING_BASE64">. Perfecto para imágenes inline, iconos o reducir peticiones HTTP.

R: Sin límites del lado del servidor. El procesamiento ocurre localmente en tu navegador. Archivos grandes pueden tardar más en codificar pero funcionarán.

R: Arrastra el archivo .png al recuadro de subida o haz clic en Seleccionar archivo. La salida será data:image/png;base64,iVBORw0KGgo…. Los PNG conservan la transparencia alfa, por lo que son ideales para logos, iconos y capturas. Desde código: const reader = new FileReader(); reader.readAsDataURL(pngFile); reader.onload = () => console.log(reader.result);.

R: Igual que un PNG: suelta el archivo .jpg / .jpeg. El prefijo MIME resultante será data:image/jpeg;base64,… (nunca image/jpg, que no es un tipo MIME válido según IANA). JPEG ofrece compresión con pérdida y es la mejor opción para fotografías reales — suele generar strings Base64 entre un 40% y un 60% más cortos que el PNG equivalente.

R: Sí. Un GIF animado codificado en Base64 (data:image/gif;base64,R0lGODlh…) conserva todos los frames y sigue animándose al incrustarlo en <img src="data:image/gif;base64,…">. Ten en cuenta que el string Base64 completo viaja con cada petición HTML/CSS, así que para animaciones de más de 200 KB suele compensar más usar un archivo externo o convertir a <video autoplay muted loop> con WebM.

R: Sube el archivo .webp y obtendrás data:image/webp;base64,UklGRh…. WebP suele ser de un 25% a un 34% más pequeño que PNG/JPEG con la misma calidad visual, por lo que produce strings Base64 más cortos. Todos los navegadores modernos (Chrome, Edge, Firefox, Safari 16+) admiten Data URI con image/webp.

R: Los SVG son texto XML, así que tienes dos opciones:
1. Base64: data:image/svg+xml;base64,PHN2ZyB4bWxucz0i… — compatible con cualquier navegador.
2. URL-encoded: data:image/svg+xml;utf8,<svg xmlns=…> — suele ser más corto y legible en CSS.
Para CSS prefiere la variante utf8 escapando # como %23. Para <img> cualquiera de las dos funciona.

R: Depende del contenido:
• Logos / iconos / capturas con texto → PNG (sin pérdida + alfa).
• Fotografías → JPEG (menor tamaño).
• Iconos vectoriales → SVG (escalable y muy ligero).
• Sprites modernos → WebP o AVIF (máxima compresión).
Recuerda que Base64 añade siempre un 33% de sobrecoste respecto al binario, así que a igualdad de calidad conviene empezar con el formato más comprimido posible.

R: Úsala como background-image:
.logo { background-image: url('data:image/png;base64,iVBORw0…'); }
Es ideal para iconos <2 KB porque elimina una petición HTTP. Para imágenes grandes prefiere un archivo externo: los strings Base64 no son cacheables por URL independientemente de la hoja de estilos, así que si cambias una, invalidas toda la CSS.

R: Base64 es texto ASCII puro, así que cabe directamente en un string JSON:
{ "avatar": "data:image/png;base64,iVBORw0KGgo…" }
Es la forma más habitual de devolver imágenes generadas desde endpoints REST, GraphQL, WebSockets y canales SSE sin tener que gestionar multipart/form-data. Recuerda que el tamaño crece un 33% respecto al archivo binario.

R: Usa FileReader:

const file = input.files[0];
const reader = new FileReader();
reader.onload = () => {
  const dataUri = reader.result;       // data:image/png;base64,…
  const base64  = dataUri.split(',')[1]; // sólo el Base64
};
reader.readAsDataURL(file);

R:
Node.js: const b64 = fs.readFileSync('img.png').toString('base64'); — añade el prefijo data:image/png;base64, manualmente si lo necesitas.
Python: import base64; b64 = base64.b64encode(open('img.png','rb').read()).decode().
PHP: base64_encode(file_get_contents('img.png')).
Shell: base64 -w 0 img.png (en macOS: base64 -i img.png).

R: Porque Base64 representa cada 3 bytes binarios con 4 caracteres ASCII, lo que supone un incremento fijo del ~33%. Un PNG de 90 KB se convertirá en un string de unos 120 KB; con gzip / brotli activado en el servidor, ese sobrecoste cae a un ~5% porque Base64 se comprime muy bien. Para ahorrar bytes reales antes de codificar, optimiza la imagen (TinyPNG, cwebp, svgo).