2009-02-07 9 views
26

Quindi sto lavorando su qualcosa in php dove devo ottenere le mie immagini da un database sql dove saranno codificate in base64. La velocità di visualizzazione di queste immagini è fondamentale quindi sto cercando di capire se sarebbe più veloce trasformare i dati del database in un file immagine e quindi caricarlo nel browser, o semplicemente echo i dati base64 base e utilizzare:Base 64 encode vs caricamento di un file immagine

<img src="data:image/jpeg;base64,/9j/4AAQ..." /> 

Quale è supportato in FireFox e altri browser Gecko.

Quindi, per ricapitolare, sarebbe più veloce trasferire un file immagine reale o il codice base64. Richiederebbe meno richiesta http quando si usa ajax per caricare le immagini?

Le immagini non devono essere più di 100 pixel in totale.

+1

È sempre la stessa immagine statica?Poi ci sono tecniche per inviare solo un'immagine e con CSS solo mostrare parte di essa. – some

+1

@some: gli sprite CSS potrebbero essere utili qui. – Piskvor

risposta

18

Beh, non sono d'accordo con nessuno di voi. Ci sono casi in cui devi caricare sempre più immagini. Non tutte le pagine contengono affatto 3 immagini. In realtà sto lavorando su un sito in cui devi caricare più di 200 immagini. Cosa succede quando 100000 utenti richiedono 200 immagini su un sito molto carico. I dischi del server, restituendo le immagini dovrebbero collassare. Peggio ancora devi fare così tante richieste al server invece di una con base64. Per così tante miniature preferirei la rappresentazione base64, pre-salvata nel database. Ho trovato la soluzione e una forte argomentazione allo http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/. Il ragazzo è davvero in quel caso e ha fatto alcuni test. Sono rimasto impressionato e ho fatto anche i miei test. La realtà è come dice. Per così tante immagini caricate in una sola pagina l'unica risposta dal server è davvero utile.

+13

Il ragazzo che hai citato sembra dire che le sue immagini avevano 2 MB (megabyte) se servite da disco e sono state portate a 45 KB (kilobyte) quando sono state pubblicate in linea. Solo questo rende il suo caso piuttosto discutibile. – Piskvor

+0

Completamente, ho verificato che la codifica base64 effettivamente aumenta le dimensioni. A meno che questo tizio non abbia fatto anche la compressione – Richeek

23
  • La codifica Base64 rende il file più grande e quindi più lento da trasferire.
  • Includendo l'immagine nella pagina, è necessario scaricarla ogni volta. Le immagini esterne vengono normalmente scaricate solo una volta e quindi memorizzate nella cache dal browser.
  • Non è compatibile con tutti i browser
+1

, la decodifica base64 è lenta. –

+0

inoltre, esiste un'alternativa di fusione di miniature di immagini in immagini più grandi e quindi di presentare solo parti rilevanti utilizzando puro css. In questo modo sono necessarie 2 richieste - pagina e 1 immagine. Le immagini possono essere rigenerate una volta raggiunto il limite di righe di immagini impaginate. Questo purtroppo non si applica ai contenuti ricercabili. – too

+0

@GaryRichardson Posso confermare questo. Soprattutto sui telefoni. – JedatKinports

1

Generalmente, utilizzando la codifica Base64 è destinato ad aumentare la dimensione in byte di circa 1/3. Per questo motivo, dovrai spostare 1/3 byte dal database al server, quindi spostare gli stessi 1/3 di byte in più sul wire del browser.

Ovviamente, man mano che la dimensione dell'immagine aumenta, l'overhead indicato aumenterà proporzionalmente.

Detto questo, penso che sia una buona idea cambiare i file nelle loro rappresentazioni di byte nel db e trasmetterli.

3

Non pensare che data:// funzioni in IE7 o sotto.

Quando viene richiesta un'immagine, è possibile salvarla sul filesystem, quindi servirla da quel momento in poi. Se i dati dell'immagine nel database cambiano, basta eliminare il file. Servilo anche da un altro dominio come img.domain.com. È possibile ottenere gratuitamente tutti i vantaggi degli ultimi tag modificati o e-tag dal proprio server Web senza dover avviare PHP, a meno che non sia necessario.

Se stai usando Apache:

# If the file doesn't exist: 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^/(image123).jpg$ makeimage.php?image=$1 
+1

Ad ogni modo, IE succhia! –

+0

Ho smesso di utilizzare questo approccio per impedire all'utente non connesso di accedere ad alcuni file immagine. L'immagine può contenere informazioni sensibili. Non dire che è fondamentale, ma in alcuni casi eccezionali si vuole evitare questo. –

0

Se si desidera che la velocità più veloce, allora li si dovrebbe scrivere su disco quando vengono caricati/modificato e lasciare che il server web possa disporre dei file statici. Anche i suggerimenti di Rojoca sono buoni, dal momento che minimizzano l'invocazione di php. Un ulteriore vantaggio di servire da un altro dominio è (la maggior parte) browser invierà le richieste in parallelo.

Escludendo tutto ciò, quando si esegue una query per i dati, controllare se è stata modificata per l'ultima volta, quindi scriverlo sul disco e servire da lì. Dovrai assicurarti di rispettare l'intestazione If-Modified-Since in modo da non trasferire i dati inutilmente.

Se non è possibile scrivere sul disco o in un'altra cache, sarebbe più rapido archiviarlo come dati binari nel database ed eseguirne lo streaming. La regolazione delle dimensioni del buffer aiuterà a quel punto.

3

Perché rigenerare l'immagine più e più volte se non verrà modificata.Ipoteticamente, anche se ci sono 1000 diverse immagini possibili da mostrare in base a 1000 condizioni diverse, penso ancora che 1000 immagini sui dischi siano migliori. Ricorda, le immagini basate su disco possono essere memorizzate nella cache dal browser e salvare la larghezza di banda ecc. Ecc.

1

Per rispondere alla domanda iniziale, ho eseguito un test di misurazione di un'immagine jpeg 400x300 px a 96 ppi:

base64ImageData.Length 
177732 

bitmap.Length 
129882 
2

Si tratta di una soluzione molto semplice e veloce. Sebbene le dimensioni dell'immagine aumenteranno di circa il 33%, l'utilizzo di base64 ridurrà in modo significativo il numero di richieste http.

Le immagini Google e le immagini di Yahoo utilizzano base64 e servono immagini in linea. Controlla il codice sorgente e lo vedrai.

Ovviamente ci sono degli svantaggi su questo approccio, ma credo che i benefici superino i costi. I contro ho trovato è in dispositivi lenti. Ad esempio, in iPhone 3GS le immagini servite da immagini di google sono molto lente da rappresentare, dal momento che le immagini vengono gziped dal server e devono essere decompresse nel browser. Quindi, se il cliente ha un dispositivo lento, ne soffrirà un po 'durante il rendering delle immagini.

0

Ho usato immagini base64 una o due volte per icone (10x10 pixel o giù di lì).

Base64 immagini pro:

  • compatte - Hai singolo file. anche se il file è compresso, l'immagine base64 viene compressa quasi alla dimensione dell'immagine normale.
  • pagina viene recuperata in singola richiesta.

Base64 immagini contro:

  • essere realistici, probabilmente è necessario utilizzare il motore di scripting (ad esempio PHP) su tutte le pagine che contiene l'immagine.
  • se l'immagine viene modificata, tutte le pagine memorizzate nella cache devono essere nuovamente scaricate.
  • perché l'immagine è in linea, non è possibile utilizzare CDN o server Web con contenuto statico.

normali immagini pro:

  • se siete il protocollo SPDY uso, almeno teorica, pagina + immagini + CSS caricheranno con un'unica richiesta troppo.
  • è possibile impostare la scadenza sull'immagine, quindi il contenuto verrà memorizzato nella cache dai browser.