Tada File

Imagen a Data URI

Convierte una imagen en una data URI completa, lista para pegar en un atributo src de HTML o en un valor url() de CSS.

Imagen a Data URI convierte un archivo de imagen en una data URI: una sola línea de texto que contiene tanto el tipo de archivo como la imagen codificada en Base64. Puedes pegarla directamente en un atributo src de una etiqueta img o en un valor url() de CSS, y la imagen se muestra sin un archivo aparte. El tipo MIME del prefijo se toma de tu archivo, y los bytes de la imagen no cambian.

Cómo usar Imagen a Data URI

  1. 1

    Abre una imagen

    Suelta, elige o pega cualquier archivo de imagen, como un icono, un logotipo o un gráfico pequeño.

  2. 2

    Obtén la data URI

    La data URI completa, que empieza por data:image/, aparece con su longitud y su tamaño aproximado.

  3. 3

    Cópiala

    Haz clic en Copiar data URI, o usa Copiar HTML o Copiar CSS para un fragmento listo.

  4. 4

    Pégala en tu página

    Úsala en cualquier sitio donde funcione una URL de imagen normal, como una etiqueta img o un fondo CSS.

Qué hace

Tipo MIME correcto
El prefijo coincide con tu archivo, por ejemplo image/png, image/jpeg o image/svg+xml.
Bytes originales
El archivo se codifica tal cual, así que la calidad y el tamaño no cambian por volver a comprimirlo.
Fragmentos listos para copiar
Obtén una etiqueta img completa o una regla background-image con la data URI ya incluida.
Privada
La data URI se crea en tu navegador, así que la imagen no se sube.

Preguntas

¿Qué es una data URI?

Una data URI es un enlace que contiene el propio archivo en lugar de apuntar a él. En las imágenes empieza por data:image/png;base64, o un prefijo parecido, y los navegadores la muestran como una URL de imagen normal.

¿Cómo uso una data URI en CSS?

Haz clic en Copiar CSS para obtener una regla background-image con la URI completa dentro de url(), y pégala en tu hoja de estilos.

¿Cuándo debo evitar las data URI?

Evítalas con imágenes grandes y con imágenes que se usan en muchas páginas. El texto codificado ocupa aproximadamente un tercio más que el archivo, y el navegador no puede guardarlo en caché por separado.

¿Las imágenes con data URI funcionan en los correos?

Depende. Muchos programas de correo, incluidos algunos servicios de correo web, no muestran imágenes con data URI, así que prueba tu correo o usa una imagen alojada en internet.

¿Qué tipos de imagen se admiten?

Cualquier imagen que tu navegador pueda abrir, como JPG, PNG, GIF, WebP, AVIF y SVG. Las fotos HEIC de iPhone se convierten primero a PNG, así que su data URI usa image/png.