Sprites vs Lancement de l'image

L'avantage principal des sprites est que le navigateur doit demander moins d'images du serveur Web. Cela réduit le nombre de demandes HTTP et permet de compresser plus efficacement les parties de la conception. Ces deux points représentent également les inconvénients des images tranchées.

Ici, vous pouvez voir de bons exemples comment les sprites améliorent la vitesse de chargement des pages Web:

http://css-tricks.com/css-sprion/

L'inconvénient principal des sprites est qu'il est difficile de lire / gérer / modifier votre CSS. Il peut être difficile de rappeler les compensations exactes de pixels dans le sprite.

Avantages:

• C'est beaucoup plus facile sur le serveur de servir une image unique que beaucoup de petites.
• Il est (légèrement) plus rapide pour un navigateur Web pour charger une telle image.
• Les navigateurs ne font que charger des images comme elles en ont besoin - si vous utilisez plusieurs images dans un roulement, le navigateur «pause» la première fois que vous retournez sur l'élément. Cela peut être résolu en utilisant des sprites, car il n'y a qu'une seule image à charger.

  contre:

  • C'est une sorte de douleur à coder (plus que d'utiliser plusieurs images au moins)

Sprites

Avantages:

• Moins de connexions HTTP au serveur
• Chargement plus rapide sur le haut débit

  contre:

  • Pas d'encapsulation: Si vous voulez changer une image, vous devez changer le Sprite
  • Il est difficile de configurer des images individuelles dans CSS sans outil
  • Ne vous dégradez pas: si le navigateur ne prend pas en charge CSS, vous êtes en difficulté

Avantages à l'aide de sprites: Comme il utilise 1 images pour tous, il nécessite moins de charge sur le serveur HTTP.

contre: - Difficile à coder. Vous devez connaître la coordonnée de chaque image à l'intérieur des sprites afin que vous puissiez l'afficher correctement. Une fois que vous avez changé la taille de l'image, vous devez ajuster tout ... - Les grosses images pourraient créer une longue page attendu à afficher. Lors de l'utilisation d'images, l'utilisateur avec une connexion Internet lente peut en voir un par un.

meilleures pratiques. Utilisez-le, par exemple, rouler sur des images.

Recherchez à l'aide d'un générateur de sprite CSS (nous utilisons SmartSprites ). De cette façon, vous pouvez faire des tranches localement et que votre processus de construction génère un spritemap. C'est le meilleur des deux mondes.

aussi est que SmartSprion n'est pas pour vous, il y a définitivement d'autres, mais je l'aime parce qu'il réduit la quantité de travail à l'avant et pendant les changements.

contre - plus lent sur les navigateurs plus anciens / peut ne pas travailler sur eux avec effet de survol (Opera6) - Si non utilisé correctement, peut devenir très / trop énorme (les grouper de manière adéquate!) - travail fastidieux pour les mettre en place

Avantages - Moins d'octets transférés, car une grosse image est plus petite, alors toutes les images individuelles combinées (une table d'en-tête / couleur) - Moins de demandes HTTP

sprites CSS:

Avantages:

• dégradation gracieuse dans des navigateurs non supposés (le texte peut être affiché lorsque des images d'arrière-plan pour les liens ne sont pas autorisées)
• Moins de requêtes HTTP
• Chaque image a une tenue de couleur séparée comme une table de couleur, de sorte que la tranchée d'image aura plus de frais généraux que les sprites CSS

  contre:

  • pose un problème si les images sont éteintes dans les navigateurs (cas rare)

    Tranchement d'image:

    Avantages:

    • L'utilisateur perçoit une charge plus rapide depuis la pièce chargée par pièce.
    • charge sur demande comme lorsque l'utilisateur place sa souris sur l'image

      contre:

      • Les pages Web pourraient avoir une grande taille sur le côté du client, même pensait que cela pourrait ne pas être le cas du côté serveur.

Je préfère aller au centre de regroupement d'images similaires (Normal, Hover, page sélectionnée, page parent de la page sélectionnée) que toutes les images d'un fichier. Pour les faire, vous découpez l'image comme Normal dans Photoshop ou Illustrator, ouvrez les fichiers et combinez-les avec une touche de raccourci. J'ai écrit le script photoshop qui Combine des images dans les sprites CSS . Vous aurez plusieurs connexions HTTP, mais n'aurez pas le délai de chargement sur la survolte.

Un inconvénient souvent sur l'utilisation des sprites CSS est une empreinte mémoire:

https://web.archive.org/web/20130605000516/20130605000516/20130605000516/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-a-sprite/

sauf si l'image Sprite est soigneusement construite, vous vous retrouvez avec quantités incroyables d'espace gaspillé. Mon exemple préféré est de whit Site Web de TV, où Cette image < / a> est utilisé comme sprite. Noter que Ceci est un PNG de 1299 × 15 000 PNG. Il se compresse assez bien - le réel La taille de téléchargement est d'environ 26k - mais les navigateurs ne rendent pas comprimé Données d'image. Lorsque cette image est téléchargée et décompressée, elle sera Utilisez près de 75 Mo en mémoire (1299 * 15000 * 4).

Lorsque des sprites sont chargés dans le navigateur, ils sont stockés non compressés. Un fichier de 26 Ko peut être décompressé pour prendre une hausse de 75 Mo de RAM. Vous devriez être conscient de l'utilisation de sprites avec de très grandes dimensions.

Il y a aussi la question de ce qui se passe dans les navigateurs avec un soutien au CSS pauvre (navigateurs hérités). Les sprites peuvent se retrouver totalement cassés.