Ridurre le richieste HTTP di 1000 immagini?

Question

So che questa domanda potrebbe sembrare un po 'folle, ma dura che forse qualcuno potrebbe venire con un'idea intelligente:

Immaginate di avere 1.000 miniature delle immagini su una singola pagina HTML.

La dimensione dell'immagine è di circa 5-10 kb.

C'è un modo per caricare tutte le immagini in una singola richiesta? In qualche modo zip tutte le immagini in un unico file ...

O avete altri suggerimenti in materia?

Altre opzioni che già conosco:

sprite CSS

carico pigro

Set Scadenza intestazioni

Scarica le immagini tra i diversi nomi di host

Answer 1

Ci sono solo due altre opzioni che posso pensare data la situazione:

1. Usa i "dati:" il protocollo e l'eco di una Base64 codificato versione delle miniature direttamente nella pagina HTML. Non consiglierei questo dal momento che non può quindi memorizzare nella cache quelle immagini sul browser degli utenti.
2. Web Storage Usa HTML5 per memorizzare tutte le immagini come record con i dati delle immagini codificate base64 memorizzati come BLOB in una colonna. Una volta che il database è stato scaricato sulla macchina gli utenti, utilizzare Javascript per scorrere tutti i record e creare le miniature sulla pagina in modo dinamico utilizzando qualcosa come jQuery. Con questa opzione si avrebbe bisogno di aspettare fino a tutto il database è stato fatto il download del browser degli utenti finali, e avranno bisogno di un browser abbastanza moderno.

Credo che la cosa migliore è una combinazione di pigro carico, caching con Scade intestazioni e servire le immagini da più nomi host.

Se le immagini possono essere raggruppate in modo logico, sprite CSS può anche funzionare per voi in aggiunta a tutto ciò di cui sopra. Ad esempio, se le miniature sono per le immagini caricate in un determinato giorno ... si può essere in grado di creare un unico file per ogni giorno che potrebbe poi essere memorizzato nella cache del browser degli utenti.

Answer 2

Questo viene fatto utilizzando quello che viene chiamato uno sprite CSS; una singola immagine con tutte le altre immagini al suo interno, con la parte particolare che è volevano nel html selezionato dal css.

Vedere un tutorial http://css-tricks.com/css-sprites

Answer 3

Sembra che si desidera qualcosa di simile di SPDY server di push . Quando il client richiede la pagina HTML (o la prima immagine), SPDY consente al server di spingere le altre risorse senza attendere ulteriori richieste.

Naturalmente, questo è ancora sperimentale.

Answer 4

Si potrebbe provare il montaggio comando di ImageMagick per creare una singola immagine.