Que sont les balises d’image HTML? Lorsque vous chargez une page Web, les images doivent apparaître rapidement. Les humains sont des créatures visuelles et nous aimons afficher des pages Web avec des images colorées. Ils attirent notre regard et notre attention. Ces images sont signalées par des balises d’image, un type de code qui indique au serveur du site Web où trouver les images, comment les charger et comment en faire une fois qu’elles ont été chargées. Les balises d’image sont des instructions sur la façon d’afficher une image, car les images ne sont pas réellement incorporées dans une page. Les images sont des fichiers qui sont récupérés et affichés sur la page en fonction du code ou de la balise d’image utilisée. Le code peut modifier les attributs ou la fonctionnalité de l’image lors de son chargement. Vous pouvez envoyer des signaux SEO importants en optimisant les images de votre site Web. Nous discutons de cela en profondeur avec notre guide sur le référencement d’image ici.

Qu’est-ce qu’une balise d’image HTML?

Examinons de plus près les balises d’image:

Dans le code ci-dessus, vous pouvez voir 2 attributs: SRC et ALT.

  • SRC indique le chemin vers l’image affichée
  • ALT indique le texte alternatif à afficher si l’image elle-même ne peut pas être affichée
  • Après l’attribut ALT, vous pouvez voir les attributs de hauteur et de largeur. Vous pouvez définir manuellement les dimensions d’une image, ce qui peut être pratique si vous avez des exigences d’espace strictes sur une page Web. Veillez à ne pas déformer une image lors de la définition des dimensions de votre image; cela peut créer une mauvaise expérience utilisateur.

    Attribut SRC

    L’attribut source (SRC) crée un chemin vers le fichier image. Si le lien est rompu, si le fichier a été déplacé ou s’il y a une faute de frappe dans le code, vous verrez une icône « image cassée » sur la page.

    Attribut ALT

    L’attribut ALT spécifie le texte alternatif des images si elles ne peuvent pas ou ne se chargent pas. Le texte alternatif est utile pour les personnes ayant une vision limitée. Les outils de synthèse vocale peuvent indiquer au spectateur quelle image est affichée. C’est également bon pour les résultats de référencement. Recherche d’images Google, quelqu’un?

    Largeur et hauteur

    Ces attributs dictent la hauteur et la largeur d’une image. Si vous utilisez ces attributs avec une balise d’image, il est recommandé de définir à la fois la hauteur et la largeur, afin que la page sache combien d’espace sur la page est nécessaire pour afficher l’image. Si vous ne spécifiez pas les deux, vous risquez de rencontrer des problèmes pendant que la page tente de charger l’image. Les attributs de largeur et de hauteur se présentent comme suit: Ce code charge le mage du logo Semrush avec le nom de fichier img_logo.jpg. L’image aurait une largeur de 500 pixels et une hauteur de 600 pixels.

    Autres attributs

    Il existe quelques autres attributs que vous pouvez utiliser dans une balise d’image. Un autre que vous pouvez utiliser pour le formatage est l’attribut «Aligner». Cet attribut place votre image là où vous le souhaitez sur la page. Avec les créateurs et éditeurs de pages Web modernes de nos jours, cette balise est pour la plupart redondante. Vous pouvez cliquer et faire glisser et insérer des images où vous le souhaitez. Cependant, certains codeurs utilisent toujours la balise align pour aligner leurs images là où ils le souhaitent. Des exemples d’utilisation de cet attribut incluent «gauche» et «droite», qui placent l’image soit sur le côté gauche, soit sur le côté droit de la page. « Text top » aligne l’image avec l’exemple de texte le plus haut; «Abs bottom» aligne votre image avec le bas de la ligne actuelle sur laquelle elle est placée.

    Comment ajouter une balise d’image HTML

    Si vous souhaitez ajouter manuellement une image à votre page, nous vous montrerons comment procéder.

    Ajouter une image standard

    Ce code trouvera et insérera une image du logo Semrush, avec une largeur et une hauteur de 50 x 50 pixels. Cette image serait alignée avec le bas de l’écran. Ce code insère également une image de 50 par 50 pixels du logo Semrush. Le style est « flottant à droite », ce qui signifie que l’image sera sur le côté droit de la page. Les éléments à proximité circuleront autour de l’image, un peu comme un habillage de texte dans un traitement de texte.

    Ajouter une bordure d’image

    Le code ci-dessus ajoutera l’image carrée de 50 x 50 pixels du logo Semrush et ajoutera une bordure verte épaisse de 10 pixels. Cela peut aider à mettre en évidence des images importantes sur une page et à attirer l’attention sur l’endroit où vous voulez qu’un utilisateur regarde.

    Ajouter des marges gauche et droite à une image

    Ce code charge le logo Semrush, l’aligne verticalement au milieu de la page et ajoute une marge de largeur de 50 pixels sur les côtés gauche et droit de l’image. Désormais, aucun texte n’apparaîtra à moins de 50 pixels de chaque côté de l’image.

    Ajouter des marges supérieure et inférieure à une image

    Tout comme ce qui précède, le logo Semrush se chargera, aligné à nouveau avec le milieu de la page, mais comportera désormais une marge de 50 pixels au-dessus et en dessous de l’image. Aucun autre élément ne viendra à moins de 50 pixels de cette image, en haut ou en bas. Les éléments visuels ajoutent à l’expérience utilisateur d’une page. Si une page semble attrayante, les gens resteront plus longtemps et Google en prendra note. Les balises d’image ancrent l’image pour qu’elle apparaisse par rapport aux autres éléments de la page Web. Vous pouvez utiliser des balises d’image pour configurer l’apparence de l’image et l’optimiser pour les robots des moteurs de recherche et les utilisateurs. Les balises que vous utilisez ont un impact sur la vitesse de chargement de vos pages, ce qui peut affecter l’expérience utilisateur de votre site Web. Tous les navigateurs actuels prennent en charge ces codes de balise d’image. Peu importe le navigateur que vous ou vos visiteurs utilisez. Les balises d’image se traduisent dans tous les navigateurs pour une expérience cohérente. Vous utilisez une balise d’image lorsque l’image fait partie du contenu et non de la conception de la page elle-même. Par exemple, si vous disposez d’un modèle de page qui comprend une image de votre logo ou quelque chose de similaire, vous n’utiliserez pas de balise d’image dans le code. Un modèle avec des images doit être cohérent sur l’ensemble de votre site Web. Votre site Web chargerait le modèle contenant l’image, puis vous ajouteriez votre contenu à cette page. La balise d’image spécifie comment et où l’image sera utilisée et présentée dans le contenu. L’outil d’audit de site propose plus de 130 vérifications de site Web qu’il peut effectuer sur votre site Web, dont quelques-uns pour les balises d’image et les liens connexes. L’outil d’audit de site peut voir si les liens sont toujours exacts ou s’ils ont été rompus. Il est plus facile que jamais de corriger les erreurs d’image, de réparer les liens d’image brisés et d’améliorer l’expérience utilisateur de votre site Web. Vous pouvez utiliser l’outil Audit de site en tangente avec un projet. Si vous n’avez pas de projet actuellement configuré, vous devrez en configurer un avant d’utiliser l’outil d’audit de site. Une fois l’outil ouvert, vous serez invité à configurer la portée de l’exploration de l’outil: une fois l’audit terminé, l’outil renverra une liste de problèmes à examiner, y compris les images concernant: 3 principaux problèmes pouvant survenir concernant les images sont:

  • L’image n’est plus localisée: vous devrez localiser l’image ou son code et modifier son URL source
  • L’image a été supprimée: remplacez l’image par une nouvelle image et mettez à jour le lien
  • Une image n’est plus nécessaire: supprimez l’image et le code de votre page
  • Points clés à retenir

    Les balises d’image font partie de la stylisation et de l’optimisation de votre page Web, de l’expérience utilisateur et du référencement. Vous pouvez ajuster ou positionner vos images en ajoutant des attributs supplémentaires – comme «largeur» ou «aligner» – à vos balises d’image. Prévisualisez toujours votre site Web lorsque vous apportez des modifications pour vous assurer que les attributs que vous ajoutez au code d’image ne brisent pas l’image ou votre site Web. Utilisez un outil d’audit de site pour vous assurer que votre code d’image est précis et que vos images peuvent être trouvées et vues.

    Categories: SEO

    S’abonner
    Notification pour
    guest

    Commentaires
    Commentaires en ligne
    Afficher tous les commentaires
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x