Sprites combinés ou pas

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Corrigeur, 13 Juillet 2015.

  1. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    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.

    [​IMG]

    Quand est-il maintenant ?

    Merci pour vos explications...
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 368
    J'aime reçus:
    2
    Toujours pareil, c'est mieux de le faire.

    (Transféré dans le bon forum)
     
  3. Olargues
    Olargues WRInaute passionné
    Inscrit:
    10 Août 2003
    Messages:
    1 155
    J'aime reçus:
    0
    Toujours utilisé...
     
  4. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 125
    J'aime reçus:
    2
    et en plus si tu optimise tes png en taille sans perte de qualité alors tu sera le roi du sprite ;-)
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 032
    J'aime reçus:
    291
  6. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    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.
     
  7. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 125
    J'aime reçus:
    2
    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.
     
  8. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    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.
     
  9. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 125
    J'aime reçus:
    2
    et c'est compatible partout les "icon fonts" pour remplacer les sprites ???
     
  10. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 032
    J'aime reçus:
    291
  11. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Bonjour, Big06.
    L'exemple date effectivement un peu un peu. Il vient de Google image.

    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.
    [​IMG]
    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.
     
  12. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    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.
     
  13. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 032
    J'aime reçus:
    291
  14. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    Je suis plus fan de Icomoon
    https://icomoon.io/

    qui permet justement de faire "encode & embed font in CSS" et qui a une option pour garder la compatibilité avec IE6/7
     
  15. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    :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.
     
  16. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    Effectivement c'est parfait pour des icones monochromes (ce quu est le cas dans l'exemple présenté dans ce topic)
     
  17. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    546
    J'aime reçus:
    65
    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.
     
  18. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Merci beaucoup, Colonies, pour ta réponse argumentée.
     
Chargement...
Similar Threads - Sprites combinés Forum Date
Combine images using CSS sprites sur un site Joomla Débuter en référencement 18 Mars 2015
CSS Sprites et Google Images Débuter en référencement 29 Décembre 2011
Référencement avec Sprites (CSS) ? Débuter en référencement 16 Août 2010
Referencement connaitre toute les combines Débuter en référencement 19 Février 2012
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice