Markdown.es Logo Markdown.es
★

¿Te es útil esta web? Apóyala sin coste: si compras en Amazon, hazlo a través de nuestro enlace de afiliado — el precio es el mismo para ti y nos ayuda a seguir.

Utilidades

Base64 e Imágenes

Convierte una imagen en data URI listo para pegar en tu HTML o CSS, o recupera la imagen a partir de una cadena Base64.

Arrastra una imagen o haz clic para elegirla

PNG, JPG, GIF, WebP, SVG o AVIF

Cuándo compensa incrustar y cuándo no

Incrustar una imagen en Base64 elimina una petición al servidor, pero tiene un coste que conviene tener presente antes de hacerlo con todo.

Sí compensa
  • Iconos y logotipos de menos de 5 KB
  • Imágenes que aparecen en la primera pantalla
  • Correos en HTML, donde no puedes enlazar recursos externos
  • Ficheros sueltos que deben funcionar sin servidor
No compensa
  • Fotografías o cualquier imagen grande
  • Imágenes que se repiten en varias páginas
  • Contenido que cambia a menudo
  • Cuando quieres que el navegador cachee la imagen aparte

La razón de fondo es la caché. Una imagen enlazada se descarga una vez y se reutiliza en todas las páginas; una imagen incrustada viaja dentro del HTML o del CSS cada vez que se pide ese documento, y además ocupa un tercio más por la propia codificación.

Preguntas frecuentes

¿Se sube mi imagen a algún servidor? No. El fichero se lee con la API FileReader del navegador y nunca sale de tu equipo. No hay ninguna petición de red, puedes comprobarlo en la pestaña de red de las herramientas de desarrollo.
¿Cuándo conviene incrustar una imagen en Base64? Cuando es pequeña (iconos, logotipos, un patrón de fondo) y quieres ahorrarte una petición HTTP. A partir de unos pocos kilobytes deja de compensar, porque el Base64 pesa un 33% más que el fichero original y además no se cachea por separado.
¿Qué es un data URI? Es la cadena completa que empieza por data:image/png;base64, seguida de los datos. Se puede pegar directamente en el atributo src de una etiqueta img o en un background-image de CSS.
¿Qué formatos admite? Cualquiera que reconozca tu navegador: PNG, JPG, GIF, WebP, SVG y AVIF. El tipo MIME se detecta automáticamente del propio fichero.
¿Hay límite de tamaño? No hay un límite impuesto, pero por encima de unos pocos megabytes la cadena resultante es tan larga que se vuelve incómoda de manejar y el navegador puede ralentizarse al mostrarla.
Todo ocurre en tu navegador

Esta utilidad se ejecuta enteramente en tu equipo con JavaScript. Lo que escribes o pegas no se envía a ningún servidor, no se guarda y no queda registrado en ninguna parte.

Utilidades relacionadas

Base64 Encode y Decode SVG a CSS URL Encode y Decode Hex a ASCII y ASCII a Hex

¿Buscas una app para instalar?

80+ Apps Markdown

El directorio más completo en español. Filtra por plataforma, precio y uso.

Ver Aplicaciones →