web-dev-qa-db-fra.com

Quel est le meilleur moyen de gérer toutes les images d'un grand projet, images en ligne, images d'arrière-plan, images css Sprite?

Comment gérez-vous toutes les images d'un grand projet, images en ligne, images d'arrière-plan, images css Sprite?

Suivez-vous une convention de nommage? Créez-vous des sous-dossiers pour gérer les images?

Dans un grand projet, comment trouver facilement de nouvelles personnes dans l’équipe de développement si des images qu’elles souhaitent utiliser (car c’est dans le nouveau fichier PSD qu’elles ont reçu du concepteur) sont déjà disponibles dans le dossier images du projet et comment elles peuvent être trouvées ça facilement.

web-developmentwebsite-designimages
5
metal-gear-solid

Dans mon plus grand projet comprenant plus de 42 langues différentes, je regroupe mes images comme suit:

Images

  • en
    • entête
    • forme
    • commun
    • etc..
  • fr
    • entête
    • forme
    • commun
    • etc..

J'essaie de ne pas créer trop de dossiers car cela devient tout aussi compliqué, mais la création de plusieurs dossiers différents qui se séparent par endroits clés facilite la recherche rapide d'images.

3
endyourif

Pour mes projets, j’ai tendance à utiliser des conventions de nommage strictes, généralement dictées par le type d’image et le lieu d’emplacement utilisés. cas de multiples. Je pour trois raisons principales ...

  1. Il est plus facile de référencer les images lorsque le chemin est toujours le même.
  2. Les images seront toujours regroupées correctement dans vos répertoires lorsque vous les visionnerez.
  3. J'aime la cohérence des traits d'union '-' entre les mots et les traits de soulignement '_' avant les chiffres lors de l'écriture de javascript pour manipuler les états de l'image.

des exemples seraient:

Accueil-infographie_01.png Accueil-infographie_02.png Accueil-infographie_03.png

J'ai aussi tendance à nommer les images en fonction de ce que je pourrais appeler son élément ou son conteneur dans un fichier CSS. Donc, pour un conteneur que je vais utiliser sur chaque page qui a une image supérieure répétée spéciale, je vais nommer la classe et l’image de la manière suivante ...

.containerTop {background-image: url ('../ images/containerTop.png'); }

et s'il doit y avoir une version modifiée pour une sous-page, je l'ajouterai après le nom de la classe dans l'image.

containerTop-about.png

Cela semble fonctionner assez bien pour moi, mais je modifie constamment mon processus et j'essaie de nouvelles choses pour l'améliorer. Il n’ya pas vraiment de "bonne" réponse à cela, mais j’espère que le mien pourra vous aider.

0
JocaHeelz