Conversor de imagen a Base64 y de SVG a data URI | We.Inc
Pasa imágenes PNG, JPG, WebP, GIF o SVG en data URI en Base64 desde tu navegador. Cópialas como etiqueta img, fondo CSS o JSON, obtén una versión codificada para URL más pequeña para SVG y comprueba si vale la pena incrustarlas.
Base64 convierte los bytes de una imagen en texto para que pueda ir dentro de HTML o CSS como data URI, por ejemplo src="data:image/png;base64,...". El texto ocupa aproximadamente un tercio más que el archivo. Suelta una imagen abajo para obtener el data URI, fragmentos de img y CSS listos para usar y una recomendación sobre si vale la pena incrustarla.
Cuándo ayuda incrustar y cuándo perjudica
Imagen
¿Incrustarla?
Por qué
Icono de menos de 4 kB
Normalmente sí
Ahorra una petición a bajo coste
Logo o icono SVG
Sí, codificado para URL
Más pequeño que Base64 y sigue siendo legible
Imagen visible sin hacer scroll, de 4 a 20 kB
A veces
Solo si aparece en una sola página
Foto o cualquier cosa de más de 20 kB
No
Engorda cada carga y no se puede guardar en caché por separado
Suelta una imagen o varias. Cada una obtiene su data URI en Base64 y, en los archivos SVG, una versión codificada para URL que suele ser más pequeña. Copia cualquiera de ellas como etiqueta img, fondo CSS o valor JSON. Los archivos nunca salen de tu dispositivo.
Suelta las imágenes en el cuadro o haz clic para elegirlas. Funcionan PNG, JPG, WebP, GIF, AVIF, ICO y SVG.
El navegador lee cada archivo localmente y lo codifica. No se sube nada.
Compara el tamaño original con el tamaño codificado y lee la recomendación sobre si incrustarla.
Copia el formato que necesites: data URI sin más, etiqueta img, background-image de CSS o JSON.
Comprime primero y codifica después. Codificar una foto de 300 kB te da unos 400 kB de texto, que es peor que el archivo con el que empezaste.
En SVG, la forma codificada para URL se salta Base64 por completo. Suele ser más pequeña y puedes seguir leyendo y editando el marcado.
Los data URI en CSS se descargan con la hoja de estilos, que bloquea el renderizado. Úsalos solo para iconos pequeños que necesitan todas las páginas.
No olvides el texto alternativo. Una imagen incrustada sigue necesitando una descripción para los lectores de pantalla, o alt="" si es decorativa.
Preguntas frecuentes
¿Por qué la versión en Base64 es más grande que mi imagen?
Base64 usa cuatro caracteres de texto por cada tres bytes, así que el resultado ocupa aproximadamente un 33% más, además de unos pocos bytes de relleno y el prefijo data:. La compresión Gzip o Brotli de la página recupera parte de esa diferencia, pero rara vez toda.
¿Debo usar Base64 para SVG?
Normalmente no. SVG ya es texto, así que puede ir en un data URI escapando solo unos pocos caracteres. Esa versión suele ser más pequeña que Base64 y sigue siendo legible. Usa Base64 solo si la herramienta donde lo pegas rechaza la forma codificada para URL.
¿Funcionan los data URI en los emails?
El soporte es irregular. Varios clientes de correo importantes bloquean o eliminan las imágenes con data URI, así que en los newsletters aloja la imagen y enlázala, o adjúntala con un content ID.
¿Hay un límite de tamaño para los data URI?
Los navegadores actuales aceptan data URI muy largos en etiquetas img y en CSS, mucho más allá de cualquier imagen razonable. El límite práctico es el rendimiento: las imágenes incrustadas grandes ralentizan el archivo que las contiene. Algunas herramientas antiguas y clientes de correo sí los cortan.
Cómo se construye un data URI
Un data URI tiene tres partes: el esquema data:, el tipo de medio como image/png y el contenido. En las imágenes binarias el contenido es Base64 y el tipo va seguido de ;base64. En formatos de texto como SVG, el contenido puede ser el propio marcado con unos pocos caracteres codificados con porcentaje.
Los navegadores tratan un data URI como cualquier otra fuente de imagen. Se decodifica en memoria, así que no hay una petición extra, pero tampoco hay una entrada de caché independiente: la imagen se descarga de nuevo cada vez que se descarga la página o la hoja de estilos que la contiene.
Mejores opciones para la mayoría de las imágenes
Para cualquier cosa más grande que un icono, un archivo normal servido por HTTP/2 o HTTP/3 casi siempre es más rápido. Varias peticiones comparten una conexión, la imagen se guarda en caché por separado y el navegador puede cargarla en diferido o al tamaño adecuado con srcset.
Incrustar sigue teniendo sentido para iconos diminutos dentro de un solo componente, para marcadores de posición que se muestran mientras carga una imagen real y para archivos HTML autónomos como informes o demos sin conexión.
Lo bastante pequeña para incrustarla. Ahorra una petición y añade poco al archivo que la contiene.
En el límite. Incrústala solo si aparece sin hacer scroll en una sola página; si no, un archivo normal se guarda mejor en caché.
Data URI
JSON
tipo desconocido
, {w} por {h} px
Archivo {file}, codificado {encoded} ({pct}% del archivo)
Codificación del SVG
SVG codificado para URL ({size})
Base64 ({size})
Formato de copia
... ({n} caracteres; usa Copiar para obtener el texto completo)
Resultado de {name}
Copiar
{name} no es una imagen, así que se ha omitido.
Codificar imágenes
Suelta aquí las imágenes o haz clic para elegirlas. Se quedan en tu dispositivo.