image chargée en css

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par indigene, 8 Août 2015.

  1. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    Bonjour,

    J'ai une image de fond qui est appelée depuis un style css
    Pour les différentes sections de mon site je voudrais charger une image différente

    Deux solutions :
    1) Créer plusieurs classes différentes dans le même css avec chacune leur propre image et dans les pages html utiliser la classe qui correspond à la section
    2) Créer plusieurs fichiers css avec une classe unique mais qui fait référence à une image différente suivant le fichier css. Et dans les pages html appeler un fichier css différent pour chaque section.

    Les avantages de la première solution : un seul fichier css pour tout le site
    Les inconvénients : j'ai peur que toutes les images ne soient chargées, même celles qui correspondent à des classes qui ne sont pas utilisées dans la page. Ca ferait donc très lourd à charger au premier accès

    Les avantages de la seconde solution : une seule image dans le css donc une seule image chargée à l'ouverture de la page
    Les inconvénients : devoir maintenir plusieurs fichiers css presque identiques avec dans chacun une seule différence, l'url de l'image

    Pouvez-vous me confirmer si les images appelées depuis un css sont toutes chargées à l'ouverture ou bien si elles ne sont chargées que quand on les utilise réellement au sein de la page via la classe concernée ? La réponse orientera mon choix.

    Voici le code que j'ai actuellement dans le fichier css :
    Code:
    #content{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-rouge.gif) no-repeat scroll center top;background-size:90%;}
    #contentb{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-blanche.gif) no-repeat scroll center top;background-size:90%;}
    #contentn{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-noire.gif) no-repeat scroll center top;background-size:90%;}
    #contentj{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-jaune.gif) no-repeat scroll center top;background-size:90%;}
    #contentv{border-radius:0 0 0 0;-webkit-box-shadow:none;box-shadow:none;border-style:none;padding-top:8px;background:none;background:hsl(0,0%,0%) url(image-verte.gif) no-repeat scroll center top;background-size:90%;}
    
    Bien sur chaque page utilise qu'une seule image de fond.
    Les images de fond pèsent environ 130 ko
    Le fichier css fait 12 ko
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    792
    J'aime reçus:
    0
    la console de ton navigateur permet de savoir quelles sont les ressources qui sont chargées, donc de répondre à ton interrogation.
     
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    merci pour la réponse.
    Mais je n'utilise pas tous les navigateurs. Et par exemple dans IE je n'ai pas trouvé ce qui pourrait ressembler à une console. Et dans Firefox j'ai la liste des médias de la page mais je ne suis pas certain que c'est seulement les médias chargés. Il peut y avoir plus de médias chargés, bien que non utilisés dans la page. Et dans ce cas il ne m'affiche que les médias utilisés.
    En fait la réponse n'est pas claire.

    Je tourne donc la question dans un autre sens :
    Les médias décrits dans les css sont-ils chargés d'une manière générale (quel que soit le navigateur) seulement au moment où on les utilise réellement ou une fois pour toute au chargement du script css ?
     
  4. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 519
    J'aime reçus:
    49
    Bien sûr que non qu'elles ne sont pas toutes chargées à l'ouverture du fichier. C'est pas compliqué à vérifier, tu fais un css avec une image non enregistrée et tu testes ce qui est chargé avec un outil comme yslow ou autre.
     
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    Merci beaucoup !
    Donc c'est correct tel que j'ai codé :)
     
Chargement...
Similar Threads - image chargée css Forum Date
référencement image sur imgbox, Imgur Débuter en référencement 8 Novembre 2021
Duplicate images pour déclinaisons de produits Débuter en référencement 20 Octobre 2021
Référencement - nom des fichiers images Débuter en référencement 22 Septembre 2021
URL image située sur un autre site ou sous-domaine YouTube, Google Images et Google Maps 17 Septembre 2021
Comment accélérer chargement d'une image ? Développement d'un site Web ou d'une appli mobile 4 Septembre 2021
WordPress Actualiser le titre d'une image référencée par mes domaines référents Netlinking, backlinks, liens et redirections 3 Août 2021
faut-il activer les URL image ou éviter pour économiser le crawl Référencement Google 21 Juin 2021
Page indexée mais pas les images Problèmes de référencement spécifiques à vos sites 10 Juin 2021
Images Webp : peut-on se passer d'images alternatives ? YouTube, Google Images et Google Maps 1 Juin 2021
Temps de chargement - Une image full width peut-elle peser moins de 100ko ? Développement d'un site Web ou d'une appli mobile 1 Juin 2021