[BP#20] Générer des spritesheets CSS

[florinesueur]

Il me semble qu'il faudrait un exemple un peu plus parlant où il est intéressant d'utiliser les spritessheets CSS.
Par exemple pour les petits drapeaux de changement de langue d'un site internet :

.flags {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flag-france {
  height: 128px;
  background-position: -5px -5px;
}

.flag-usa {
  height: 135px;
  background-position: -5px -143px;
}

ou

<img src='flags.png' class='flag-france' alt='Français'>

img {
  object-fit: none;
  object-position: 0 0;
  width: 100px;
  height: 100px;
}

.flag-france {
object-position: -5px -5px;
}

Aussi nous pouvons proposer une alternative en lien avec la bonne pratique BP30 en faire des glyphes.

http://draeton.github.com/stitches est un lien mort.

[ldesgrange]

Je suis d'accord pour un exemple plus parlant.

Par contre, comme pour la BP09, HTTP/2 rend ce genre de techniques moins pertinentes et il faut faire des tests au cas par cas pour voir si on y gagne, donc à mon avis, il faudrait revoir à la baisse l'impact environnemental de cette BP.

[Fred-artwai]

Mais qui utilise encore des sprites CSS aujourd'hui ? ;-)
Pour moi, çà n'a pas de sens. Faire une sprite CSS c'est limiter le nombre de requêtes donc
soit c'est compris dans BP09 comme une technique pour réduire le nombre de requête
soit c'est tout simplement à supprimer car en opposition avec :

• la BP 30 Préférer les glyphs aux images
• la BP 37 Utiliser le chargement paresseux des images (très compliqué en CSS)

[ACTLEM]

Une BP HTTP2 est bien prévue (déjà écrite) pour cette version. Par contre, j'ai du mal à comprendre les arguments pour la suppression pour cette BP, quelle serait la meilleure alternative si nous ne sommes pas sur du monochrome?

[Fred-artwai]

A partir du moment où nous sommes en HTTP/2 cette pratique a beaucoup moins d'intérêts. Et dans tous les cas c'est un moyen de réduire le nombre de requêtes donc a citer comme exemple dans la BP#9.

[tbroyer]

Sans compter que le moindre changement d'un sprite (une image parmi toutes) nécessite de re-télécharger la spritesheet (l'assemblage des sprites), alors qu'avec des images distinctes on bénéficie du cache HTTP pour chacun indépendamment.
L'assemblage d'images variées a aussi un impact sur les optimisations possibles au niveau de l'image (plus grande palette de couleurs qui empêche l'utilisation de PNG-8 par exemple)

Pour moi, les spritesheets ont encore un intérêt dans certains cas, mais bien moins qu'il y a quelques années, et ne sont plus une règle de base. Je serais tenté de supprimer cette BP, mais je pense qu'il faudrait faire des mesures (ou trouver des études déjà réalisées sur le sujet)

[ACTLEM]

On pourrait garder la référence au Spritesheets dans la BP9: #203 et supprimer cette BP, ok?

[ACTLEM]

J'ai créé l'issue pour suppression mais on garde une référence aux spritesheets dans la BP9: #299