Desarrollo, 7 herramientas

Conversores, 4 herramientas

Texto, 5 herramientas

Color, 2 herramientas

Generadores, 3 herramientas

Imagen, 4 herramientas

PDF, 6 herramientas

Calculadoras, 4 herramientas

Herramientas abiertas · 0

Acerca de

Imagen a Base64

Suelta una imagen y vuelve como una sola línea de Base64, ya envuelta en un data: URI con su tipo, data:image/png;base64, y a continuación la propia imagen. Copia eso, o la línea lista para una hoja de estilos o una etiqueta <img>, y la imagen viaja dentro del código, sin un archivo aparte que alojar.

Qué hace

  • El tipo del data: URI sale del archivo, o de sus primeros bytes cuando el archivo no lo indica.
  • Un data: URI se escribe en alfabeto estándar, con relleno y en una sola línea, como esperan los navegadores, sin importar los demás ajustes.
  • Copiar como CSS da una línea background-image, y Copiar como <img> una etiqueta con la imagen dentro.
  • El Base64 es un tercio más grande que la imagen: un icono de 12 KB pasa a ser unos 16 KB de texto.
  • Las fuentes funcionan igual: un archivo WOFF2 se convierte en un URI data:font/woff2 para una regla @font-face.
  • La imagen se muestra junto al resultado, para que veas que es la correcta.

Cómo se usa

  1. Suelta la imagen en la ventana.
  2. Deja marcado Data URI para HTML o CSS, o desmárcalo para Base64 simple.
  3. Copia la línea que necesites: el URI, el CSS o el <img>.

Qué no hace

  • Imágenes en el correo electrónico: Gmail y Outlook no muestran las imágenes de un data: URI, así que las de un correo deben ir como adjuntos o como enlaces.
  • URI más cortos para SVG: un SVG puede ir en un data: URI como texto codificado como URL, a menudo más pequeño que Base64, pero esta herramienta escribe Base64 para todos los archivos.

Preguntas

¿Cuándo debo poner una imagen en un data URI?

Para cosas pequeñas que se usan una vez, como un icono o un fondo diminuto, donde ahorrar una petición vale más que el tercio que se agrega. Una imagen grande debe ir en su propio archivo, que el navegador puede guardar en caché y cargar junto con la página.

¿Un data URI funciona en todos los navegadores?

Sí, en todos los navegadores actuales: en etiquetas img, en fondos CSS y en fuentes. Un sitio con una política de seguridad de contenido (CSP) estricta tiene que permitir data: para las imágenes, o la imagen se bloquea.

¿Cómo vuelvo a convertir el Base64 en una imagen?

Pégalo en el cuadro de Base64: el decodificador lee la parte data:, reconoce el PNG o el JPEG por sus primeros bytes y ofrece el archivo para descargar.

Todo lo de aquí funciona en tu navegador. Nada de lo que escribes, pegas o abres se sube, y no hay cuenta ni cola. Cómo funciona.

Se usa a menudo con

Más en Conversores

  • Conversor de unidades: Convierte longitud, peso, temperatura, volumen, área, velocidad, tamaño de datos y nueve magnitudes más, en los dos sentidos y con la fórmula.
  • Visor y editor de CSV: Abre un archivo CSV, Excel o JSON como tabla, límpialo (espacios, duplicados, letras rotas, fechas y números) y guárdalo como CSV, .xlsx o JSON.
  • JSON, YAML, XML y TOML: Convierte entre JSON, YAML, XML y TOML conservando comentarios, orden de claves y números tal como están escritos, y te dice lo que cada formato no puede guardar.

Todas las herramientasAcerca de utilbrewPrivacidad