Incrusta imágenes directamente en tu código
A veces necesitas una imagen sin un archivo independiente: un icono en una hoja de estilos, un logo en un informe HTML de un solo archivo, un marcador de posición en una respuesta de API JSON, una imagen en un documento Markdown o un fondo en una biblioteca de componentes. Este conversor codifica cualquier imagen a Base64 y le da formato listo para pegar: como URI de datos (Data URI), Base64 puro, un background-image de CSS, una etiqueta <img> de HTML o sintaxis de imagen de Markdown.
Características
- Todos los formatos de imagen comunes: PNG, JPG, GIF, WebP, AVIF, SVG, ICO y más.
- Cinco formatos de salida para diferentes usos.
- Comparación de tamaño entre el archivo original y el texto codificado.
- Vista previa de la imagen con cuadrícula de transparencia.
- Copiar con un clic.
- Privado: el archivo nunca sale de tu navegador.
Ejemplos de salida
| Formato | Ejemplo |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo… |
| Base64 | iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt="logo"> |
| Markdown |  |
Mantén las imágenes incrustadas pequeñas
Las imágenes incrustadas no se pueden almacenar en caché por sí solas y se vuelven a descargar con cada copia de la página u hoja de estilos que las contiene. Como regla general, incrusta solo imágenes que pesen unos pocos kilobytes. Reduce el tamaño de las imágenes primero con Comprimir imagen, convierte iconos vectoriales con SVG a PNG si necesitas un mapa de bits, o codifica otros archivos y texto con el conversor Base64.