Regardez n'importe quelle page Web en ligne aujourd'hui et vous remarquerez qu'elles partagent certaines choses en commun. Les images sont l'un de ces traits communs. Les bonnes images ajoutent beaucoup à la présentation d'un site Web. Certaines de ces images, comme le logo d'une entreprise, aident à marquer le site et à connecter cette entité numérique à votre entreprise physique.
Pour ajouter une image, une icône ou des graphiques à votre page Web, vous devez utiliser la balise dans le code HTML d'une page. Vous placez le IMG balise dans votre code HTML exactement à l'endroit où vous souhaitez afficher le graphique. Le navigateur Web qui rend le code de la page remplacera cette balise par le graphique approprié une fois la page affichée. Pour revenir à l'exemple de notre logo d'entreprise, voici comment ajouter cette image à votre site:
Attributs d'image
En regardant le code HTML ci-dessus, vous verrez que l'élément comprend deux attributs. Chacun d'eux est requis pour l'image.
Le premier attribut est le "src". Il s’agit littéralement du fichier image que vous souhaitez afficher sur la page. Dans notre exemple, utilisons-nous un fichier appelé "logo.png". C'est le graphique que le navigateur Web afficherait lors du rendu du site.
Vous remarquerez également qu'avant ce nom de fichier, nous avons ajouté des informations supplémentaires, "/ images /". Ceci est le chemin du fichier. La barre oblique initiale indique au serveur de regarder à la racine du répertoire. Il recherchera alors un dossier appelé "images" et enfin le fichier appelé "logo.png". L'utilisation d'un dossier appelé "images" pour stocker tous les graphiques d'un site est une pratique assez courante, mais votre chemin de fichier serait modifié pour tout ce qui est pertinent pour votre site.
Le deuxième attribut requis est le texte "alt". C'est le "texte alternatif" qui s'affiche si le chargement de l'image échoue pour une raison quelconque. Ce texte, qui dans notre exemple, indique "Logo de la société" serait affiché si le chargement de l'image échouait. Pourquoi cela arriverait-il? Une variété de raisons:
- Chemin de fichier incorrect
- Nom de fichier incorrect ou faute d'orthographe
- Erreur de transmission
- Le fichier a été supprimé du serveur
Ce ne sont que quelques possibilités pour lesquelles notre image spécifiée peut être manquante. Dans ces cas, notre texte alternatif serait affiché à la place.
Le logiciel de lecture d'écran utilise également le texte alternatif pour "lire" l'image à un visiteur malvoyant. Comme ils ne peuvent pas voir l'image comme nous le voyons, ce texte leur permet de savoir en quoi consiste l'image. C'est pourquoi alt text est requis et qu'il devrait indiquer clairement quelle est l'image!
Un malentendu courant du texte alternatif est qu'il est destiné aux moteurs de recherche. Ce n'est pas vrai. Bien que Google et les autres moteurs de recherche lisent ce texte pour déterminer la nature de l'image (rappelez-vous, ils ne peuvent pas "voir" votre image non plus), vous ne devez pas écrire de texte de remplacement pour attirer uniquement les moteurs de recherche. Auteur clair texte alt qui est destiné aux humains. Si vous pouvez également ajouter à la balise des mots-clés qui attirent les moteurs de recherche, c'est très bien, mais assurez-vous toujours que le texte de remplacement remplit sa fonction principale en indiquant quelle est l'image pour toute personne ne pouvant voir le fichier graphique.
Autres attributs
le IMG La balise a également deux autres attributs que vous pouvez voir en cours d'utilisation lorsque vous mettez un graphique sur votre page Web - la largeur et la hauteur. Par exemple, si vous utilisez un éditeur WYSIWYG tel que Dreamweaver, cette information est automatiquement ajoutée à votre place. Voici un exemple:
le LARGEUR et LA TAILLE les attributs indiquent au navigateur la taille de l'image. Le navigateur sait alors exactement combien d’espace dans la présentation doit être alloué et il peut passer à l’élément suivant de la page pendant le téléchargement de l’image. Le problème avec l'utilisation de ces informations dans votre code HTML est que vous ne voulez pas toujours que votre image s'affiche à cette taille exacte. Par exemple, si vous avez un site Web réactif dont la taille change en fonction de l'écran des visiteurs et de la taille de l'appareil, vous souhaiterez également que vos images soient flexibles. Si vous indiquez dans votre code HTML la taille fixe, il vous sera très difficile de remplacer par des requêtes multimédias CSS réactives. Pour cette raison, et afin de maintenir une séparation de style (CSS) et de structure (HTML), il est recommandé de ne PAS ajouter d'attributs width et height à votre code HTML.
Remarque: si vous laissez ces instructions de dimensionnement désactivées et que vous ne spécifiez pas de taille en CSS, le navigateur affichera l’image par défaut, sa taille native.
Edité par Jeremy Girard
