¿Cuánto más rápido es usar imágenes en línea/base64 para un sitio web que simplemente vincular al archivo rígido?

Question

¿Cuán rápido es usar una base64/línea para mostrar imágenes en lugar de simplemente vincular al archivo rígido en el servidor?

url(data:image/png;base64,.......) 

No he podido encontrar ningún tipo de métrica de rendimiento en esto.

que tienen algunas preocupaciones:

• Ya no obtener el beneficio de almacenamiento en caché
• no es una base 64 mucho más grande en tamaño que lo que un tamaño de archivo PNG/JPEG?

Definamos "más rápido", como en: el tiempo que le toma a un usuario para ver una página web HTML representado completa

Answer 1

Ya no obtiene el beneficio de almacenamiento en caché

Si eso varía según la cantidad que dependa del almacenamiento en caché.

¿No es una base64 MUCHO más grande que un tamaño de archivo PNG/JPEG?

El algoritmo de compresión de formato de archivo/imagen es el mismo, lo tomo, es decir, es PNG.

Usando Base-64, cada carácter de 8 bits representa 6 bits: por lo tanto, los datos binarios se descomprimen en una proporción de 8 a 6, es decir, solo alrededor del 35%.

Answer 2

¿Cuánto más rápido es que

Definir 'más rápido'. ¿Te refieres al rendimiento de HTTP (ver a continuación) o al rendimiento de representación?

Ya no obtiene el beneficio de almacenamiento en caché

En realidad, si usted está haciendo esto en un archivo CSS que todavía se almacena en caché. Por supuesto, cualquier cambio en el CSS invalidará el caché.

En algunas situaciones, esto podría utilizarse como un gran aumento de rendimiento en muchas conexiones HTTP. Digo algunas situaciones porque es probable que puedas aprovechar técnicas como los sprites de imagen para la mayoría de las cosas, ¡pero siempre es bueno tener otra herramienta en tu arsenal!

Answer 3

'Faster' es una cosa difícil de responder, porque hay muchas posibles interpretaciones y situaciones:

codificación Base64 ampliará la imagen en un tercio, lo que aumentará la utilización del ancho de banda. Por otro lado, incluirlo en el archivo eliminará otro viaje de ida y vuelta al servidor. Por lo tanto, una tubería con gran capacidad de procesamiento pero baja latencia (como una conexión a Internet por satélite) probablemente cargará una página con imágenes en línea más rápido que si estuviera utilizando distintos archivos de imagen. Incluso en mi línea DSL (rural, lenta), los sitios que requieren muchos viajes redondos tardan mucho más en cargarse que aquellos que son relativamente grandes pero requieren solo unos pocos GET.

Si realiza la codificación base64 desde los archivos fuente con cada solicitud, utilizará más CPU, agolpamiento de sus cachés de datos, etc., lo que podría dañar el tiempo de respuesta de sus servidores. (Por supuesto, siempre puedes usar memcached o tal para resolver ese problema).

Hacer esto evitará la mayoría de las formas de almacenamiento en caché, lo que podría perjudicar mucho si la imagen se ve a menudo, por ejemplo, un logotipo que se muestra en cada página, que normalmente podría almacenarse en caché (o un proxy caché como calamares o lo que sea) y se solicita una vez al mes. También evitará las muchas optimizaciones que tienen los servidores web para servir archivos estáticos usando kernel APIs como sendfile (2).

Básicamente, hacer esto ayudará en ciertas situaciones y en otras. Debe identificar qué situaciones son importantes para usted antes de que realmente pueda descubrir si este es un truco que vale la pena para usted.

Answer 4

He hecho una comparación entre dos páginas HTML que contienen 1800 imágenes de un píxel.

La primera página declara la imágenes en línea:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"> 

En el segundo, las imágenes de referencia en un archivo externo:

<img src="img/one-gray-px.png"> 

He descubierto que al cargar varias veces la misma imagen, si se declara en línea, el navegador realiza una solicitud para cada imagen (supongo que base64-decodifica una vez por imagen), mientras que en el otro escenario, la imagen se solicita una vez por documento (ver la imagen de comparación a continuación).

El documento con imágenes en línea se carga en aproximadamente 250ms y el documento con imágenes enlazadas lo hace en 30ms.

(probado con Cromo 34)

El escenario de un documento HTML con múltiples instancias de la misma imagen en línea no tiene mucho sentido a priori. Sin embargo, descubrí que el complemento jquery lazyload define un marcador de posición en línea de forma predeterminada para todas las imágenes "vagas", cuyo atributo src se establecerá en él. Entonces, si el documento contiene muchas imágenes perezosas, puede suceder una situación como la descrita anteriormente.