Création De petits graphiques de chargement rapide des pages Web

Précédent ◈ Suivant

Création De petits graphiques de chargement rapide des pages Web

Création De petits graphiques de chargement rapide
pour les pages Web

introduction
Utilisation des GIF, JPEG et PNG
Façons de réduire la taille du fichier
Comment accélérer le chargement
Contrôle de qualité
Quelques recommandations opiniâtres
Formulaire de suggestion

Ce guide vous dira souvent ce qu'il faut faire, mais pas comment le faire. Le « comment » est une fonction du logiciel spécifique que vous utilisez, et nous ne pouvons pas essayer de couvrir tout ici. Apprenez à utiliser votre logiciel, et vous pouvez toujours demander de l'aide dans la publication sur le forum Web si vous êtes membre Delphi.

GIF et PNG
  • le texte et le texte
  • les dessins animés
  • art de l'affiche
  • des dessins au trait
  • animations
  • tout art qui a besoin de milieux transparents
JPEG
  • photographies en couleur
  • photographies en noir et blanc, à moins que le contraste très élevé
  • rendus 3D à partir du logiciel de traçage VRML ou ray
  • art avec de nombreux mélanges et gradients

Façons de réduire la taille du fichier. La première étape dans la réduction de la taille du fichier est d'utiliser le format correct, comme expliqué ci-dessus. Il y a un certain nombre d'autres choses que vous pouvez faire.

  • Si vous utilisez GIF ou PNG, votre maquette finale ne devrait pas avoir une résolution supérieure à 72 points (pixels) par pouce. Travailler dans une résolution plus élevée si vous préférez tout en créant des œuvres d'art, mais l'art final devrait être enregistré à 72 dpi. La plupart des écrans d'ordinateur montrent que 72 dpi ou 96 dpi, et des résolutions plus élevées agrandir les fichiers sans affecter la qualité visible à l'écran.
  • les fichiers GIF et PNG peuvent souvent être réduites en taille en sélectionnant moins de 256 couleurs standard (appelés dans certains logiciels comme 8 bits). Si vous n'utilisez pas que beaucoup de couleurs différentes, passer à un nombre plus faible. Certains logiciels vous permet de saisir le nombre de couleurs. D'autres logiciels vous demande de sélectionner le nombre de bits à utiliser dans le codage des couleurs. Voici combien de couleurs peuvent être utilisées avec un codage sur 8 bits vers le bas:

    Il y a beaucoup plus de couleurs que les 256 couleurs que l'ordinateur de base typique peut afficher, bien sûr. Pour représenter d'autres couleurs, le tramage est utilisé pour combiner les points des couleurs disponibles proches pour imiter la couleur désirée. Tramage, vu de près, peut être peu attrayante. Cette situation est aggravée par le fait que les différents navigateurs et différentes plates-formes utilisent différentes palettes de couleurs. Les concepteurs de pages Web peuvent éviter cela en sélectionnant des couleurs à partir d'une palette de fureteurs de 216 couleurs. Des logiciels comme Photoshop et Paint Shop Pro vous permettra de mettre en place la palette du navigateur de sécurité et de travailler uniquement avec les couleurs. Vous pouvez en savoir plus sur tramage, navigateur couleurs de sécurité, et une technique appelée anti-aliasing pour éviter les bords déchiquetés.

  • JPEGs utilisent une forme de codage qui est appelé lossy. Un fichier JPEG peut facilement être enregistré avec moins de détails et de maintenir encore que vous tous l'attrait et l'information nécessaire, tout en réduisant la taille du fichier. Lorsque vous convertissez un fichier à partir d'un autre format et d'abord l'enregistrer au format JPEG, sélectionnez « faible qualité » ou un faible pourcentage pour vos économies et de voir à quoi il ressemble sur un écran d'ordinateur. Dans la plupart des cas, vous ne serez pas en mesure de voir la différence.

    Comment accélérer le chargement. Il y a plusieurs choses que vous pouvez faire pour écran un chargement plus rapide - ou du moins semblent plus rapides.

    • Utilisez toujours des paramètres hauteur et largeur dans vos balises IMG pour indiquer au navigateur la taille exacte en pixels de l'image. Vous pouvez dire à la taille de votre logiciel graphique. Le navigateur ne peut pas charger du texte à l'écran jusqu'à ce qu'il ait compris la taille exacte des graphiques afin qu'il puisse mettre le texte à l'écran. Si vous ne spécifiez pas la taille, il faut télécharger les graphiques avant de pouvoir disposer de l'écran, et qui laisse un long retard avec rien qui apparaît à l'écran. Mais si vous spécifiez les dimensions des graphiques, il calcule la mise en page immédiatement et charge le texte avant que les graphiques. Même avec de grands graphiques de chargement lent, texte lisible aidera à maintenir le public qui autrement si rien laisser visible qui se passait. Assurez-vous de le faire pour tous les graphiques, même les plus petits, comme des balles.
  • Essayez de garder la taille totale de la page en 30K, si possible. Essayez de garder les graphiques individuels sous 10K. Vous ne serez pas toujours en mesure d'atteindre ces objectifs, mais il vaut la peine. Si vous avez une grande, belle image que vous ne pouvez absolument pas réduire la taille, ne le mettez pas sur une page principale. Créer une petite icône de ce que les gens peuvent cliquer sur un lien vers l'image plus grande principale, et les mettre en garde la façon dont il est grand.
  • Une autre technique que vous pouvez utiliser pour réduire au minimum les temps de chargement est d'utiliser le cache du navigateur. Graphiques et autres fichiers sont stockés pendant une période de temps par les navigateurs dans un cache sur le disque dur du navigateur. Lorsque le même fichier est appelé à nouveau, il se chargera immédiatement de cache, le cas échéant, au lieu de transférer sur les filets. Pour profiter de cela, jamais mis graphiques identiques dans plus d'un dossier (répertoire) sur votre serveur. Si vous réutilisez les mêmes boutons ou les icônes ou les séparateurs à plusieurs reprises, appelez toujours au même endroit.

    Quelques recommandations opiniâtres.

  • Réduire au minimum l'utilisation de boucle sans fin défilement graphiques et texte animé sur un écran. Ils sont getters attention au début, mais ils deviennent rapidement irritants à la place. Limitez vos animations à un certain nombre de répétitions, pas une boucle sans fin.
    • Précédent ◈ Suivant