Optimizando Activos con Base64
La codificación Base64 te permite incrustar datos de imagen directamente en tus archivos HTML, CSS o JSON como texto. Esto elimina la necesidad de una solicitud HTTP separada para obtener el archivo de imagen.
Pros y Contras
Ventajas
- Menos Solicitudes HTTP: Acelera la carga de la página reduciendo el número de viajes de ida y vuelta al servidor.
- Archivo Único: Fácil de compartir o almacenar ya que todo está contenido en una sola cadena de texto.
Desventajas
- Tamaño Mayor: Las cadenas Base64 son aproximadamente un 33% más grandes que el archivo binario original.
- Sin Caché: La imagen no puede ser almacenada en caché por separado por el navegador; se recarga cada vez que el HTML/CSS se recarga.
Cómo Funciona
La codificación Base64 toma datos binarios (como una imagen) y los traduce en un conjunto de 64 caracteres ASCII (A-Z, a-z, 0-9, +, /). Esto asegura que los datos permanezcan intactos durante el transporte a través de protocolos diseñados para manejar texto.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
Aprende Más
Lee más sobre Data URLs y cuándo usarlas.