Reducir las solicitudes HTTP de 1000 imágenes?

Question

Sé que esta pregunta puede sonar un poco loco, pero resistente que tal vez alguien se le ocurrió una idea inteligente:

Imagine que tiene 1.000 imágenes en miniatura de una sola página HTML.

El tamaño de la imagen es de aproximadamente 5-10 kb.

¿Hay una manera de cargar todas las imágenes en una sola solicitud? zip de alguna manera todas las imágenes en un solo archivo ...

o tiene alguna otra sugerencia en el tema?

Otras opciones que ya conozco de:

sprites CSS

carga Lazy

Configurar encabezados de caducidad

Descarga imágenes a través de diferentes nombres de host

Answer 1

Sólo hay dos otras opciones que se me ocurren dada su situación:

1. Usar los datos ":" Protocolo y el eco de una base 64 codificada versión de las miniaturas directamente en la página HTML. Yo no recomendaría esto ya que después no se puede almacenar en caché esas imágenes en el navegador del usuario.
2. almacenamiento Web de uso de HTML5 para almacenar todas las imágenes como los registros con los datos de imagen base64 almacenados como BLOB en una columna. Una vez que la base de datos ha descargado a la máquina de los usuarios, utilizar Javascript para recorrer todos los registros y crear las miniaturas de la página dinámicamente usando algo como jQuery. Con esta opción usted tendría que esperar hasta que la base de datos se llevó a cabo la descarga en el navegador de los usuarios finales, y se necesitará un navegador bastante moderno.

Creo que la mejor opción es una combinación de carga diferida, el almacenamiento en caché con las cabeceras expira y servir imágenes desde múltiples nombres de host.

Si las imágenes se pueden agrupar lógicamente, sprites CSS también puede trabajar para usted, además de todo lo anterior. Por ejemplo, si sus miniaturas son para las imágenes cargadas en un cierto día ... puede ser capaz de crear un único archivo para cada día que podría ser almacenado en caché en el navegador del usuario.

Answer 2

Esto se hace mediante el uso de lo que se llama un sprite CSS; una sola imagen con todas las otras imágenes en su interior, con la parte particular que ha querido en el html seleccionada por css.

Ver un tutorial en http://css-tricks.com/css-sprites

Answer 3

Parece que usted quiere algo así como server push . Cuando el cliente solicita la página HTML (o la primera imagen), SPDY permite al servidor para empujar los otros recursos sin esperar a más solicitudes.

Por supuesto, esto es todavía experimental.

Answer 4

Se podría intentar el comando montaje de ImageMagick para crear una sola imagen.