Comment insérer une image en HTML ?

Comment intégrer une image en HTML avec sa balise alt

Si vous réaliser vous même votre site web, il vous sera plus que nécessaire de savoir comment intégrer une image en HTML. Même si vous utilisez un CMS comme Prestashop, Joomla, Wordpress, Magento, ... à un moment donné vous allez devoir mettre les mains dans le code de votre site internet.

C'est pourquoi il est essentiel de connaître quelque base en HTML, c'est ce que je vais vous expliquer dans ce petit tutoriel.

Insérer une image en HTML

Imaginons que vous rédiger un article sur votre blog et vous avez besoin d'insérer une image à votre article.

La première étape consiste à télécharger votre image sur le FTP (WinSCP pour ne citer que lui) dans un répertoire image par exemple. 

Dans la barre de recherche vous allez rechercher le chemin, exemple : https://www.mondomaine.fr/image/monfichier.jpg

Copiez ce lien et insérer le dans la balise suivante : <img src="https://www.votredomaine.fr/image/votrefichier.jpg" alt="texte pour le référencement" class="img-responsive"/>

Voici le résultat : 

L'attribut alt est très important sur une image car l'image pourra être indexé par les moteurs de recherche, cette balise est très importante pour le référencement de vos images et de votre site internet aussi.

La classe class="img-responsive" permet à l'image de s'adapter à tout les types d'écran (téléphone, tablette, ...).

L'attribut title qui permet d'ajouter une information supplémentaire, exemple title="image html".

Les attributs height et width permettent de définir la hauteur et la largeur fixe de l'image.

Exemple : 

<img src="https://www.votredomaine.fr/image/votrefichier.jpg" height="400px" width="400px"/>