Imagen a Base64
Convierte una imagen en un texto Base64 que puedes pegar en tu código.
El texto Base64 es un 37% más grande que el archivo original. Es una buena opción para iconos pequeños, no para fotos completas.
Funciona en tu navegador. Tus archivos nunca salen de tu dispositivo.
- URL de datos, CSS y HTML
- Funciona con cualquier tipo de imagen
- Nada se sube
Cómo convertir una imagen a Base64
- Suelta una imagen aquí o toca Elegir archivos.
- Copia la URL de datos, el Base64 sin formato o un fragmento de CSS o HTML listo.
- Pégalo en tu código.
Cómo funciona la codificación
Base64 convierte cada 3 bytes de la imagen en 4 caracteres de texto, usando los 64 caracteres de la A a la Z, de la a a la z, del 0 al 9, más el signo más y la barra, el alfabeto estándar de la RFC 4648.
Una URL de datos es ese texto con un prefijo corto, como data:image/png;base64, para que un navegador o una app sepan qué es sin necesitar un archivo aparte.
| Archivo original | Texto Base64 (unos 37% más grande) |
|---|---|
| Icono de 5 KB | Unos 6,9 KB |
| Logo de 20 KB | Unos 27 KB |
| Foto de 100 KB | Unos 137 KB |
Esa sobrecarga es la razón por la que las URLs de datos funcionan mejor con gráficos pequeños, no con fotos completas.
Dónde se usan las URLs de datos
- En CSS, dentro de background-image, para que un icono pequeño cargue junto con la hoja de estilos en vez de con una solicitud aparte.
- En HTML, dentro de un atributo img src o en marcado SVG en línea.
- Respuestas de API en JSON y campos de bases de datos que guardan una imagen como texto.
- HTML de correos electrónicos, ya que algunos clientes de correo bloquean imágenes enlazadas pero permiten datos en línea.
Cuándo conviene usar un archivo normal
Las URLs de datos no se cachean por separado de la página que las contiene, así que una foto usada en diez páginas se descarga diez veces en vez de una sola. Para cualquier cosa más grande que un icono pequeño, un archivo de imagen normal con caché del navegador carga más rápido.
Preguntas frecuentes sobre Imagen a Base64
¿Qué es una URL de datos Base64?
Son los bytes de una imagen escritos como texto, así puedes pegar una imagen directamente en HTML, CSS o JSON sin usar un archivo aparte.
¿Base64 hace el archivo más pesado?
Sí, alrededor de un 37 por ciento, porque la codificación convierte cada 3 bytes de la imagen en 4 caracteres de texto.
¿Cuándo debería usar una URL de datos en vez de un archivo?
Para iconos pequeños y gráficos simples, donde ahorrar una solicitud de red importa más que el peso de la página. Para fotos, usa un archivo de imagen normal.
¿Se sube mi imagen a algún lado?
No. La codificación se hace en tu navegador, así que la imagen nunca sale de tu dispositivo.
¿Convertir a Base64 cambia la calidad de la imagen?
No. Los datos de los píxeles no se tocan, solo se reescriben como texto, así que al decodificarlo obtienes exactamente los bytes originales.
¿Hay un tamaño máximo para una URL de datos?
Los navegadores no imponen un límite estricto, pero una URL de datos muy larga no se puede cachear por separado y hace más lenta la carga, así que resérvalas para iconos y gráficos pequeños.
¿Todos los navegadores admiten URLs de datos?
Sí. Las URLs de datos funcionan en todos los navegadores importantes desde Internet Explorer 8, incluidos todos los navegadores móviles actuales.
¿Puedo usar esto para un favicon?
Un favicon pequeño se puede incluir como URL de datos en el head del HTML, aunque un archivo favicon.ico normal más los tamaños en PNG sigue siendo lo más habitual.