Imagen a Base64

Cómo usarlo

Suelta una imagen o pégala desde el portapapeles. La herramienta lee el archivo como un ArrayBuffer, lo codifica en base64 y antepone al resultado la cabecera data URI apropiada (por ejemplo data:image/png;base64,…). Se muestran tanto el Data URI en bruto como una regla de fondo CSS lista para pegar.

Copia cualquiera de las salidas al portapapeles con un solo clic. La herramienta también informa del tamaño codificado para que puedas decidir si incrustar es un buen compromiso — recuerda que las cargas base64 son aproximadamente un 33% más grandes que el binario original.

• Copia con un clic del Data URI o de la regla de fondo CSS
• Informa del tamaño en bytes codificado en tiempo real
• Admite JPG, PNG, WebP, SVG, GIF y más
• Se ejecuta completamente sin conexión: seguro para recursos privados

Cuándo tiene sentido incrustar

Los data URI incrustados son ideales para imágenes de menos de ~4 KB, favicons, plantillas de email, marcadores de posición blur-up y recursos de marketing de un solo uso. Ahorran un viaje de red y eliminan los parpadeos de imagen no cargada en los píxeles críticos del hero.

Para cualquier cosa más grande, mantén la imagen externa y usa caché HTTP. El base64 incrustado infla tu bundle HTML/CSS, no puede ser cacheado por la caché de imágenes del navegador y perjudica las métricas LCP en la carga inicial de la página.