background-image ou img pour une image

Gaulois · 21 Octobre 2010

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

212communication · 21 Octobre 2010

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

franckM · 21 Octobre 2010

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...

SpeedAirMan · 21 Octobre 2010

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.

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

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:

fredfan · 21 Octobre 2010

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..

franckM · 21 Octobre 2010

fredfan a dit:
Par exemple un clafoutis en fond d'une recette

Tu fais comment pour mettre du texte sur une balise <img /> si l'image du clafoutis est un fond d'image ?

SpeedAirMan · 21 Octobre 2010

franckM a dit:
Tu fais comment pour mettre du texte sur une balise <img /> si l'image du clafoutis est un fond d'image ?

Code:

position:absolute;

;-)

franckM · 21 Octobre 2010

SpeedAirMan a dit:
franckM a dit:

Tu fais comment pour mettre du texte sur une balise <img /> si l'image du clafoutis est un fond d'image ?

Cliquez pour agrandir...

Code:

position:absolute;

;-)

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?

fredfan · 21 Octobre 2010

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.

franckM · 21 Octobre 2010

fredfan a dit:
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.

Ok mais c'est quand même pas plus simple un background-image (pour reprendre la question de départ) ? 8O

fredfan · 21 Octobre 2010

franckM a dit:
fredfan a dit:

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.

Cliquez pour agrandir...

Ok mais c'est quand même pas plus simple un background-image (pour reprendre la question de départ) ? 8O

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.

franckM · 21 Octobre 2010

fredfan a dit:
franckM a dit:

fredfan a dit:

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.

Cliquez pour agrandir...

Ok mais c'est quand même pas plus simple un background-image (pour reprendre la question de départ) ? 8O

Cliquez pour agrandir...

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.

Exact...

Mais étirer l'image, tu veux dire changer width et height ?

fredfan · 21 Octobre 2010

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

SpeedAirMan · 22 Octobre 2010

En outre, une image en positionnement relatif, elle ne se met pas devant le texte?

z-index (déjà répondu plus haut).

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.

Je te rassure, je n'aime pas utiliser les positions absolutes également, et je partage ton avis à 100% pour la suite ;-)

212communication · 22 Octobre 2010

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: