background-image ou img pour une image

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Gaulois, 21 Octobre 2010.

  1. Gaulois
    Gaulois Nouveau WRInaute
    Inscrit:
    20 Août 2009
    Messages:
    32
    J'aime reçus:
    0
    Bonjour

    Une petite question pour tout le monde.
    Que faut il mieux mettre lorsqu'on a le choix, une image en background-img dans un fichier css ou dans un img en html?

    D'après ce que je crois, tout ce qui est mis dans un fichier css permet d'alléger l'affichage de la page html mais en même temps en mettant une image en background on perd le alt qui est utilisé pour un meilleur référencement.

    Donc quel est votre préférence et pourquoi?

    Cordialement

    Gaulois
     
  2. 212communication
    212communication WRInaute discret
    Inscrit:
    18 Novembre 2009
    Messages:
    118
    J'aime reçus:
    0
    les éléments inéchangeables comme le header, boutons etc, ça doit être en css, ça c sur, or toutes les images qui peuvent être changées par la suite, vaut mieux un img
     
  3. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Ben le background comme ça l'indique...c'est un arrière plan.

    Il présente l'avantage de pouvoir mettre du contenu par dessus.

    la balise img permet de mettre une image en avant-plan comme du texte.

    Donc on met une image en background lorsque qu'elle est en arrière plan.

    De +, créer une classe avec un arrière plan à chaque fois qu'on veut mettre une photo...bonjour le css à la fin...
     
  4. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0

    Pfiou...


    Une image, qu'elle soit appelée dans le fichier css ou dans le fichier html, sera chargée. La manière change, mais dans les grandes lignes ça reste identique : l'image reste la même, elle fait le même poids.
    Concernant le alt des images pour le référencement : oui, ça marche. Cependant ce n'est pas "THE" truc magique pour gagner des positions, et le alt n'est certainement pas un endroit où on peut "bourrer du mot clé dedans" (ça sert pas à grand chose et c'est risqué).


    "header, boutons etc, ça doit être en css"
    Moi je dirai : ça se discute au cas par cas.
    Parfois, les headers sont très très simples et ne contiennent, par exemple, qu'un logo. Un logo est une image. Perso, dans le cas d'un logo je mettrai la balise <img> dans le fichier HTML plutôt que de l'appeler via CSS (on pourra alors cliquer dessus).
    Idem pour un bouton, ça se discute au cas par cas. Certains boutons ne sont qu'une image (y compris le texte écrit dessus). Dans ce cas là mieux vaut une image placée dans la page HTML.
    Perso, j'aime pas ce moyen pour les boutons (une image seule) : je préfère utiliser une couleur de fond, parfois un dégradé en CSS et parfois une image en background. Le texte du bouton est alors "lisible" (et là je te rejoins pour l'utilisation de l'image en bkg).


    "toutes les images qui peuvent être changées par la suite, vaut mieux un img"
    euuuuuh... soit on part du principe qu'une page réalisée n'a pas de raison d'être changée par la suite, soit on part du principe que tout peut être changé. Dans ce dernier cas, que l'image soit une balise <img ou un background appelé via CSS, ça ne change pas grand chose : les deux sont modifiables facilement.


    ça se discute donc au cas par cas à mon avis, mais si je me souviens bien, j'étais tombé il y'a qq années sur une page d'alsacreations.com où des utilisateurs donnaient qq règles pour décider (je n'ai plus la page sous le coude).

    Je dirai :
    - si c'est pour "illustrer" : alors c'est une image dans le fichier HTML (ex: agrémenter un article).
    - si c'est pour "faire joli" : alors c'est un background dans le CSS (ex: fond de page, fond d'un bouton).

    C'est mon avis. N'hésitez pas à me donner le votre, ça fera peut être changer le mien ;-) :mrgreen:
     
  5. fredfan
    fredfan WRInaute accro
    Inscrit:
    2 Juillet 2008
    Messages:
    2 869
    J'aime reçus:
    2
    Même en fond de page, si ton image a un sens et est dans la thématique de la page, il vaut mieux la mettre en img pour qu'elle puisse être référencée. Surtout si elle représente quelque chose ou quelqu'un qui est décrit dans la page. Par exemple un clafoutis en fond d'une recette, la photo de ton hôtel, d'une voiture, ou d'une personnalité, etc..
     
  6. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Tu fais comment pour mettre du texte sur une balise <img /> si l'image du clafoutis est un fond d'image ?
     
  7. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    Code:
    position:absolute;
    ;-)
     
  8. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Je n'aime pas beaucoup utiliser les positions absolues, je préfère les positions relatives. Je trouve que c'est plus lon g et approximatif à placer qu'autre chose et que les navigateurs réagissent mieux au positionnement relatif d'éléments entre eux.

    En outre, une image en positionnement relatif, elle ne se met pas devant le texte?
     
  9. fredfan
    fredfan WRInaute accro
    Inscrit:
    2 Juillet 2008
    Messages:
    2 869
    J'aime reçus:
    2
    Si ton image est dans un élément parent je ne vois pas le problème. Tu peux mettre une rectangle translucide entre les deux pour la lisibilité. Et un z-index empêche les éléments de flotter.
     
  10. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Ok mais c'est quand même pas plus simple un background-image (pour reprendre la question de départ) ? 8O
     
  11. fredfan
    fredfan WRInaute accro
    Inscrit:
    2 Juillet 2008
    Messages:
    2 869
    J'aime reçus:
    2
    Comme la question concernait le référencement, je ne crois pas que la notion de simplicité soit prioritaire.
    Ensuite le background est difficile à utiliser dans certains cas, pour étirer l'image en particulier, sauf en css3.
     
  12. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Exact... :)

    Mais étirer l'image, tu veux dire changer width et height ?
     
  13. fredfan
    fredfan WRInaute accro
    Inscrit:
    2 Juillet 2008
    Messages:
    2 869
    J'aime reçus:
    2
    Exemple : http://@less.org
    Je te laisse corriger l'url
    Impossible à faire en css2
    Pas très seyant sur une jeune femme, mais sur un clafoutis l'effet étiré n'est pas gênant.
    C'est logique que l'image soit référencée puisqu'elle représente quelqu'un qu'on peut éventuellement chercher sur Google images
     
  14. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    z-index (déjà répondu plus haut).

    Je te rassure, je n'aime pas utiliser les positions absolutes également, et je partage ton avis à 100% pour la suite ;-)
     
  15. 212communication
    212communication WRInaute discret
    Inscrit:
    18 Novembre 2009
    Messages:
    118
    J'aime reçus:
    0
    Bon a vrai dire, le problème se pose même pas lors de l'intégration, de point de vu référencement comme vous l'avais déjà dit les alt n'influenceront pas beaucoup sur le référencement du site, alors se prendre la tête ... :roll:
     
Chargement...
Similar Threads - background image image Forum Date
La background image du site et la vue en cache de google Débuter en référencement 26 Mars 2018
Background image sous conditions Développement d'un site Web ou d'une appli mobile 8 Avril 2013
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
Background-image qui ne s'affiche plus suite REDIR htaccess URL Rewriting et .htaccess 14 Décembre 2011
CSS 2 image en background Développement d'un site Web ou d'une appli mobile 20 Octobre 2010
Image en Background ... Développement d'un site Web ou d'une appli mobile 3 Octobre 2010
Newsletter html et background-image - prise de tête inside Développement d'un site Web ou d'une appli mobile 21 Septembre 2010
inserer une image dans le background de mon site Développement d'un site Web ou d'une appli mobile 30 Juin 2010
2 background-image dans une div Développement d'un site Web ou d'une appli mobile 9 Juin 2010
Images background sont elles référencées ? YouTube, Google Images et Google Maps 30 Avril 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice