Codifica Base 64 vs caricamento di un file immagine

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 raw base64 e utilizzare:

 

Che è 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 sarebbero più di 100 pixel in totale.

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 su 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.

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

Perché rigenerare l’immagine ancora e ancora 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 che le immagini basate su disco possono essere memorizzate nella cache dal browser e risparmiare larghezza di banda, ecc. Ecc.

Non pensare ai data:// funziona in IE7 o sotto.

Quando viene richiesta un’immagine, è ansible 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. È ansible 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 

È una soluzione molto veloce e facile. 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 di Google e le immagini di Yahoo utilizzano base64 e servono immagini in linea. Controlla il codice sorgente e lo vedrai.

Naturalmente ci sono degli svantaggi su questo approccio, ma credo che i benefici superino i costi. Un contro che 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.

Generalmente, l’uso della codifica base64 aumenterà la dimensione del 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.

Naturalmente, man mano che la dimensione dell’immagine aumenta, l’overhead citato aumenterà proporzionalmente.

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

Per rispondere alla domanda iniziale, ho eseguito un test misurando un’immagine jpeg di 400×300 px in 96 ppi:

 base64ImageData.Length 177732 bitmap.Length 129882 

Se si desidera la massima velocità, è necessario scriverli su disco quando vengono caricati / modificati e consentire al server Web di servire 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 questo, 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 riesci a scrivere su disco o su un’altra cache, sarebbe più rapido memorizzarlo come dati binari nel database e eseguirne lo streaming. La regolazione delle dimensioni del buffer aiuterà a quel punto.

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

Immagini base64:

  • compatto – hai un singolo file. anche se il file è compresso, l’immagine base64 viene compressa quasi alla dimensione dell’immagine normale.
  • la pagina viene recuperata in una singola richiesta.

Immagini di Base64:

  • per essere realistici, probabilmente è necessario utilizzare il motore di scripting (come PHP) su tutte le pagine che contengono l’immagine.
  • se l’immagine viene modificata, tutte le pagine memorizzate nella cache devono essere nuovamente scaricate.
  • poiché l’immagine è in linea, non è ansible utilizzare CDN o server Web con contenuto statico.

Immagini normali:

  • se usi il protocollo SPDY, almeno teorico, le pagine + le immagini + il CSS si caricheranno anche con una singola richiesta.
  • puoi impostare la scadenza sull’immagine, in modo che il contenuto venga memorizzato nella cache dai browser.