html - online - tamaño de imagen codificado en base64
mostrar imagen base64 javascript (6)
Si convierto una imagen (jpg o png) a base64, ¿será más grande o tendrá el mismo tamaño? ¿Cuánto más grande será?
¿Se recomienda utilizar imágenes codificadas en base64 en mi sitio web?
Aquí hay una descripción muy útil de cuándo codificar base64 y cuándo no hacerlo por David Calhoun.
Respuesta básica = los archivos codificados gzipped base64 serán aproximadamente comparables en tamaño de archivo a binario estándar (jpg / png). Los archivos binarios de Gzip tendrán un tamaño de archivo más pequeño.
Takeaway = Hay alguna ventaja en la codificación y gzip de los íconos de tu UI, etc., pero no es aconsejable hacerlo para imágenes más grandes.
Definitivamente le costará más espacio y ancho de banda si desea usar imágenes codificadas en base64. Sin embargo, si su sitio tiene muchas imágenes pequeñas, puede disminuir el tiempo de carga de la página codificando sus imágenes en base64 y colocándolas en html. De esta forma, el navegador del cliente no necesitará hacer muchas conexiones a las imágenes, sino que las tendrá en html.
La codificación de una imagen a base64 lo hará un 30% más grande.
Consulte los detalles en el artículo de wikipedia sobre el esquema de URI de datos , donde dice:
Los URI de datos codificados en Base64 son 1/3 de mayor tamaño que su equivalente binario. (Sin embargo, esta sobrecarga se reduce a 2-3% si el servidor HTTP comprime la respuesta usando gzip)
Será aproximadamente un 37% más grande:
Muy aproximadamente, el tamaño final de los datos binarios codificados en Base64 es igual a 1,37 veces el tamaño de los datos originales
Será más grande en base64.
Base64 usa 6 bits por byte para codificar datos, mientras que el binario usa 8 bits por byte. Además, hay un pequeño colchón sobrecargado con Base64. No todos los bits se usan con Base64 porque se desarrolló en primer lugar para codificar datos binarios en sistemas que solo pueden procesar datos no binarios correctamente.
Eso significa que la imagen codificada será aproximadamente un 25% más grande, más una sobrecarga constante para el relleno.
Tamaño de base64-images
Base64 usa 64 caracteres diferentes y esto es 2 ^ 6. Así que base64 almacena 6 bits por 8 bits de caracteres. Entonces, la proporción es de 6/8 de datos no convertidos a datos de base64. Este no es un cálculo exacto, sino un cálculo aproximado.
Ejemplo:
Una imagen de 48 kb necesita alrededor de 64 kb como imagen convertida en base64.
Cálculo: (48/6) * 8 = 64
Calculadora CLI simple en sistemas Linux:
$ cat /dev/urandom|head -c 48000|base64|wc -c
64843
O usando una imagen:
$ cat my.png|base64|wc -c
base64-images y sitios web
Esta pregunta es mucho más difícil de responder. En términos generales, cuanto más grande es la imagen, menos sentido tiene usar base64. Pero considere los siguientes puntos:
- Muchas imágenes incrustadas en un archivo HTML o CSS-File pueden tener cadenas similares. Para PNG, a menudo encuentras repetidos caracteres "A". Usando gzip (a veces llamado "desinflar"), puede haber incluso un triunfo en el tamaño. Pero depende del contenido de la imagen.
- Solicitar sobrecarga de HTTP1.1: especialmente con muchas cookies puede tener fácilmente unos pocos kilobytes de sobrecarga por solicitud. La incrustación de imágenes base64 podría ahorrar ancho de banda.
- No base64 codifique imágenes SVG, porque gzip es más efectivo en XML que en base64.
- Programación: en imágenes generadas dinámicamente es más fácil entregarlas en una solicitud para coordinar dos solicitudes dependientes.
- Enlaces profundos: si desea evitar la descarga de la imagen, es un poco más complicado extraer una imagen de una página HTML.
Entonces la respuesta es: depende.