Cuándo insertar imágenes en línea
Codificar una imagen en Base64 intercambia una solicitud de red por un archivo más grande. Esto es una ventaja para los activos pequeños y de uso frecuente (iconos, logotipos pequeños, gráficos espaciadores) donde la latencia de ida y vuelta cuesta más que los bytes adicionales. Para fotografías grandes, guárdelas en archivos separados.
Uso de URI de datos en CSS y HTML
Un URI de datos es solo una cadena que comienza con datos:imagen/png;base64,. Suéltelo en una imagen de fondo CSS o en un img src HTML y el navegador lo mostrará en línea. Esta herramienta genera ambos fragmentos para que puedas pegar el correcto directamente.
La compensación del tamaño
La codificación Base64 agrega aproximadamente un 33% al tamaño de un archivo porque representa datos binarios en texto. La inclusión en línea también significa que el activo no se puede almacenar en caché por separado en todas las páginas. Úselo deliberadamente para gráficos pequeños y de páginas críticas en lugar de para todo.
- 01
- Codificación de imágenes de arrastrar y soltar
- 02
- Generación de fragmentos de imagen de fondo CSS
- 03
- Salida de URI de datos HTML img src
- 04
- Decodificación instantánea de Base64
