Sprites combinés ou pas

WRInaute occasionnel
Bonjour à tous.

On utilisait autrefois une technique consistant à combiner les petites images en utilisant des sprites CSS. On regroupait toutes les toutes petites images sur une énorme image et cela permettait de gagner un temps fou lors du chargement, car on chargeait un seul fichier au lieu de plusieurs, puis on allait piocher la bonne icône dans la grosse image en indiquant le bon décalage en hauteur et en largeur.

combined-image-of-css-sprite-in-weblogcode.png


Quand est-il maintenant ?

Merci pour vos explications...
 
WRInaute occasionnel
Merci tous les 4 pour ces premières réponses.

Quel agencement préconisez-vous sur le fichier PNG ? Jusqu’à quelle dimension d’image unitaire est-ce utile ?
Dans le thème j’ai :
— 1 Image opaque de 120x120.
Toutes les autres images ont un transparent :
— 1 Image de 30x30 avec transparent.
— 4 Images de 40x40 avec transparent.
— 5 Images de 50x50 avec transparent.
— 11 Images de 125x125 avec transparent.
 
WRInaute passionné
le plus simple et maintenable est de les regrouper par thèmes, genre un sprite de bouttons, un sprite d'icons, etc...
ou encore par tailles car la plupart du temps les png de même taille ont le même thème. regrouper par thème peut être sympa lorsque par exempl un jour tu rajoute un bouton ou un icon...

tout dépend de tes images, si ton image 120x120 n'est utilisée que sur une seule page alors ce n'est pas très efficace.
 
WRInaute impliqué
Bonjour,

J'ai de mon coté arrêté d'utiliser les sprites pour les "icon fonts":
http://www.alsacreations.com/astuce/lire/1661-accelerez-vos-polices-d- ... cones.html


Par rapport a l'exemple envoyé, j'utiliserais plutot la technique des polices d'icones car on peut ensuite facilement changer la couleur de l'icone en CSS ce qui évite de trainer 3 fois la meme icone avec des fonds différents. Et de gérer au mieux le responsive par la même occasion. Pour le négatif, c'est difficile à mettre en place pour que ce soit efficace en terme de performances, mais une fois que c'est en place, ajouter ou modifier une icone est très simple.
 
WRInaute occasionnel
Bigb06 a dit:
Par rapport a l'exemple envoyé
Bonjour, Big06.
L'exemple date effectivement un peu un peu. Il vient de Google image.

Bigb06 a dit:
J'ai de mon coté arrêté d'utiliser les sprites pour les "icon fonts"
La technique des fontes icônes est évidemment utile, mais elles n’autorisent jamais que les seuls caractères qu’elles possèdent. Réciproquement, elle permet une standardisation des images lorsque celles-ci sont monochromes.
647172suivezlecorrigeur.png

Code:
<li><i class="fa fa-twitter"></i></li>

Je dirais donc que les deux techniques sont complémentaires.

Pour en revenir au fond, j’ai réalisé un petit test pour déterminer quelle est l’organisation optimale des icônes dans la grande image combinée. J’ai pour cela aligné en vertical 23 icônes, puis je les mis en horizontal puis j’ai réalisé un gros pavé.
► C’est le gros pavé qui prend le moins de temps à s’afficher.
 
WRInaute impliqué
Corrigeur a dit:
La technique des fontes icônes est évidemment utile, mais elles n’autorisent jamais que les seuls caractères qu’elles possèdent.

Pas du tout, on peut créer une police personnalisée a partir de plusieurs caractères provenant de polices différentes, ou en ajoutant des "caractères", provenant d'images vectorisées ou provenant de PNGs bonne qualité vectorisés.

Dans mon cas j'ai créé une police custom en sélectionnant uniquement les icones utilisées sur le site. Et j'ai appliqué la méthode permettant de mettre la police directement dans un CSS afin d'éviter d'augmenter le nombre de fichiers externes.
 
WRInaute occasionnel
:wink: Une police n’est pas faite pour utiliser plusieurs couleurs. On peut certes utiliser d’artifices. Pour ma part je préfère éviter.
 
WRInaute impliqué
Corrigeur a dit:
:wink: Une police n’est pas faite pour utiliser plusieurs couleurs. On peut certes utiliser d’artifices. Pour ma part je préfère éviter.
Effectivement c'est parfait pour des icones monochromes (ce quu est le cas dans l'exemple présenté dans ce topic)
 
WRInaute impliqué
Les sprites CSS sont déconseillés si tu utilises SPDY/HTTP2. Ils servaient à éviter d'avoir une multitude de requête mais ça n'est plus d'actualité avec les nouvelles technologies. De plus si tu fais une modif, le gros sprite est rechargé, tu utilises forcément du PNG24 au lieu de PNG8 + vrai alpha quand c'est possible, ça fait des CSS inutilement complexes, utiliser des images séparées permet de ne charger/décoder que ce qui est nécessaire... bref plein d'avantage aux fichiers séparés, pour les perfs comme pour le workflow... mais avec SPDY/HTTP2.

Quant aux polices d'icônes, il y a aussi des aspects négatifs, notamment concernant l'accessibilité : https://speakerdeck.com/ninjanails/death-to-icon-fonts

Edit : Par contre il y a un avantage aux sprites combinés et aux polices c'est que l'état hover par exemple, s'il y en a un, est directement chargé si c'est une image, ou ne nécessite pas de chargement supplémentaire pour une icône de police (simple changement de couleur, fond... dans la css).
Personnellement je combine quand même les différents états d'une image pour que, si elle est affichée, ses variations dynamiques (hover, active) soient chargés en même temps.
 
Haut