2012-07-31 7 views
31

Sto pensando di utilizzare le immagini codificate Base64 per un sito su cui sto lavorando per ottimizzare il tempo di caricamento.Vantaggi e svantaggi dell'uso di immagini codificate in Base64

In ogni caso, prima di iniziare, mi chiedevo: quali sono i vantaggi e gli svantaggi di ciò?

Al momento, non vedo alcun svantaggio ma ho notato che non è una tecnica usata molto spesso e che mi chiedo se non mi sia sfuggito qualcosa.

Dopo aver fatto il googleing, non ho trovato nulla di chiaro, quindi ho deciso di chiedere qui.

+2

Non sai cosa stai cercando di ottimizzare. Pensi che base64 comprimerà più di PNG o JPEG? Logicamente, ti ritroverai con immagini quattro volte più grandi, quindi non molto di miglioramento. –

+0

Dimensioni immagine superiori ma non faccio una seconda richiesta per ottenere l'immagine. Viene inviato all'interno dell'html. Quindi niente intestazioni di nuovo. – zozo

+0

Inoltre ho trovato questo utile, ma sto ancora pensando. http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to – zozo

risposta

27

È utile solo per immagini molto piccole. I file codificati Base64 sono più grandi dell'originale. Il vantaggio consiste nel non dover aprire un'altra connessione e fare una richiesta HTTP al server per l'immagine. Questo vantaggio si perde molto rapidamente, quindi c'è solo un vantaggio per un numero elevato di immagini minuscole.

+0

Alcuni CMS aziendali (come RedDot) necessitano anche di immagini CSS per essere "collegati" "- una procedura in 4 click. A seconda della piattaforma, potrebbe essere un risparmio di tempo. – ArleyM

8

la lunghezza effettiva del MIME-compliant dati binari codifica Base64 è solitamente circa 137% della lunghezza dati originali, se per molto brevi messaggi l'overhead può essere molto più elevata a causa del sovraccarico delle intestazioni . Molto approssimativamente, la dimensione finale dei dati binari codificati Base64 è pari a 1,37 volte la dimensione dei dati originali + 814 byte (per le intestazioni).

In altre parole, la dimensione dei dati decodificati può essere approssimata con questa formula:

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

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

3

Alcuni aspetti negativi seguito sono già menzionati in questo post a How much faster is it to use inline/base64 images for a web site than just linking to the hard file?

  • maggior parte delle forme di caching sono battuti, che potrebbero danneggiare molto se l'immagine viene visualizzata o ften - diciamo, un logo che viene visualizzato su ogni pagina, che potrebbe normalmente essere memorizzato nella cache dal browser.
  • Altro utilizzo della CPU.
+0

Informazioni sulla memorizzazione nella cache ... la pagina potrebbe essere memorizzata nella cache stessa.Il rovescio della medaglia qui è l'elaborazione dei dati ogni volta. – zozo

+4

d'accordo, ma nel caso dell'esempio logo ci possono essere diverse pagine e molti sul sito che non verranno memorizzati nella cache del primo sono visitate ma l'immagine memorizzata nella cache del logo su tutte queste pagine può essere utilizzato ogni volta dal primo cache della pagina. –

+0

@zozo Non se il contenuto degli aggiornamenti della pagina, quindi sia il contenuto e le immagini dovranno essere scaricati e analizzati di nuovo. – arve0

3

anche il tempo di risposta della pagina HTML aumenterà, perché le immagini caricano asyn nello scenario normale. anche se le immagini vengono caricate in ritardo, puoi iniziare a vedere il testo.

Un altro vantaggio di CDN sarebbe perso se solo supporto viene memorizzato nella cache in CDN

questo vantaggio sarà perso.

+1

cosa ne pensi se si carica un'immagine da base64? Dal momento che voglio inviare insieme a JSON object. –