Comment mettre une image en HTML : Guide complet

Si tu débutes en développement web, tu t'es sûrement déjà demandé comment ajouter une image à ta page. C'est une des bases du HTML, et je vais t'expliquer comment le faire simplement et efficacement.

La base : la balise <img />

Pour ajouter une image en HTML, on utilise la balise <img>. C'est une balise auto-fermante, ce qui signifie qu'elle n'a pas besoin d'une balise de fermeture. Voici à quoi ça ressemble :

<link href="styles.css" rel="stylesheet" />

<img width="100%" src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" alt="Un mignon chaton" />

Dans cet exemple, j'ai utilisé deux attributs essentiels :

1. src : C'est l'URL de l'image que tu veux afficher.
2. alt : C'est le texte alternatif qui s'affiche si l'image ne peut pas être chargée. C'est aussi crucial pour l'accessibilité et le SEO.
3. width : Je définis la width de l'image pour qu'on puisse correctement la voir.

Styliser l'image

Par défaut, l'image s'affiche à sa taille originale. Mais souvent, tu voudras la redimensionner. Pour ça, on utilise CSS. Voici comment définir une largeur et une hauteur fixes :

<link href="styles.css" rel="stylesheet" />

<style>
  img {
    width: 200px;
    height: 200px;
  }
</style>

<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" alt="Un mignon chaton" />

La propriété object-fit

Quand tu redimensionnes une image, tu peux te retrouver avec des proportions bizarres. C'est là qu'intervient la propriété object-fit. Elle te permet de contrôler comment l'image s'adapte à son conteneur.

<link href="styles.css" rel="stylesheet" />

<style>
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}
</style>

<label>
<input type="checkbox" id="toggleObjectFit" checked>
Activer object-fit
</label>

<img id="image" src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" alt="Un mignon chaton" />

Avec object-fit: cover;, l'image remplit tout l'espace disponible tout en conservant ses proportions. C'est super utile pour créer des grilles d'images uniformes, comme tu pourrais le voir dans un guide sur les grilles CSS.

Centrer une image

Maintenant que tu sais comment ajouter une image, tu te demandes peut-être comment la centrer. Il existe plusieurs méthodes, mais voici une des plus simples :

Ici, j'ai utilisé Flexbox pour centrer l'image. Si tu veux en savoir plus sur Flexbox, j'ai écris un article complet avec toutes les solutions pour centrer une image en CSS.

Images responsives

Dans le monde du web moderne, il est crucial que tes images s'adaptent à différentes tailles d'écran. Pour ça, tu peux utiliser des pourcentages ou des unités viewport :

Cette approche permet à l'image de s'adapter à la largeur de son conteneur, tout en ayant une taille maximale. C'est une technique que j'utilise souvent dans mes projets NextJS pour créer des sites web réactifs.

Conclusion

Voilà, tu sais maintenant comment ajouter et styliser des images en HTML ! C'est une compétence fondamentale pour tout développeur web. N'hésite pas à expérimenter avec différentes propriétés CSS pour obtenir exactement le résultat que tu veux.

Si tu veux approfondir tes connaissances en développement web, je te recommande de jeter un œil à ma roadmap pour devenir développeur web. Et si tu te demandes si tu devrais commencer par JavaScript ou TypeScript, j'ai un article qui pourrait t'aider à faire le bon choix.

N'oublie pas, la pratique est la clé. Alors amuse-toi à créer des mises en page avec des images et à explorer toutes les possibilités que le HTML et le CSS t'offrent !