¿Reduce las solicitudes HTTP de 1000 imágenes?

Sé que esta pregunta puede sonar un poco loca, pero es difícil que alguien pueda tener una idea inteligente:¿Reduce las solicitudes HTTP de 1000 imágenes?

Imagine que tiene 1000 miniaturas en una sola página HTML.

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

¿Hay alguna manera de cargar todas las imágenes en una sola solicitud? De alguna manera comprimir 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

Conjunto encabezados de caducidad

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

Fuente

2010-12-28 Hakan

Usted podría hacer una imagen compuesta utilizando gd? –

¿Por qué tienen que hacerlo en UNA página? ¿Por qué no usar sprites CSS? – prime23

Creo que probaría los sprites de CSS con un gran JPG progresivo. –

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

utilizar el "data:" Echo de protocolo y una versión codificada en base64 de las miniaturas directamente en la página HTML. No recomendaría esto ya que no puede almacenar esas imágenes en el navegador de los usuarios.
Utilice el almacenamiento web de HTML5 para almacenar todas las imágenes como registros con los datos de imagen codificados en base64 almacenados como BLOB en una columna. Una vez que la base de datos se haya descargado a la máquina de los usuarios, use Javascript para recorrer todos los registros y crear las miniaturas en la página de forma dinámica usando algo como jQuery. Con esta opción, necesitaría esperar hasta que toda la base de datos terminara de descargarse en el navegador de los usuarios finales, y necesitarían un navegador bastante moderno.

Creo que su mejor opción es una combinación de carga lenta, almacenamiento en caché con encabezados caducados y que sirve imágenes de múltiples nombres de host.

Si las imágenes se pueden agrupar lógicamente, los sprites CSS también pueden funcionar para usted además de todo lo anterior. Por ejemplo, si sus miniaturas son para imágenes cargadas en un día determinado ... es posible que pueda crear un único archivo para cada día que luego podría almacenarse en caché en el navegador de los usuarios.

Fuente

2010-12-28 05:09:55

+1 para datos: protocolo si la memoria caché no es necesaria. – Xailor

Dado que dice que todas las imágenes están en una sola página, un sprite es el camino a seguir. – ysth

@ysth, acepto que los sprites CSS probablemente sean beneficiosos. Si las miniaturas se agregan con frecuencia a su página, digamos cada día más o menos, puede ser beneficioso agrupar las miniaturas en múltiples sprites de CSS. 1000 10kb thumbs es 1.22MB. Agregar una nueva miniatura a un único sprite monolítico requeriría que el usuario final descargue ese archivo completo nuevamente, destruyendo cualquier posibilidad de almacenar en caché las posiciones de CSS y los datos de imagen de los sprites previamente descargados. Si su página nunca cambia, o cambia con poca frecuencia, un solo sprite de CSS puede ser la mejor opción. –

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

Por supuesto, esto sigue siendo experimental.

Fuente

2010-12-28 05:00:28

¡Parece muy interesante! Lo echaré un vistazo esta noche, gracias Matthew. – Hakan

Puede probar el comando montage de imagemagick para crear una sola imagen.

Fuente

2010-12-28 05:07:27

Gracias. Lo investigaré. – Hakan

Esto se hace utilizando lo que se llama un sprite de CSS; una sola imagen con todas las otras imágenes dentro de ella, con la parte particular que se quiere en el html seleccionado por css.

ver uno tutorial en http://css-tricks.com/css-sprites

Fuente

2010-12-28 05:13:40 ysth

Lamentablemente, los Sprites no son una opción en este caso, ya que las imágenes se pueden cambiar de tamaño. Gracias de cualquier manera. – Hakan

@Hakan, Err, ¿qué quieres decir con "resizeble"? – ysth

Mediante la secuencia de comandos de Java, el visitante puede cambiar el ancho de todas las imágenes, para controlar cuántas imágenes por fila mostrar ... – Hakan

¿Reduce las solicitudes HTTP de 1000 imágenes?

Respuesta

Cuestiones relacionadas