Il y a de multiples outils dédiés à l'optimisation sur la réduction du code JS et CSS, le rassemblement d'images/icones en une large tile avec le CSS généré pour afficher chaque image aux coordonnées X;Y...
Bien sûr, il y a un côté fainéant à ne pas s'intéresser à le faire avant de publier son site.
Malheureusement, moi même je n'y pense pas toujours. C'est majoritairement un travail de front-end, d'intégration. Le back pourrait bien charger 40 libs inutiles, ce n'est pas cela qui aurait un impact significatif sur les performances de l'utilisateur.
« Nous avons propagé sur Extranet une histoire fabriquée de toutes pièces selon laquelle une certaine disposition d'étoiles, vue depuis la planète d'origine des butariens, formaient le visage d'une déesse galarienne.
Sans chercher à vérifier ces informations, certains ont décrété que c'était la preuve de l'existence de la déesse. Ceux qui notaient le manque de preuves se faisaient attaquer. »
— Legion, geth trolleur à portée galactique
(en passant, c'est très bien Le maître et Marguerite, même si la finalité de ce livre m'a échappé)
Que cache le pays des Dieux ? -
Forum Ghibli -
Forum LittéraireLa fin d'un monde souillé est venue. L'oiseau blanc plane dans le ciel annonçant le début d'une longue ère de purification. Détachons-nous à jamais de notre vie dans ce monde de souffrance. Ô toi l'oiseau blanc, l'être vêtu de bleu, guide nous vers ce monde de pureté. - Sutra originel dork.
Exact, je regardais justement Yaronet qui ne semble pas faire usage de spritesheet pour ses PNG mais vu la taille des images il ne doit pas y avoir un énrome gain d'overhead avec une spritesheet.
Ca n'a pas un gros impact mais c'est du téélchargement inutile quoi qu'il arrive (un peu comme mes posts tien).
En fait, au lieu de mettre une image de dimension W*H, on crée un élément vide (div, span, qu'importe) de taille W*H avec le sprite en background, et on déplace la position du background de x;y.
Il ne s'agit donc pas à proprement parler d'une image mais d'un élément avec un background spécifique.
Bien sûr, cette technique est à réserver uniquement aux éléments de design (boutons, bordures, icônes...) car cela casse l'interaction qu'on peut avoir avec des images (comme tout le menu contextuel d'une image obtenu par un simple clic droit).
Mais cette technique peut justement être utilisée pour protéger (superficiellement) une image : on en fait un background d'un élément de taille identique, et dans cet élément on met une image composée d'un pixel transparent 1x1 étiré aux dimensions de l'image. Un clic droit pour enregistrer l'image, et on se retrouve en fait avec un pixel transparent. Ça n'empêche absolument pas de récupérer l'image si on creuse deux secondes, mais c'est plus élégant que les scripts JS bloqueurs de clic droit.
« Nous avons propagé sur Extranet une histoire fabriquée de toutes pièces selon laquelle une certaine disposition d'étoiles, vue depuis la planète d'origine des butariens, formaient le visage d'une déesse galarienne.
Sans chercher à vérifier ces informations, certains ont décrété que c'était la preuve de l'existence de la déesse. Ceux qui notaient le manque de preuves se faisaient attaquer. »
— Legion, geth trolleur à portée galactique
Mais il existe de nombreux générateurs sur internet : tu envoies les images, le générateur condense tout cela en une seule image, et crée les classes & coordonnées dans le fichier CSS à partir des dimensions de chaque image uploadée et sa position sur le résultat final.
Il est vrai que faire cela à la main est chiant comme la mort, avec ces outils tu as juste à actualiser l'image finale et le bloc de CSS qui définit les sprites.
« Nous avons propagé sur Extranet une histoire fabriquée de toutes pièces selon laquelle une certaine disposition d'étoiles, vue depuis la planète d'origine des butariens, formaient le visage d'une déesse galarienne.
Sans chercher à vérifier ces informations, certains ont décrété que c'était la preuve de l'existence de la déesse. Ceux qui notaient le manque de preuves se faisaient attaquer. »
— Legion, geth trolleur à portée galactique
Zeph Le 01/04/2016 à 22:41 Je suis moyennement convaincu également par ces recommandations... Combiner tous les fichiers CSS et JS ? Bof, la combinatoire dépasse largement les 5 ou 6 fichiers que j'inclue quand c'est nécessaire et qui ne font au final que 5 ou 6 entrées en cache. Générer 30 fichiers combinés ou plus ne me semble pas une super idée : il va falloir davantage de requêtes avant de les avoir en cache et ça va occuper plus de place dans les navigateurs.
Pour les planches de sprites je n'ai jamais essayé et peut-être que c'est intéressant. Effectivement en théorie ça force à télécharger pas mal d'images quand seulement quelques-unes sont réellement utilisées, mais d'un autre côté on parle d'une requête qui va faire dans les 20ko donc le temps de download est négligeable par rapport à l'aller-retour réseau.
Il y a quoi comme solution connue pour générer des spritesheets ? Je viens d'aller regarder sur npm mais comme d'habitude ça m'a donné 850 résultats non triés avec chacun un tas de dépendances délirantes genre GTK, ImageMagick, Python ou que sais-je encore :/
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez
par ici :)
Et je suis d'accord avec toi, mais c'est marrant parce que ce n'est pas ce que recommande la majorité qui te dit "non mais pour améliorer votre site, allez chercher le fichier sur X ou Y" (genre le dépôt Google)
Proud to be CAKE©®™
GCC4TI importe qui a problème en Autriche, pour l'UE plus et une encore de correspours nucléaire, ce n'est pas ytre d'instérier. L'état très même contraire, toujours reconstruire un pouvoir une choyer d'aucrée de compris le plus mite de genre, ce n'est pas moins)
Stalin est l'élection de la langie.
Cela ne me semble pas si contraignant : garde les fichiers de ton spritesheet dans un dossier dédié à cela, et sépare le CSS (fichier séparé ou bloc de code distinguable). Quand tu veux afficher une ou plusieurs images, il te suffit alors de renvoyer toutes les images groupées dans le générateur, de changer le spritesheet généré, et de remplacer le bloc de CSS par celui créé. Comme les classes générées dépendent du nom de tes images d'origine, il n'y aura pas d'incidence sur ton code HTML, même si les images sont regroupées de façon différente qu'à la version précédente.
« Nous avons propagé sur Extranet une histoire fabriquée de toutes pièces selon laquelle une certaine disposition d'étoiles, vue depuis la planète d'origine des butariens, formaient le visage d'une déesse galarienne.
Sans chercher à vérifier ces informations, certains ont décrété que c'était la preuve de l'existence de la déesse. Ceux qui notaient le manque de preuves se faisaient attaquer. »
— Legion, geth trolleur à portée galactique
Zeph Le 02/04/2016 à 18:12 C'est quand même hyper chiant, toutes les autres transformations que j'effectue sur les fichiers statiques sont automatiques et c'est pour moi une condition nécessaire pour utiliser les outils associés. S'il faut générer des trucs à la main à chaque fois que je touche à une image je pense que je vais passer mon chemin :/
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez
par ici :)
Pen^2 Le 02/04/2016 à 19:32 Perso j'utilisais déjà un plugin pour ça depuis un moment. Bien sûr ça perd l'état de la page, et ne conserve que l'url.
En pratique je n'ai jamais été ennuyé.
Nil Le 02/04/2016 à 20:41 Oh punaise... je ne supporte pas ça sur mon mobile (à tel point que j'ai mˆeme cherché à activer le swap pour qu'il tape dans la flash plutˆot qu'il ne décharge la mémoire).
Après, ça peut quand-mˆeme avoir son intérˆet, c'est vrai : il m'arrive de redémarrer Fx juste pour libérer la mémoire des onglets inutilisés (je redémarre avec les anciens onglets), parce qu'à ce moment-là, les onglets ne sont chargés en mémoire qu'à leur première sélection.
(changement de layout ou changement de clavier ^^)
Nil Le 02/04/2016 à 20:54 (Mon PC sous Windows piloté depuis mon terminal Android qui dispose d'un clavier physique que le client RDP de MS gère mal ˆˆ)
ha? je n'ai jamis remarqué avec safari
Proud to be CAKE©®™
GCC4TI importe qui a problème en Autriche, pour l'UE plus et une encore de correspours nucléaire, ce n'est pas ytre d'instérier. L'état très même contraire, toujours reconstruire un pouvoir une choyer d'aucrée de compris le plus mite de genre, ce n'est pas moins)
Stalin est l'élection de la langie.
)
j'ai le même problème avec Safari Mobile 
