Comment optimiser/simuler le chargement «aléatoire» de fichiers d'image volumineux?

Question

Nous utilisons de grandes images d'arrière-plan (photos haute résolution, jusqu'à 700 Ko) pour la conception de nos pages. Cela fait partie de l'expérience du site que lorsque vous naviguez, vous voyez des images différentes.

Au moment un autre (aléatoire) image est chargée sur chaque demande de page, d'un pool de 15 images ~, ce qui pourrait se développer au fil du temps.

Je suis à la recherche d'une façon saine pour optimiser ceci:

1. Pour éviter que l'utilisateur ait à télécharger un gros fichier image sur toutes page vue
2. Pour réduire la charge sur le serveur (est ce problème, le serveur va garder les images en mémoire)

les idées que je l'ai à ce jour comprennent:

• Une minuterie qui charge une autre image à intervalles réguliers
• chargement progressivement d'autres images en arrière-plan avec ajax
• associant des images à contenu spécifique (pages, tags)

La question est, comment garder il se sent un peu aléatoire, tout en minimisant les temps de chargement de la page et le hit du serveur?

Answer 1

J'évite généralement des sites avec des images énormes, je suis très impatient. Je repenserais votre conception.

Answer 2

En tant que première étape, vous devez vous assurer que les images peuvent être correctement mises en cache:

• utilisation urls sain d'esprit
• (ETC pas id de session) mis en-têtes appropriés http ETag

Answer 3

Premièrement, entendre que les images de fond sont 700kb m'étonne. En plus de l'écran de contenu sur ... c'est un site assez lourd.

Pour commencer, je voudrais essayer d'utiliser des outils de compression d'image. Deux outils viennent à l'esprit Imagemagick et PNGCrush. PNGCrush est excellent pour réduire toutes les métadonnées externes attachées aux photos, sans compromettre la qualité de la photo. Je recommande cela uniquement car la compression des images vous aidera à permettre à l'utilisateur de télécharger une plus petite quantité de contenu, ce qui signifie des temps de chargement plus courts, ce qui au bout du compte ... est ce que les utilisateurs veulent .

Je voudrais également mettre en cache les images, de sorte que lorsqu'une re-utilisateur visite le site, l'image est déjà mis en cache sur leur extrémité. Cela minimise les demandes HTTP qui sont effectuées chaque fois qu'un utilisateur visite votre site. www.reactive.com est un exemple d'utilisation de cette technique sur un site commercial. Si vous regardez le fichier /js/headerImages.js, ils utilisent la mise en cache d'image. Curieusement, vous trouverez le même code src à: http://javascript.internet.com/miscellaneous/random-image.html

Considérant que vous avez mentionné que les images sont chargées aléatoirement, je suppose que vous utilisez une bibliothèque Javascript comme jQuery pour créer l'effet. Si tel est le cas, vous pouvez réduire les temps de chargement de la page en utilisant un CDN plutôt que de faire référence à une copie locale de la bibliothèque jQuery stockée sur votre serveur. J'ai effectué des tests de performance sur un site que j'ai réalisé pour un client, et sur une moyenne de 20 résultats, j'ai économisé 1,6 seconde grâce à cette technique!

Hope qui aide pour l'instant :)