Qué herramienta de imagen necesito
| Tu tarea | Herramienta |
|---|---|
| Cualquier imagen a Base64 o a data URI | Imagen a Base64 |
| Pegar Base64 y ver la imagen | Base64 a imagen |
| Logotipos, capturas, transparencia | PNG a Base64, Base64 a PNG |
| Fotos | JPG a Base64, Base64 a JPG |
| Archivos más pequeños para la web | WebP a Base64, AVIF a Base64, Base64 a WebP |
| Animaciones | GIF a Base64, Base64 a GIF |
| Iconos vectoriales en CSS | SVG a Base64, o el data URI SVG, normalmente más corto |
| Inspeccionar con seguridad un SVG en Base64 | Base64 a SVG |
| Un favicon incrustado | Favicon a data URI, Base64 a ICO |
| Fotos de iPhone, escaneos, mapas de bits antiguos | HEIC a Base64, TIFF a Base64, BMP a Base64, Base64 a BMP |
Los codificadores comparten el mismo conjunto de salidas: Base64 simple, data URI, background-image de CSS, <img> de HTML con ancho y alto, Markdown y un objeto JSON con nombre, tipo y tamaño. Puedes soltar varios archivos a la vez o pegar una captura de pantalla con Ctrl+V.
Elegir el formato antes de codificar
Base64 hace que cualquier imagen ocupe un tercio más, así que el formato decide casi toda la longitud final.
- PNG para gráficos planos, elementos de interfaz y cualquier cosa con transparencia o texto.
- JPEG para fotos, donde un PNG ocuparía varias veces más.
- WebP para ambos casos cuando el destino lo admite; suele ser el más pequeño de los tres.
- SVG para iconos y logotipos que son dibujos vectoriales. Como data URI con codificación URL suele ser más corto que en Base64, y la herramienta data URI SVG compara ambos lado a lado.
- HEIC y TIFF se codifican tal cual. La mayoría de los navegadores no pueden mostrarlos, así que conviértelos antes a JPEG o PNG si el resultado tiene que verse en una página web.
Reconocer el Base64 de una imagen
| Prefijo | Formato |
|---|---|
iVBORw0KGgo | PNG |
/9j/ | JPEG |
R0lGODlh / R0lGODdh | GIF |
UklGR | contenedor RIFF: WebP, pero también audio WAV |
PHN2Zy / PD94bWwg | SVG que empieza por <svg o <?xml |
AAABAA | ICO |
Qk | BMP |
Un data URI completo añade delante el tipo MIME, como en data:image/png;base64,iVBORw0KGgo…. Los decodificadores aceptan ambas formas, y también cadenas pegadas junto con el CSS o HTML que las rodea. Si la cadena resulta no ser una imagen, Base64 a archivo identifica otros formatos, y las herramientas de archivos cubren PDF, audio, vídeo y documentos.
Preguntas frecuentes
¿Cómo sé qué formato de imagen contiene una cadena Base64?
Mira los primeros caracteres: iVBORw0KGgo es PNG, /9j/ es JPEG, R0lGOD es GIF, UklGR es un contenedor RIFF como WebP, y PHN2Zy o PD94bWwg suele ser SVG. Base64 a imagen detecta el tipo por ti.
¿Puedo reducir una imagen antes de codificarla?
Sí. Los convertidores de PNG, JPG, WebP, GIF, BMP y AVIF, y el codificador general de imágenes, pueden redimensionar a un ancho máximo, recodificar como PNG, JPEG o WebP con un control de calidad y quitar los metadatos EXIF, todo en el navegador.
¿Conviene incrustar los iconos pequeños en Base64?
Con unos pocos iconos pequeños, incrustarlos ahorra peticiones. Las imágenes más grandes funcionan mejor como archivos: Base64 añade un tercio al tamaño y los datos no se pueden guardar en caché por separado de la página. El rendimiento de los data URI tiene las cifras.