2012-07-31 165 views
31

Estoy pensando en usar imágenes codificadas en base64 para un sitio en el que estoy trabajando para optimizar el tiempo de carga.Ventajas y desventajas de usar imágenes codificadas en base64

De todos modos, antes de comenzar, me preguntaba: ¿cuáles son las ventajas y desventajas de hacer esto?

Por el momento, no veo ninguna desventaja, pero también me di cuenta de que no es una técnica utilizada muy a menudo y eso me hace preguntarme si no me perdí de algo.

Después de googlear el tema no encontré nada claro, así que decidí preguntar aquí.

+2

No estoy seguro de lo que está tratando de optimizar. ¿Crees que base64 va a comprimir más que PNG o JPEG? Lógicamente, terminarás obteniendo imágenes que son cuatro veces más grandes, por lo que no se trata de una gran mejora. –

+0

Mayor tamaño de imagen, pero no hago una segunda solicitud para obtener la imagen. Se envía dentro del html. Entonces no hay encabezados otra vez. – zozo

+0

También encontré esto útil, pero todavía estoy pensando. http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to – zozo

Respuesta

27

Solo es útil para imágenes muy pequeñas. Los archivos codificados en Base64 son más grandes que el original. La ventaja radica en no tener que abrir otra conexión y hacer una solicitud HTTP al servidor para la imagen. Este beneficio se pierde muy rápidamente, por lo que solo hay una ventaja para un gran número de imágenes individuales muy pequeñas.

+0

Algunos CMS empresariales (como RedDot) también necesitan imágenes CSS para ser "conectadas" "- un proceso de 4 clics. Dependiendo de su plataforma, podría ser un ahorro de tiempo. – ArleyM

8

la longitud real de los datos binarios con codificación Base64 compatible con MIME es lo general alrededor de 137% de la longitud de datos original, aunque por muy cortos mensajes de la sobrecarga puede ser mucho mayor debido a la sobrecarga de los cabeceras . Muy aproximadamente, el tamaño final de los datos binarios codificados en Base64 es igual a 1,37 veces el tamaño de datos original + 814 bytes (para encabezados).

En otras palabras, el tamaño de los datos decodificados se puede aproximar con esta fórmula:

bytes = (string_length(encoded_string) - 814)/1.37 

Fuente: http://en.wikipedia.org/wiki/Base64#MIME

3

Algunos de desventajas como a continuación se mencionan ya en este post en How much faster is it to use inline/base64 images for a web site than just linking to the hard file?

  • La mayoría de las formas de almacenamiento en caché son golpeadas, lo que podría perjudicar mucho si se visualiza la imagen o por ejemplo, un logotipo que se muestra en cada página, que normalmente el navegador podría guardar en caché.
  • Más uso de CPU.
+0

Acerca del almacenamiento en caché ... la página podría almacenarse en caché.La desventaja aquí es el procesamiento de los datos cada vez. – zozo

+4

De acuerdo pero en el caso del ejemplo de logotipo puede haber diferentes páginas en el sitio que no se almacenarán en caché el primero que se visiten, pero la imagen en caché del logotipo en todas estas páginas se puede usar todas las veces desde la primera caché de la página –

+0

@zozo No si el contenido de la página se actualiza, entonces tanto el contenido como las imágenes deberán descargarse y analizarse nuevamente. – arve0

3

también aumentará el tiempo de respuesta de la página HTML, porque las imágenes se cargan asyn en el escenario normal. incluso si las imágenes se cargan tarde, puede comenzar a ver el texto.

Otra ventaja de CDN habría perdido si tan sólo los medios de comunicación se almacena en caché en el CDN

que se perderá la ventaja.

+1

¿Qué piensas si solo subes imágenes por base64? Como quiero enviar junto con el objeto json. –

Cuestiones relacionadas