Manejo de páginas web pesadas con imágenes

Question

Tengo una lista de programas de TV que tiene aproximadamente 200 espectáculos. Cada uno de estos espectáculos tiene una pequeña imagen, 40x60 píxeles y 3 kB, y todos aparecen en la misma página al mismo tiempo.

Ahora estoy empezando a pensar que quizás no sea una gran idea tener unas 200 solicitudes al servidor cada vez que se ve la página.

¿Cuál es la mejor manera de resolver cosas como esta sin tener que desviarse del diseño gráfico de la página? ¿Debería usar algún tipo de "carga lenta" usando JavaScript? ¿Debo pegar todo esto en una imagen grande y usar un montón de CSS pirateado para que sea solo una solicitud?

Answer 1

que cree que puede tener algunas opciones

• Paginate
• carga perezosa a través de JavaScript
• sprites CSS
• y/o un CDN

paginación es muy común y Creo que funciona bien con los usuarios. La carga lenta funciona para todos los usuarios de JavaScript (casi todos).

Se puede lograr el efecto de spriting agarrando 20 a la vez, por ejemplo, y haciendo una imagen grande. Yo diría que use 20 a la vez para que el usuario no tenga que esperar a que se descargue una imagen súper grande antes de que pueda ver ninguna.

Puede usar PHP y GD para tomar cada imagen en grupos de 20, unirlas, registrar sus desplazamientos y luego imprimirlas en su hoja de estilo.

Su CDN debe configurarse para que no se envíen cookies (diferentes dominios o subdominios si su sitio usa www). También puede configurar este servidor para optimizarlo y entregar contenido estático.

Wrikken also makes a good point sobre el envío de encabezados de expiración lejanos (¡vótelo!). No olvides agregar algún tipo de control de versiones en caso de que necesites actualizar las imágenes, y quieres conservar el mismo nombre de archivo.

Answer 2

Su mejor opción sería abrir su lista.

Si tiene que tener todos los elementos en una página, el uso de sprites lo reducirá a una imagen, y es una forma perfectamente válida de hacerlo (es decir, no es realmente un truco).

Answer 3

Para statics, recomendaría algo como nginx en un subdominio static.example.com, un servidor web muy liviano, que puede servir las imágenes con menos sobrecarga y más servidores web 'tradicionales'. Y establecer expire correctamente & encabezados de caché, por supuesto, alguien que visite su sitio debe tener todas sus imágenes en la memoria caché por un tiempo razonablemente largo.

Answer 4

Hay una opción más: URI de datos en su CSS. Básicamente, tu base64 codifica las imágenes y las pega directamente en el archivo css. Una solicitud sirve para el CSS y todas las imágenes, y todo se puede codificar para ahorrar aún más.

¿El inconveniente? IE 5-7 no maneja datos-uri de forma nativa (IE 8+ es compatible con esto). Puede solucionarlo teniendo dos versiones de la hoja de estilo (una con imágenes incrustadas, una sin) y haga que apache elija cuál ofrecer. Alternativamente, puede usar una solución de javascript que agrega soporte de datos-uri a los IEs más antiguos.

http://www.websiteoptimization.com/speed/tweak/inline-images/

Para la multitud Carriles, hay una gema llamada Jammit que hace esto automáticamente. Genera los datos-uri y las versiones regulares, así como los equivalentes comprimidos de cada uno.

Answer 5

le recomiendo usar divs 200 con cada uno de sus background-imágenes cargadas desde un archivo de imagen eso es una tira de todas las imágenes unidas entre sí, al estilo CSS sprites

Answer 6

crearía sprite de imagen y utilizar CSS para mostrar imágenes en divs como este scroll -10px 30px. Este es un simple generador de sprites y CSS basado en web http://spritegen.website-performance.org/

Answer 7

Usa sprites CSS. El tamaño total de la imagen para todas sus imágenes por el sonido es de alrededor de 600 kb, que probablemente sea demasiado grande para cargarlo de una vez, por lo que puede separar las imágenes en varios sprites, cada uno ~ 100k. A continuación, puede priorizar su orden de carga en función de lo que se está viendo.