¿Cuál es el efecto de codificar una imagen en base64?
Si convierto una imagen (jpg o png) a base64, ¿será más grande o tendrá el mismo tamaño? ¿Cuánto mayor será?
¿Se recomienda utilizar imágenes codificadas en base64 en mi sitio web?
Será aproximadamente un 37% más grande:
De manera muy aproximada, el tamaño final de los datos binarios codificados en Base64 es igual a 1,37 veces el tamaño de los datos originales.
Fuente: http://en.wikipedia.org/wiki/Base64
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 poco de relleno con Base64. No todos los bits se utilizan con Base64 porque fue desarrollado en primer lugar para codificar datos binarios en sistemas que solo pueden procesar correctamente datos no binarios.
Eso significa que la imagen codificada será entre un 33% y un 36% más grande (33% por no utilizar 2 bits por byte, más un posible relleno que represente el 3% restante).
Aquí hay una descripción general realmente útil de cuándo codificar en base64 y cuándo no, por David Calhoun.
Respuesta básica = los archivos codificados en base64 comprimidos con gzips serán aproximadamente comparables en tamaño de archivo al binario estándar (jpg/png). Los archivos binarios comprimidos con Gzip tendrán un tamaño de archivo más pequeño.
Conclusión = Hay algunas ventajas en codificar y comprimir los íconos de la interfaz de usuario, etc., pero no es aconsejable hacerlo para imágenes más grandes.
La respuesta es, depende.
Aunque las imágenes base64 son más grandes, existen algunas condiciones en las que base64 es la mejor opción.
Tamaño de las imágenes base64
Base64 usa 64 caracteres diferentes y este es 2^6. Entonces base64 almacena 6 bits por carácter de 8 bits. Entonces, la proporción es 6/8 de datos no convertidos a datos base64. Este no es un cálculo exacto, sino una estimación aproximada.
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-imágenes y sitios web
Esta pregunta es mucho más difícil de responder. En términos generales, cuanto más grande sea la imagen, menos sentido tendrá usar base64. Pero considere los siguientes puntos:
- Muchas imágenes incrustadas en un archivo HTML o CSS pueden tener cadenas similares. En el caso de los archivos PNG, a menudo se encuentran caracteres "A" repetidos. Usando gzip (a veces llamado "deflate"), incluso se puede ganar en tamaño. Pero depende del contenido de la imagen.
- Solicitud de 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 puede ahorrar ancho de banda.
- No codifique imágenes SVG en base64, 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 que 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.
