Sprite / graphiques lourds sites PNG, oh mon dieu!

Question

Je dois créer un site qui est très graphiques-lourds (déchirés arrière-plans en papier avec des ombres transparentes sur les graphiques de texture, etc.) Une façon que je pensais à économiser sur la taille du fichier était de laisser tomber tous mes éléments de fond dans un PNG . Le problème est que ce fichier est maintenant 180k. Si je le casse en différents GIFs et un couple PNGs alors il serait plus proche de 70k.

Est-il vraiment? Ce qui est « trop grand » ces jours-ci pour la taille du fichier? Est-ce que quelqu'un remarque si le fichier est de 180 ou 70k?

Answer 1

Si vos utilisateurs ont un accès rapide à votre site (comme, dans un intranet), 180k est à peine un problème. Si, d'autre part, le site est utilisé par la personne âgée générique avec une connexion lente avec humour, il va probablement être un problème. Si vos utilisateurs utilisent GPRS, mais ont une patience infinie, il ne va probablement pas être un problème. Si le site donne un million de dollars à celui qui a la patience d'attendre le temps de chargement, les vitesses de transfert ne sont pas un problème. Et ainsi de suite.

Ce que je veux dire, cela dépend vraiment de vos besoins et contraintes. Cela vous oblige à connaître (et par la suite nous dire, pour nous d'être plus utile) beaucoup de choses avant de pouvoir l'obtenir près à droite.

Pour éviter ces satanés downvotes pour très-valides-réponses mais-simplement-s'il vous plaît-Indifférent Fume quelqu'un, voici ma réponse:

180k divisée par un taux standard de transfert de modem ADSL = 180KB / 100 Ko / s = 1,8 s = supportable.

Answer 2

Y at-il une raison pas pour utiliser les images plus petites? On dirait que vous l'avez déjà rompu, alors pourquoi ne pas aller avec le plus petit, méthode plus rapide?

D'un point de vue purement relativiste, 70k ne prendra que 38% du temps de téléchargement qui 180k serait (environ). Si vous vous attendez à un trafic élevé ou si vous voulez des temps de chargement rapide, chaque bit aide.

Answer 3

Vous devez comparer le temps qu'il faut pour demander toutes les images séparées et le temps qu'il faut pour télécharger une grande. Le problème est dû à des requêtes HTTP.

Je vous suggère de faire quelques tests avec l'extension Firefox de Google, Pagespeed pour voir s'il y a une énorme différence entre les grandes ou les .png séparés.

L'un des avantages que je peux penser, en plus de moins de requêtes HTTP est que votre site se charge à la fois au lieu de peu à peu que tous les graphiques sont téléchargés. L'essentiel cependant, comme Henrik dit que cela dépend de vos besoins.

Answer 4

Je suis sûr que vous êtes au courant que le partage en plusieurs images signifie des connexions supplémentaires au serveur pour les récupérer, avec un décalage associé à chacun, et la taille supplémentaire des en-têtes de requête et de réponse.

Étant donné que les navigateurs limitent le nombre de connexions actives à chaque serveur (version du navigateur à charge) cela peut finir par prendre plus de temps que la récupération d'une seule image. La solution habituelle de lever la limite est d'utiliser un serveur distinct « images », ou un alias DNS qui le même hôte.

Et si vous avez besoin d'animation, je vous recommande de toujours PNG sur GIF.

Answer 5

Assurez-vous que le site semble bien les images sont désactivées d'abord (selon les balises alt, largeur et la hauteur, les couleurs correctes définir utilisées), puis diviser les images basées en groupes. Groupe tous vos boutons en une seule image si possible (en utilisant des feuilles de sprites css), et toutes les frontières dans un autre. Gardez grandes images dans des fichiers séparés (donc arrière-plan du site, en-têtes).

Plus d'images que vous avez, plus le navigateur peut paralléliser les demandes. Cependant, si vous les séparer trop, différentes images se chargeront à des moments différents, ce qui rend les parties du pop site dans Il est un peu un compromis, mais c'est la joie de la programmation:.)

Plus votre site a l'air avant que les images sont visibles, moins l'utilisateur l'esprit la vitesse de téléchargement des images.