Sprite (infographie). Comment utiliser les sprites CSS

Dans l'article d'aujourd'hui, je veux parler un peu des sprites CSS et donner quelques liens où vous pouvez créer ces mêmes sprites. La technique d'utilisation des sprites n'est pas du tout nouvelle et est utilisée depuis longtemps, mais la complexité de leur création fait fuir les webmasters. Essayons de les aider...

Que sont les sprites CSS ?

Imaginez une grande image montrant toutes vos icônes, séparateurs, boutons, flèches et autres composants de conception. Il est chargé avec le site, tout est comme d'habitude. Mais il ne crée pas un tas de demandes pour tous les fichiers, mais est exécuté avec une seule demande. Cool? Indubitablement. Après le chargement, la partie souhaitée de la grande image s'affiche au bon endroit.

J'ai vu des statistiques quelque part (je ne me souviens plus où, donc je ne donnerai pas de lien) - de 5 à 40% du temps ce sont en fait des pages, tout le reste est le traitement des requêtes par le serveur. Il est logique de supposer que si le nombre de requêtes diminue, la vitesse de téléchargement augmentera proportionnellement.

Examinons de plus près les avantages et les inconvénients de l'utilisation de sprites :

avantages en utilisant des sprites :

Inconvénients ce sont des technologies :

• lors de la mise en page, il est nécessaire d'indiquer non seulement l'image, mais également la position du fragment, ce qui n'est pas très pratique et habituel.
• augmentation de la charge sur le serveur. Une image plus grande prend plus mémoire vive compte tenu du "factice" entre les fragments.
• pour changer une icône, il faut bricoler tout le fichier, ce qui n'est pas très pratique. Même si c'est peut-être pour le mieux

Nous choisissons lequel est le plus important pour qui - la simplicité ou la rapidité et passons à autre chose. Si rien ne peut être fait concernant la charge sur le serveur, il existe des outils pour résoudre les problèmes de mise en page et de changement de sprites.

Générateurs de sprites — services en ligne, qui, en principe, fonctionnent selon le même schéma. Vous téléchargez votre ensemble d'images, sélectionnez le format de sprite et le système crée l'image et le balisage CSS pour ce fichier.

Où créer des sprites ?

Probablement le plus instrument ancien pour créer des sprites CSS. Caractéristique distinctive- il existe une version russe de l'interface, c'est pratique. Bien personnalisable, et pas seulement la création de l'image, mais aussi le code CSS. Globalement, un excellent générateur, je le recommande. Soit dit en passant, en plus de cela, le service peut générer des favicons et calculer les droits d'accès pour les systèmes Unix.

Générateur de Sprites CSS

Ce générateur n'est pas mal non plus, il a tous les réglages nécessaires, génère un fichier en sortie qui est légèrement plus petit que le service précédent. Caractéristique distinctive- sortie pratique du code CSS pour chaque image.

Un générateur suffisamment fonctionnel qui vous permet non seulement de créer un sprite ordinaire, il vous permet également de déplacer des images de manière indépendante, en les plaçant de la manière la plus compacte possible. De plus, il peut produire du code CSS compressé, ainsi que du code SASS.

Toupet est un métalangage basé sur CSS conçu pour augmenter le niveau d'abstraction du code CSS et simplifier les fichiers de feuilles de style en cascade.

Ce service diffère des autres présentés en ce qu'il ne crée pas d'image de sprite. Vous pouvez le créer vous-même dans Photoshop ou ailleurs, téléchargez-le ici et le service vous aidera avec le code CSS. Interface suffisamment intuitive et conviviale. Je recommande pour ceux qui aiment tout faire par eux-mêmes, ne faisant pas confiance à la voiture

Pas un mauvais générateur, tout ce dont vous avez besoin pour créer est présent. Le seul inconvénient est que chaque image devra être téléchargée séparément, vous ne pouvez pas la télécharger en groupe. Le reste n'a rien de remarquable, une forte moyenne.

Le service est écrit en HTML5, ne fonctionne que sous Chrome et Firefox, mais le développement de tels services est encourageant. Le web ne s'arrête pas et c'est bien.Paramètres très simples et minimes. Mais, si vous voulez une solution rapide et facile, ce générateur fera 100%

Générateur de sprite pour de vrais Jedi Installez le programme, spécifiez le chemin du fichier CSS avec l'ancienne mise en page et ce service fera tout pour vous. Il a beaucoup de possibilités - je recommande de lire la documentation sur le site officiel.

Presque un analogue complet de Spritebox, il est également utilisé uniquement pour obtenir le code CSS, à la différence qu'ici la sélection de la bordure de l'élément ne se fait pas manuellement, mais automatiquement, la précision du traitement est bien supérieure. Fonctionne uniquement dans Chrome et Firefox

Un excellent service qui fonctionne comme ça - allez à la page ready-made, comme d'habitude. Cliquez sur l'icône du service (vous devez d'abord l'installer avec un bookmarklet) et c'est tout - le service collecte toutes les images de cette page et génère un sprite avec un code. C'est très pratique, il y a des paramètres qui doivent spécifiquement être rassemblés dans un tas. Dans l'ensemble, un bon service.

Un générateur très simple mais intuitif et pratique. Faites glisser les images que vous souhaitez combiner, organisez-les comme vous le souhaitez et appuyez sur le bouton - le sprite et le code sont prêts. L'inconvénient de ce service est qu'il ne fonctionne que dans Chrome et Ognelis.

Le service est très similaire au SpriteMe décrit ci-dessus, à la différence qu'ici vous devez charger toutes les images et le fichier CSS qui doit être modifié à la main. Réglages minimum, mais il fait bien son travail.

J'espère que maintenant vous n'avez plus peur de travailler avec des sprites CSS et que vos projets seront encore plus rapides.

Bonjour, aujourd'hui, je veux vous dire comment créer un sprite css d'icônes pour votre site. Oui, dans d'autres domaines, non seulement les icônes, mais également tout autre élément, par exemple les boutons, les menus, etc. Au moins les graphiques de la page de destination entière.

L'article doit aller dans le titre, car l'utilisation de sprites accélère le chargement de la page, du fait qu'une image, même plus grande, se charge plus rapidement que plusieurs plus petites. C'est parce que moins d'appels de serveur sont générés.

Pour ceux qui ne sont pas dans le sujet, le sprite ressemble à ceci :

C'est-à-dire que, par rapport au Web, il s'agit d'une image avec de nombreux éléments, chacun étant affiché au bon endroit sur le site en raison du positionnement.

Mais la question de savoir à quel point la page se charge plus rapidement ou plus lentement avec l'utilisation de sprites, je l'aborderai dans le prochain article, et elle tombera certainement dans le bon titre. Alors abonnez-vous Twitter, pour ne pas rater l'annonce de l'article.

Et dans cet article, je vais essayer de vous montrer le fonctionnement interne de l'utilisation des sprites sur le Web, en utilisant les icônes de mon blog comme exemple.

J'ai donc créé un simple sprite d'icône dans Photoshop. Je ne me suis pas trop embêté, mais j'ai fait quelques-uns de chacun des types, afin de montrer non seulement comment utiliser un sprite, mais aussi comment vous pouvez utiliser des sprites pour créer une pseudo-animation.

Création d'un sprite css - balisage html

Maintenant, nous devons esquisser le balisage html. Rien d'inhabituel. Liste non ordonnée:

Au lieu de "#" - entrez les adresses de vos comptes. Ajouter un titre aux liens. Et passons à l'ajout de styles !

Création d'un sprite css - balisage css

Styliser le conteneur :

Socseti (
largeur : 270px ;
hauteur : 150px ;
marge : 200 px automatique ;
arrière-plan : url (../ images / bg-soc.png) sans répétition ;
rembourrage : 15px ;
}

Décrire les styles de texte et une liste non ordonnée qui flotte vers la gauche (procédure standard pour les menus et éléments similaires)

Socseti ul (
débordement caché;
largeur : 246 pixels ;
marge : 20px automatique ;
}

Socseti ul li (
flotteur : gauche ;
marge gauche : 2px ;
}

Socseti ul li : dernier enfant (
marge à droite : 2px
}

Maintenant, le plaisir commence. Définissons des styles généraux pour les liens :

Socseti ul li a (
bloc de visualisation;
largeur : 59px ;
hauteur : 59px ;
}

Comme vous pouvez le voir, j'ai fait une petite erreur lors de la création du sprite et je me suis donc retrouvé avec une taille idiote de 59 × 59 px - mais cela n'a pas affecté la perception visuelle. Nous allons continuer ...
Définissons une image d'arrière-plan pour le premier lien.

une. tvitter (

transition : .3s ;
}
une. tvitter : survoler (

transition : .3s ;
}

Pour que l'élément requis du sprite soit affiché, il doit être positionné. Pour ce faire, une fois l'arrière-plan du lien défini, vous devez définir les coordonnées.

Par exemple, vous avez peut-être remarqué que sur le sprite, le premier élément est l'icône réseau social"Vkontakte", et la première icône dans le menu social. icônes - "Twitter". C'est-à-dire que si mes icônes font 59px de large, je dois déplacer l'arrière-plan de -59px. De plus, je veux que la couleur passe du gris au coloré. Pour ce faire, je dois réduire l'arrière-plan de 59px. Ce qui est montré ici :

une. tvitter (
arrière-plan : url (../images/css-sprite-iconok2.png) -59px -59px no-repeat ;
transition : .3s ;
}

Pour que les styles de classe changent au survol, la pseudo-classe de survol doit être définie. C'est ce que je fais ici :

une. tvitter : survoler (
arrière-plan : url (../images/css-sprite-iconok2.png) -59px 0 sans répétition ;
transition : .3s ;
}

Et pour que l'image change de position, j'ai changé les coordonnées d'affichage.

La propriété de transition est utilisée pour définir le taux de changement de position. J'ai mis 0,3 seconde.

De la même manière, il est nécessaire de définir la position du reste des éléments du sprite, en le déplaçant de 118 px pour afficher l'icône RSS -, et de la remettre à 0 px pour afficher l'icône VK.

J'espère que l'article vous a été utile, et maintenant vous allez utiliser des sprites CSS pour vos sites. Demain, j'essaierai d'analyser la vitesse de chargement du site lors de l'utilisation de cette technologie.

Tout d'abord, une brève introduction. Lors du chargement d'une page, les navigateurs ne sont autorisés que 2 requêtes au serveur (par navigateurs modernes ce nombre est passé à 6). Chaque élément du site, que ce soit un fichier avec une feuille de style, des fichiers javascript, des images sont des téléchargements indépendants qui nécessitent une requête distincte au serveur.

Il peut y avoir de nombreuses mini-photos sur le site. Par exemple, des émoticônes, des flèches, toutes sortes de petits éléments de conception. Chacune de ces images pèse négligeable, mais en raison du grand nombre de demandes, des problèmes de vitesse de chargement du site sont créés.

Il y a longtemps (2003-2004) une solution à cette situation a été proposée dans le but principal d'accélérer le chargement du site en réduisant le nombre de requêtes au serveur. Cette technologie est appelée "Sprites".

Que sont les sprites CSS

Sprite CSS- technologie de combinaison de petites images en une seule. À l'aide de décalages via CSS, la partie souhaitée de l'image est découpée

Par exemple, au lieu de 10 images, une est chargée, mais plus. Avec une bonne distribution, cela accélère le site. Cependant, l'essentiel ici est de ne pas en faire trop. La combinaison d'images ne donne pas toujours un avantage dans le chargement du site.

Exemple de sprite CSS

Regardons un petit exemple d'implémentation de sprite CSS. Disons que nous avons fait l'image suivante à partir de trois flèches distinctes.

Pour faire référence à la flèche souhaitée en CSS, vous devez écrire

Voici à quoi cela ressemble sur la page :

Dans cet exemple, nous avons utilisé des marges négatives. Ceci est fait afin de faire apparaître l'image. Par exemple, il y a le sprite suivant :

Pour couper l'icône RSS, nous devons écrire les retraits suivants

position d'arrière-plan : -90px -40px ;

Dans l'exemple, nous avons surélevé l'image de 40 pixels vers le haut et de 90 pixels vers la gauche.

Avantages de l'utilisation de sprites

• Réduire le nombre d'appels serveur
• Si vous utilisez un changement dynamique de l'image (par exemple, lorsque vous survolez un élément de menu), alors l'image sera déjà dans le cache et donc il n'y aura pas de retard dans le chargement au bon moment
• Si l'arrière-plan des images fusionnées est similaire, cela réduira également le "poids" total des images.

Parmi les inconvénients des sprites : la complexité du travail dans le cas du travail manuel. Mais il y a du bon services gratuits qui sont prêts à simplifier votre travail et à tout faire pour vous.

Il y a environ une semaine, un de mes abonnés m'a demandé de parler de sprites CSS, ce que c'est en général et avec quoi on les mange. Par conséquent, aujourd'hui, j'ai décidé d'écrire cet article dans lequel je vais vous dire, que sont les sprites CSS et où sont-ils utilisés.

sprite CSS est une image combinée contenant de nombreuses images différentes et utilisant la propriété position-arrière-plan nous mettons la bonne image au bon endroit. Disons que nous avons un bouton, et ce bouton change d'apparence lorsque vous le survolez avec le curseur de la souris. Vous pouvez faire, par exemple, 2 images puis substituez telle ou telle image comme arrière-plan du bouton. Mais l'inconvénient cette méthodeévident : dans 2 fois plus de fichiers, environ 2 fois la taille, par conséquent, en 2 temps de chargement fois plus long que 1 image. Et donc Technique des sprites CSS vous permet de créer une seule image dans laquelle vous serez immédiatement 2 fond de bouton.

Pour que ce soit plus clair, résolvons ce problème. Nous avons une image, par exemple, la hauteur 20 pixels et largeur 100 pixels. Le bouton a une largeur 50 pixels et hauteur 20 pixels. Dans une image, nous mettons des images des deux états (l'un après l'autre). Code HTML serait comme ça :

Bouton

ET Code CSS:

UNE (
arrière-plan : url ("button.jpg") sans répétition en haut à gauche ; // Arrière-plan du bouton
bloc de visualisation; // En fait un élément de bloc
hauteur : 20px ; // Hauteur du bouton
largeur : 50px ; // Largeur du bouton
texte-décoration : aucun ; // Supprimer le soulignement
}
a : survolez (
position d'arrière-plan : en haut à droite ; // Changer la position du fond pour décaler l'image
}

De cette manière délicate, vous pouvez stocker de nombreuses images dans une seule image. Permettez-moi de souligner qu'il s'agit de beaucoup d'images, et pas seulement 2 ... Parfois, presque tout le site se compose d'une seule image, qui contient toutes les images utilisées. Je ne pense pas que ce soit très bien, mais il y aura un nombre minimum de fichiers image et une taille de chargement de page minimum, ce qui est toujours bien.

Sprite (infographie)

images-objets 2D

Initialement, les sprites étaient compris comme de petits dessins qui étaient affichés à l'écran en utilisant l'accélération matérielle. Sur certaines machines (MSX 1, NES), le rendu logiciel entraînait certaines limitations, contrairement aux sprites matériels. Par la suite, avec l'augmentation de la puissance du processeur central, les sprites matériels ont été abandonnés, et le concept de « sprite » étendu à tous les personnages 2D. En particulier, dans les jeux vidéo Super Mario et Heroes of Might and Magic, tous les graphismes sont des sprites.

Les sprites à accélération matérielle sont revenus au milieu des années 1990, lorsque le développement du multimédia et l'augmentation explosive de la résolution et de la profondeur des couleurs nécessitaient un processeur spécialisé dans une carte vidéo. C'est alors, en tant que wrapper sur un accélérateur 2D matériel, que DirectDraw est sorti. DirectX 8 a introduit une API commune pour les graphiques 2D et 3D, et dans les jeux de sprites modernes, les sprites 2D sont rendus exactement comme les sprites 3D - sous la forme d'un rectangle texturé.

sprites CSS

Utilisé sur le Web. Plusieurs images sont situées dans une fichier graphique... Afin de découper la pièce souhaitée du fichier, CSS est appliqué - d'où le nom de la technologie.

Les sprites CSS économisent de la bande passante et se chargent plus rapidement - le navigateur devra demander moins de fichiers.

Sprites en 3D

Moteurs de première génération

Dans les premiers jeux 3D, tels que Wolfenstein 3D () et Doom (), les personnages étaient représentés sous forme de dessins 2D redimensionnés avec la distance.

Sur les accélérateurs 3D

La technique suivante est utilisée sur les accélérateurs 3D : un objet est dessiné sous la forme d'un plan avec une texture superposée avec des zones transparentes. Cette technologie est utilisée dans trois cas.

Optimisation

Les sprites peuvent être utilisés pour optimiser le noyau graphique lorsque le rendu d'un modèle détaillé 3D est trop coûteux et peut entraîner une baisse significative de la vitesse de rendu. Ceux-ci sont:

• Les objets qui sont présents dans la scène en grand nombre et qui, étant tridimensionnels, auraient un grand nombre de facettes et affecterait grandement la performance - par exemple, le public (Figure 1), l'herbe, etc.
• Objets distants qui sont rapprochés par des modèles polygonaux.

Effets spéciaux

Pour rendre l'image plus crédible, un grand nombre de sprites relativement petits sont utilisés (le système de particules).

Tournage en direct

Parfois, les sprites sont utilisés pour ajouter une photo ou une vidéo en direct au jeu. Par exemple:

• Acteurs en direct, par exemple dans realMyst (Fig. 4).
• Manettes de contrôle dans des simulateurs d'avion, de train, etc., photographiés dans un vrai cockpit.

Il convient de noter que dans certains jeux de sprites, tels que Rise of the Triad, les sprites ont été photographiés à partir d'acteurs, et non à partir de modèles, de jouets ou de dessins.

L'apparition de shaders supprime partiellement le besoin de prise de vue en direct - de nombreuses nuances de l'image photo peuvent déjà être véhiculées par des modèles polygonaux en temps réel.

Illusion fracassante

Voir le sprite sous un angle inapproprié détruit l'illusion. Selon l'appareil de rendu mathématique ("moteur"), la destruction peut se produire de deux manières.

Terminologie

• Panneau d'affichage- un sprite constamment face à la caméra (par analogie avec les panneaux d'affichage sur les autoroutes, qui sont tournés à l'angle le plus favorable).
• Imposteur- un sprite qui remplace à grande distance un modèle tridimensionnel.