Imagen a Base64
Copia como data URI, listo para CSS o HTML
Imagen
Resultado
Todavía no hay ninguna imagen
Suelta una imagen y aquí aparecerá la salida Base64.
Base64 aumenta los datos alrededor de un 33 %. Úsalo solo con imágenes pequeñas.
Incrustar una imagen pequeña como data URI elimina una petición de red, algo que importa en los iconos que aparecen en todas las páginas. Pasados unos pocos kilobytes deja de compensar, porque Base64 aumenta los datos alrededor de un tercio y no se puede cachear por separado.
Cómo se usa
- 1 Suelta una imagen: los iconos pequeños son lo que mejor funciona.
- 2 Elige si quieres el data URI completo o solo la carga Base64.
- 3 Copia el resultado y pégalo en tu CSS o en tu HTML.
Preguntas frecuentes
¿Cuándo conviene incrustar una imagen?
Por debajo de unos 4 KB, y solo para imágenes que se usan en casi todas las páginas. Por encima, la penalización de tamaño y la pérdida de caché independiente superan el ahorro de la petición.
¿Por qué crece el archivo?
Base64 representa tres bytes binarios como cuatro caracteres ASCII, un aumento fijo del 33 %, más un poco por el prefijo del URI. Ese es el precio de incrustar datos binarios dentro de un archivo de texto.
¿Se cachea un data URI?
Solo como parte del archivo que lo contiene. Cambia un icono incrustado y habrá que descargar de nuevo toda la hoja de estilos, que es exactamente por lo que incrustar imágenes grandes sale mal.