¿Cuál es el efecto de codificar una imagen en base64?


94

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?


1
La única vez que querría hacer algo así es si estuviera restringido a los recursos de texto sin formato y no pudiera usar un formato de imagen sin procesar por alguna razón.
Wug

Hay una buena respuesta aquí: stackoverflow.com/questions/1533113/…
Steed

base64 hace que los enlaces profundos sean imposibles. Esto puede ser una ventaja.
damoeb

@Wug: sepa que esto es una respuesta tardía y que las cosas han cambiado, pero definitivamente son momentos en los que puede lograr aumentos de rendimiento enviando bas64. Enviar mensajes a través de websockets con imágenes codificadas en base64 (pequeñas) sería más eficaz que solicitar cada imagen por sí misma.
Philip

Buena pregunta. Estaba buscando una buena respuesta para "¿guardar imágenes binarias o codificadas en base64?" y encontré varias buenas respuestas como esta
moreirapontocom

Respuestas:


129

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


28
No, no 137% más grande, 137% del tamaño original :-) 37% más grande (según su fuente).
Eric J.

4
Yo diría que es casi 4/3 del tamaño original.
kiwixz

¿Existe alguna limitación para el tamaño de la imagen para convertir la imagen a base64?
151291

2
@Blender Pero en mi caso, cuando convierto un mapa de bits de 70kb en una cadena, se convierte en 500kb. No es 37%. Comprimí una imagen de 5mb a 70kb y luego convertí esa imagen comprimida en una cadena que se convirtió en 500kb.
KJEjava48

@ KJEjava48: ¿Cómo lo estás convirtiendo en una cadena?
Blender

16

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.


14

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.


7

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)


7

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.

3

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.


Sin embargo, esto no será un problema una vez que HTTP 2 realmente llegue.
Philip

@Philip Eso es cierto, pero me gusta el factor de portabilidad de tener todos los recursos contenidos en el archivo HTML. Eso ayudará con el almacenamiento en caché web móvil en áreas con redes irregulares.
aalaap

@aalaap El problema con eso es que si hace un cambio en la página, debe volver a cargar todo el contenido, incluidas las imágenes. Donde si tiene los activos separados, puede tener una edad más alta en ellos y se almacenará en la caché y no se volverá a cargar en la caché, caducará en la página misma.
Philip
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.