html - online - ¿Cuánto más rápido es usar imágenes en línea/base64 para un sitio web que solo un enlace al archivo duro?
imagen en base 64 html (4)
¿Cuánto más rápido es usar una base64 / línea para mostrar imágenes en lugar de simplemente vincular al archivo en el servidor?
url(data:image/png;base64,.......)
No he podido encontrar ningún tipo de métricas de rendimiento en esto.
Tengo algunas preocupaciones:
- Ya no obtienes el beneficio del almacenamiento en caché
- ¿No es una base64 mucho más grande que el tamaño de un archivo PNG / JPEG?
Definamos "más rápido" como en: el tiempo que tarda un usuario en ver una página web HTML completa.
Cuanto mas rapido es
Define ''más rápido''. ¿Se refiere al rendimiento HTTP (ver más abajo) o al rendimiento de representación?
Ya no obtienes el beneficio del almacenamiento en caché
En realidad, si está haciendo esto en un archivo CSS, todavía se almacenará en caché. Por supuesto, cualquier cambio en el CSS invalidará el caché.
En algunas situaciones, esto podría usarse como un gran aumento de rendimiento en muchas conexiones HTTP. Digo algunas situaciones porque probablemente puedas aprovechar técnicas como sprites de imagen para la mayoría de las cosas, ¡pero siempre es bueno tener otra herramienta en tu arsenal!
Ya no obtienes el beneficio del almacenamiento en caché
Si eso importa, variaría según la cantidad que dependa del almacenamiento en caché.
¿No es una base64 mucho más grande que el tamaño de un archivo PNG / JPEG?
El algoritmo de compresión de imagen / formato de archivo es el mismo, lo tomo, es decir, es PNG.
Al utilizar Base-64, cada carácter de 8 bits representa 6 bits: por lo tanto, los datos binarios se descomprimen en una relación de 8 a 6, es decir, solo alrededor del 35%.
''Más rápido'' es una cosa difícil de responder porque hay muchas interpretaciones y situaciones posibles:
La 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 GET de ida y vuelta al servidor. Por lo tanto, una tubería con un gran rendimiento pero una latencia pobre (como una conexión a internet vía satélite) probablemente cargará una página con imágenes en línea más rápido que si estuviera usando archivos de imagen distintos. Incluso en mi línea DSL (rural, lenta), los sitios que requieren muchos viajes de ida y vuelta tardan mucho más en cargarse que los que son relativamente grandes pero solo requieren unos pocos GET.
Si realiza la codificación base64 de los archivos de origen con cada solicitud, utilizará más CPU, agitará sus cachés de datos, etc., lo que podría perjudicar el tiempo de respuesta de sus servidores. (Por supuesto, siempre puede usar memcached o similar para resolver ese problema).
Por supuesto, esto evitará la mayoría de las formas de almacenamiento en caché, lo que podría perjudicar mucho si la imagen se ve con frecuencia; por ejemplo, un logotipo que se muestra en cada página, que normalmente podría ser almacenado en caché por el navegador (o un caché de proxy como el calamar o lo que sea) y solicitado una vez al mes. También evitará las muchas optimizaciones que tienen los servidores web para servir archivos estáticos utilizando las API del kernel como sendfile (2).
Básicamente, hacer esto ayudará en ciertas situaciones y lastimará en otras. Debe identificar qué situaciones son importantes para usted antes de que realmente pueda averiguar si este es un truco que vale la pena para usted.
He hecho una comparación entre dos páginas HTML que contienen 1800 imágenes de un píxel.
La primera página declara las imágenes en línea:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">
En la segunda, las imágenes hacen referencia a un archivo externo:
<img src="img/one-gray-px.png">
Descubrí que al cargar varias veces la misma imagen, si se declara en línea, el navegador realiza una solicitud para cada imagen (supongo que la descodifica en base64 una vez por imagen), mientras que en el otro escenario, la imagen se solicita una vez. por documento (ver imagen comparativa abajo).
El documento con imágenes en línea se carga en aproximadamente 250 ms y el documento con imágenes vinculadas lo hace en 30 ms.
(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, encontré que el complemento jquery lazyload define un marcador de posición en línea de forma predeterminada para todas las imágenes "perezosas", cuyo atributo src se establecerá en él. Luego, si el documento contiene muchas imágenes perezosas, puede ocurrir una situación como la descrita anteriormente.