Passer au contenu principal

Ajout d'une image en HTML : guide pour le formatage des photos Web

Si vous voulez augmenter votre taux de conversion, vous devez réfléchir soigneusement à la mise en page de votre site Web. La plupart des gens utilisent Internet pour rechercher des produits et des services, ce qui rend le Web très compétitif. Pour convertir les visiteurs d'un site Web, votre site doit se démarquer. C'est là que le référencement peut être utile. L'une des meilleures façons d'optimiser votre site Web est d'ajouter des images, y compris des images HTML.

HTML est l'abréviation d'Hypertext Markup Language. Il s'agit d'un système normalisé de marquage des fichiers texte. Il contient des informations relatives aux graphiques, à la couleur et à la police. C'est pourquoi il est extrêmement important d'ajouter des images à vos pages Web. Si vous êtes curieux de savoir comment ajouter une image en HTML, il y a plusieurs étapes à suivre.

Si vous souhaitez intégrer une image dans le code HTML, vous en saurez plus ci-dessous. Ensuite, utilisez vos photos pour améliorer votre classement dans les résultats de recherche et attirer davantage de visiteurs sur votre site Web. L'ajout d'une image en HTML est essentiel pour les petites entreprises, les moyennes entreprises et les grandes entreprises.

Insertion d'images dans les pages Web avec HTML

Vous allez comprendre pourquoi c'est important lorsqu'il s'agit du processus d'ajout d'une image HTML à votre site Web. L'ajout d'images à votre site Web peut rendre la page plus attrayante et plus lisible. Si vous voulez créer un site Web, il vaut mieux faire en sorte qu'il soit le plus intéressant possible.

Les images, les vidéos et autres graphiques sont un excellent moyen de rompre la monotonie. On dit qu'une image vaut mille mots, et c'est absolument vrai lorsqu'il s'agit d'images sur un site Web. Vous pouvez même baliser ces images avec certains mots-clés et expressions qui peuvent vous aider à améliorer votre classement dans les résultats de recherche, ce qui permet aux moteurs de recherche de comprendre plus facilement le contenu de votre site Web.

Bien sûr, les robots d'indexation du Web ne voient pas. Ils ne peuvent pas regarder votre site Web ou les images qu'il contient et comprendre ce qui se passe. Le code HTML est chargé d'indiquer aux moteurs de recherche le contenu de l'image, ce qui leur permet d'indexer votre site Web de manière appropriée.

Si vous voulez insérer des images dans votre site Web à l'aide du langage HTML, vous devez utiliser le bon code. Parmi les balises que vous devrez peut-être utiliser figurent <img> et <body>. Nous aborderons cette importante syntaxe ci-dessous.

Comment ajouter une image d'arrière-plan en HTML

Si vous souhaitez ajouter une image d'arrière-plan à l'aide d'HTML, vous pouvez utiliser l'attribut d'image d’arrière-plan en la plaçant à l'intérieur de la balise <body> mentionnée ci-dessus. Voici un exemple de code :

<body background =”image.png”>

Vous devez placer le nom de fichier de votre image PNG à la place du terme "image" dans la chaîne ci-dessus. Il vous faudra peut-être un peu de pratique pour formuler le codage correctement, et vous devrez peut-être jouer avec le gradient de couleur pour que l'image apparaisse comme vous le souhaitez. Vous devez toujours tester le code HTML en regardant l'image avant de passer à la tâche suivante.

La syntaxe des images HTML expliquée

HTML tag attributes

Il existe plusieurs éléments importants de la syntaxe d'image HTML que vous devez comprendre pour que vos images s'affichent correctement. Les balises HTML à connaître incluent :

  • <img> :Il s'agit de la balise d'image que vous utilisez pour insérer une image dans la page Web. Techniquement, l'image n'est pas collée sur le site Web. Au lieu de cela, les images sont liées à des pages Web. Cette balise crée un espace dédié où l'image référencée apparaîtra plus tard. En tant qu'élément vide, il ne comporte pas de balise de fermeture.
  • Src : Ce terme spécifie le chemin d'accès au fichier image. Lorsqu'une page Web se charge, le navigateur la récupère sur un serveur Web et l'insère dans la page. Si cet attribut n'est pas correct, le navigateur ne sera pas en mesure de trouver l'image ni de la charger correctement.
  • Alt : Cet attribut est responsable du texte alternatif de la photo. Il doit décrire le fichier image avec précision, et son texte s'affichera si le fichier ne se charge pas.

Ce sont quelques-uns des termes les plus importants que vous utiliserez pour faire apparaître vos images sur votre site Web.

Attribut HTML img src (source)

Comme mentionné ci-dessus, l'attribut src représente la source du fichier image. C'est important pour spécifier l'origine de l'image. La source de l'image est essentielle pour tracer son parcours. Si cette valeur est incorrecte ou si le navigateur ne peut pas récupérer l'image, celle-ci ne sera pas chargée correctement. Veillez à toujours tester l'attribut src pour vous assurer qu'il est répertorié correctement avant de terminer le codage.

Attribut HTML alt

L'attribut alt est le texte de remplacement d'une image. Il doit être une description précise de l'image. Si une image ne se charge pas dans un navigateur, il vaut mieux éviter d'avoir un espace vide à l'écran. Le texte alternatif s'affichera là où l'image aurait dû apparaître. Par exemple, si un élément d'image était censé se charger mais qu'il a échoué en raison d'une connexion lente, le texte de remplacement s'affichera à la place. Le texte alternatif peut également apparaître pendant le chargement d'une image et fournir ainsi aux visiteurs du site une description pendant qu'ils patientent. C'est pourquoi le texte doit être descriptif.

Explanation of alt attribute

Un attribut alt est également important pour le référencement sur page. Un moteur de recherche ne peut pas vraiment voir l'image. Il s'appuiera plutôt sur votre description de l'image pour la catégoriser de manière adéquate. Si le texte alternatif contient des mots-clés et des phrases importantes, il peut également faciliter l'indexation de votre page Web par un moteur de recherche. Par conséquent, cela peut améliorer votre classement dans les résultats de recherche.

De plus, le texte alternatif est excellent pour l'accessibilité. En ajoutant une brève description dans le code HTML de votre image, les lecteurs d'écran peuvent facilement lire le texte pour les utilisateurs. Ainsi, la plupart des navigateurs peuvent aider les malvoyants à comprendre le contenu que vous proposez.

HTML et tailles des images

Vous êtes peut-être curieux de connaître la taille des images en HTML. Il existe différents types de code que vous pouvez utiliser, mais il est préférable d'utiliser l'attribut "style" plutôt que l'attribut "largeur et hauteur". Si vous décidez d'utiliser l'attribut "style", vous spécifierez immédiatement la largeur et la hauteur d'une image par la suite. Par exemple, le code pourrait être le suivant :

  • Style=“width:300px;height:400px.”

Vous pouvez également utiliser les attributs largeur et hauteur pour modifier la taille de l'image. Comme ceci :

  • Largeur=“300”
  • Hauteur=“400”

Même si les deux options sont valables, l'utilisation de l'attribut style est préférable, car elle empêche les feuilles de style de modifier la taille de vos images.

Autres façons de formater les images HTML

Il existe plusieurs autres façons de formater les images HTML. Citons notamment :

  • Lien image : Vous pouvez utiliser la balise <a> pour ajouter un lien vers la photo. Vous verrez alors l'URL de l'image tout en incluant la taille.
  • Image W3 : Vous pouvez également utiliser des images W3. Cette option est utilisée pour afficher une image de base sans bordure.
  • Image flottante : Vous pouvez utiliser les propriétés CSS pour que l'image flotte à gauche ou à droite, ce qui modifie son apparence.
  • Image cliquable : Si vous souhaitez établir un lien hypertexte entre certaines parties de l'image et différentes zones, vous devez utiliser une image cliquable. Par exemple, vous pourriez vouloir établir un lien hypertexte entre les pays figurant sur une carte et certaines pages.

Conseils pour ajouter des images à votre site Web

Si vous voulez tirer le meilleur parti des images que vous ajoutez à votre site Web, il y a quelques conseils à garder à l'esprit. Citons notamment :

Tips for adding images to your website
  • Ne publiez pas d'images protégées par droit d'auteur. Il existe de nombreux sites Web où vous pouvez trouver des images gratuitement. Si vous trouvez une photo en ligne, vérifiez si elle est protégée par des droits d'auteur avant de l'utiliser.
  • Assurez-vous que les photos sont de haute qualité. Vous devez utiliser une image de haute qualité si vous voulez mettre en valeur votre marque de manière efficace. Une photo floue donne l'impression que vous ne vous souciez pas de votre site Web et risque de faire fuir vos visiteurs.
  • Optimisez les images pour le SEO. Outre l'ajout d'un attribut alt à vos images, veillez également à tenir compte de la vitesse de chargement. Vous devez vous assurer de comprimer vos images avant de les ajouter à votre site Web. Si la taille du fichier est trop volumineuse, l'image mettra trop de temps à se charger et votre taux de rebond risque d'augmenter.
  • Utilisez des photos pertinentes. Quelles que soient les images que vous incluez sur votre site Web, veillez à ce qu'elles soient pertinentes pour votre marque.

Si vous gardez ces conseils à l'esprit, vous pourrez tirer le meilleur parti des images que vous insérez sur votre site Web. Ajouter une image en HTML devient plus facile en vous exerçant régulièrement.

Pour résumer : ajoutez des images en HTML

Si vous voulez intégrer des images dans le langage HTML, les points ci-dessus sont quelques-uns des plus importants à retenir. Même si le codage est compliqué lorsqu'on ajoute une image en HTML, il existe des moyens de faciliter le processus.

C'est ici que vous pouvez tirer parti des outils de création de sites Web de Mailchimp. Notre constructeur de sites Web est facile à utiliser et gratuit ; il vous permet de créer un site Web d'e-commerce professionnel en quelques minutes sans dépenser une fortune. De plus, vous aurez accès à des analyses précieuses qui vous donneront une idée de la façon dont les visiteurs utilisent votre site. Associé à notre collection d'outils marketing, vous pouvez facilement mettre toutes les chances du côté de votre site Web et générer plus de trafic.

Partagez cet article