Quanto è più veloce l'uso di immagini in linea/base64 per un sito Web rispetto al semplice collegamento al file rigido?

Question

Quanto è più veloce usare una base64/linea per visualizzare le immagini piuttosto che semplicemente il collegamento al file rigido sul server?

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

Non sono stato in grado di trovare alcun tipo di misurazione delle prestazioni su questo.

ho alcune preoccupazioni:

• Non è più ottenere il beneficio di caching
• non è un base64 molto più grande in termini di dimensioni di quello che una dimensione del file PNG/JPEG?

Definiamo "più veloce", come in: il tempo necessario per un utente di vedere una pagina web HTML reso piena

Answer 1

Non è più guadagna il beneficio di caching

Se ciò che conta potrebbe variare in base a quanto dipende dal caching.

Non è una base64 MOLTO più grande di una dimensione di file PNG/JPEG?

Il formato del file/algoritmo di compressione dell'immagine è lo stesso, lo prendo, cioè è PNG.

Utilizzando Base-64, ogni carattere di 8 bit rappresenta 6 bit: pertanto i dati binari vengono decompressi con un rapporto di 8-a-6, cioè solo circa il 35%.

Answer 2

Quanto più veloce è esso

Definire 'più veloce'. Intendi le prestazioni HTTP (vedi sotto) o le prestazioni di rendering?

Non è più guadagna il beneficio di caching

In realtà, se si sta facendo questo in un file CSS sarà ancora memorizzato nella cache. Ovviamente, qualsiasi modifica al CSS invaliderà la cache.

In alcune situazioni questo potrebbe essere utilizzato come un enorme incremento delle prestazioni su molte connessioni HTTP. Dico alcune situazioni perché probabilmente puoi sfruttare tecniche come gli sprite delle immagini per la maggior parte delle cose, ma è sempre bene avere un altro strumento nel tuo arsenale!

Answer 3

'Faster' è una cosa difficile da rispondere perché ci sono molte interpretazioni possibili e situazioni:

codifica Base64 si espanderà l'immagine di un terzo, che consentirà di aumentare l'utilizzo della larghezza di banda. D'altra parte, includerlo nel file rimuoverà un altro giro GET al server. Pertanto, una pipe con un throughput elevato ma una scarsa latenza (come una connessione Internet via satellite) caricherà probabilmente una pagina con immagini inline più velocemente rispetto a se si utilizzassero file di immagine distinti. Anche sulla mia linea DSL (rurale, lenta), i siti che richiedono molti round trip richiedono molto più tempo per essere caricati rispetto a quelli che sono solo relativamente grandi ma richiedono solo pochi GET.

Se esegui la codifica base64 dai file di origine con ogni richiesta, utilizzerai più CPU, sovraccaricando le cache dei dati e così via, il che potrebbe danneggiare il tempo di risposta del tuo server. (Ovviamente puoi sempre usare memcached o simili per risolvere quel problema).

In questo modo si eviterà naturalmente la maggior parte delle forme di memorizzazione nella cache, che potrebbero danneggiare molto se l'immagine viene visualizzata spesso, ad esempio un logo visualizzato su ogni pagina, che potrebbe essere normalmente memorizzato nella cache dal browser (o un proxy cache come calamari o altro) e richiesto una volta al mese. Impedirà inoltre l'ottimizzazione di molti molti server Web per la fornitura di file statici utilizzando le API del kernel come sendfile (2).

Fondamentalmente, fare questo aiuterà in determinate situazioni e fa male agli altri. Devi identificare quali situazioni sono importanti per te prima di poter capire se questo è un trucco utile per te.

Answer 4

Ho eseguito un confronto tra due pagine HTML contenenti 1800 immagini a un pixel.

La prima pagina dichiara l'immagini inline:

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

Nella seconda, immagini di riferimento un file esterno:

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

ho scoperto che quando si carica più volte la stessa immagine, se è dichiarato in linea, il browser esegue una richiesta per ogni immagine (suppongo che base64 decodifichi una volta per immagine), mentre nell'altro scenario, l'immagine viene richiesta una volta per documento (vedi l'immagine di confronto sotto).

Il documento con immagini in linea carica in circa 250 ms e il documento con immagini collegate lo fa in 30 ms.

(Testato con cromo 34)

Lo scenario di un documento HTML con più istanze della stessa immagine in linea non ha molto senso a priori. Tuttavia, ho trovato che il plugin jquery lazyload definisce un segnaposto in linea per impostazione predefinita per tutte le immagini "pigri", il cui attributo src sarà impostato su di esso. Quindi, se il documento contiene molte immagini pigre, può verificarsi una situazione come quella descritta sopra.