¿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:

A grandes rasgos, 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

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 gzip serán aproximadamente comparables en tamaño de archivo al binario estándar (jpg / png). Los archivos binarios con Gzip tendrán un tamaño de archivo más pequeño.

Takeaway = Hay algunas ventajas en codificar y comprimir con gzip los íconos de la interfaz de usuario, etc., pero no es aconsejable hacer esto para imágenes más grandes.

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 una pequeña sobrecarga de relleno con Base64. No todos los bits se utilizan con Base64 porque se desarrolló en primer lugar para codificar datos binarios en sistemas que solo pueden procesar correctamente datos no binarios.

Eso significa que la imagen codificada será aproximadamente un 25% más grande, más una sobrecarga constante para el relleno.

Codificar una imagen en base64 la 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 más grandes que su equivalente binario. (Sin embargo, esta sobrecarga se reduce al 2-3% si el servidor HTTP comprime la respuesta usando gzip)

La respuesta es: depende.

Aunque las imágenes en base64 son más grandes, existen algunas condiciones en las que base64 es la mejor opción.

Tamaño de 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 es la imagen, menos sentido tiene usando base64. Pero considere los siguientes puntos:

• Muchas imágenes incrustadas en un archivo HTML o un archivo CSS pueden tener cadenas similares. Para los PNG, a menudo se encuentran caracteres "A" repetidos. Usando gzip (a veces llamado "desinflar"), puede haber incluso una ganancia 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 quieres evitar la descarga de la imagen, es un poco más complicado extraer una imagen de una página HTML.

Definitivamente le costará más espacio y ancho de banda si desea utilizar 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, pero las tendrá en html.