Répétition image de fond du site - taille vs vitesse

Question

Je me demandais si quelqu'un a fait des tests avec des images d'arrière-plan. Nous créons normalement un arrière-plan qui se répète au moins dans une direction (x ou y, ou les deux).

Exemple Disons que nous avons un fond dégradé qui se répète dans la direction X. hauteur gradient est 400px. Nous avons plusieurs possibilités. On peut créer autant que possible la petite image (1 largeur de pixel et 400 pixels de hauteur), ou on peut créer un agrandissement de 400 pixels de hauteur.

Observation Puisque gradient est de 400 pixels de haut, nous ne serons probablement pas choisir le format GIF, car il ne peut stocker 256 couleurs adaptées. Peut-être que enaough si notre gradient est subtil, car il n'a pas que beaucoup, mais sinon, nous allons probablement plutôt l'image du magasin comme une image PNG 24 bits pour conserver les détails de gradient complet.

Dilemme Faut-il créer une image de 1 × 400 taille px qui sera répétée n fois horizontalement ou devrions-nous créer une image de 100 × 400 taille px pour accélérer le rendu dans le navigateur et un fichier image la taille.

. Taille de l'image par rapport à la vitesse de rendu? Qui gagne? Tout le monde prend soin de tester cela? En ce qui concerne la vitesse de rendu du navigateur et la petite image possible redessiner vacillante ...

Answer 1

La vitesse de rendu est le goulot d'étranglement ici, car plus gros carreaux peuvent être mis dans le cache du navigateur.

Je l'ai essayé en fait cela pour les principaux navigateurs, et au moins certains d'entre eux rendais sensiblement lent sur les carreaux très petites.

Donc, si l'augmentation de la taille du bitmap ne donne pas lieu à ridiculement grandes tailles de fichiers, je reviendrai à coup sûr avec cela. Testez vous-même et de voir. (Rappelez-vous d'inclure IE6, comme encore beaucoup de gens sont coincés avec elle).

Vous pourriez être en mesure de trouver un bon équilibre entre la taille du bitmap et la taille du fichier, mais en général je vais essayer 50x400, 100x400, 200x400 et même 400x400 pixels.

Answer 2

J'ai découvert qu'il peut y avoir une énorme différence dans les performances de rendu du navigateur, si vous avez une image d'arrière-plan avec une largeur de 1px et de le répéter. Il est préférable d'avoir un background-image avec des dimensions légèrement plus grandes. Ainsi, une image avec une largeur de 100px effectue beaucoup mieux dans le navigateur. Cela vient surtout en jeu lorsque vous utilisez un background-image répétée dans une couche draggable sur votre site. Le glisser-performance est assez mauvais avec un souvent répété background-image.

Answer 3

Je voudrais souligner que le coût de l'envoi vers le bas un peu de lignes supplémentaires (1-2 exemple seulement ici) .8k - 1,6 kb (si vous pouvez vous en sortir avec 8 bits) plus comme 2,4 kb - pour 24bit 4,0 kb

2 colonnes de pixels plus: les itérations nécessaires requises pour blit l'arrière-plan est réduit à un tiers pour un maximum de 1,6 kb (8 bits) ou 4kb (24 bits)

même une colonne supplémentaire de moitié le blitting requis à la moitié de la largeur de l'élément.

Si le fond est fait en moins d'une seconde pour un modem 56,6 Je pense qu'il est assez maigre.

Answer 4

Si petites dimensions d'une image ont un impact négatif sur le rendu, je suis sûr que tout navigateur décent serait blit l'image interne à quelques reprises avant de carreler.

Cela dit, je tendance à ne pas utiliser 1 dimensions de l'image de pixels, afin que je puisse voir clairement l'image, sans le redimensionner. la compression PNG est assez bon pour gérer cela à un coût très peu à la taille du fichier, dans la plupart des situations.

Answer 5

Je mettrais de l'argent sur le goulot d'étranglement étant le téléchargement d'image plutôt que le moteur de rendu faisant le carrelage, alors allez pour l'option large 1 pixel.

En outre le seul redondant PNG est 24 bits puisque vous êtes toujours obtenir 8 bits par canal (rouge, vert et bleu).

Answer 6

Je préfère généralement aller entre les deux, 1pixel large fera probablement dégradé sembler un peu incertain, mais vous pouvez faire quelque chose comme la largeur de 5pixel qui donne assez de place à la pente pour maintenir la cohérence et la clarté sur la page .. mais je suggérez vous pouvez ajouter des motifs et des images à une seule image et utiliser ensuite le positionnement de fond ( sprites css ) pour les positionner parce que télécharger une seule image de 50kb de dire prendrait moins de temps comapared 5 40kb images depuis le navigateur fait moins de demandes au serveur ...

Answer 7

Je n'ai pas benchmarkée cela, mais je parie que sur la plupart des ordinateurs modernes, le rendu ne sera pas un problème alors que vous voulez toujours faire des économies sur le temps de téléchargement d'image. Je vais souvent pour le type 1px de graphiques.