Bonjour, aujourd'hui, on va parler d'images.
Il y a beaucoup de balises en HTML, et la plupart d'entre elles sont assez explicites.
Mais la balise image est celle où nous voulons vraiment l'explorer,
pour nous assurer que vous l'utilisez au meilleur but possible.
Donc, à ce stade, vous avez entendu parler de beaucoup de balises différentes.
Mais les images sont une où vous avez vraiment besoin de comprendre
quels sont les différents attributs.
Il existe de nombreux types de fichiers différents qui sont pris en charge par HTML.
Les plus courants sont : JPEG, GIF et PNG, et vous allez les voir un peu.
Il y a aussi SVG et BMP.
Il y a d'autres options. La
chose la plus importante est que peu importe le type de fichier que vous utilisez,
vous devez inclure les différentes extensions de fichiers.
C' est le .jpg, le .gif, le .png.
La chose supplémentaire à comprendre est que lorsque quelqu'un regarde votre page,
chaque image que vous avez sur votre page doit être téléchargée, donc la
taille peut vraiment être un facteur.
Si vous vous attendez à ce que la plupart des personnes qui consultent votre page la regardent à
partir d'un téléphone mobile,
vous pouvez penser à utiliser des tailles de fichiers plus petites, car chaque image
nécessite une requête HTTP pour être chargée sur le navigateur.
Donc, quand on pense à la taille des images, la plupart des gens pensent,
juste une sorte de, le visuel à quel point il est grand à l'écran.
Mais en informatique, nous parlons beaucoup plus de la taille des pixels.
Par défaut,
le navigateur va ouvrir votre image dans la même taille qu'elle a été enregistrée.
Et c'est vraiment, vraiment rare que cette taille soit optimale.
Vous êtes probablement tous allés sur un site où vous y êtes arrivé et
l'image était vraiment petite et vous n'êtes pas en mesure de le rendre plus grand.
Ou peut-être,
ce que je trouve encore plus ennuyeux, c'est quand l'image prend tout l'écran et
que vous êtes obligé de faire défiler en essayant de voir le tout.
Donc je vais vous montrer deux solutions rapides pour changer la taille de l'image.
La première consiste à modifier le fichier réel et la seconde consiste à utiliser les
attributs width et height de la balise image.
Maintenant, si vous allez utiliser et éditer pour changer votre fichier,
ce que vous devez comprendre, c'est que les éditeurs modifient ces images de façon permanente.
Cela ne fonctionne que sur ce que j'appelle des fichiers locaux.
Vous ne pouvez modifier que les images que vous avez sur votre ordinateur.
Si vous essayez d'utiliser une image que vous avez trouvée ailleurs sur le Web et que
vous y êtes lié, vous ne pouvez pas modifier la taille de manière permanente.
Donc, si vous utilisez un Mac,
il existe un logiciel intégré appelé Preview que vous pouvez utiliser pour modifier la taille.
Et si vous utilisez Windows, il existe également un programme intégré appelé Paint.
L' un ou l'autre vous donne la possibilité de redimensionner vos images.
Cependant, tout comme une note de côté, aucun d'entre eux n'est le meilleur
choix si vous voulez vraiment entrer dans différents graphiques d'image.
Ce que la plupart d'entre nous ont tendance à faire, c'est utiliser des attributs.
Maintenant, l'une des choses dont je parle et dont
tout le monde parle est l'importance de garder le style et le contenu séparés.
Et j'essaie vraiment d'encourager les gens à ne pas mettre de type d'
attributs de style dans leur code.
Cependant, la balise image a tendance à être une exception,
car elle inclut à la fois un attribut width et height.
Allons-y et passons à travers, et
je te montrerai une photo du site quand on aura fini.
La première option serait simplement d'utiliser la taille de l'image par défaut.
J' ai ma balise image, et j'ai mes deux attributs requis.
Source, où vous pouvez trouver l'image, et le texte alternatif.
L' option suivante serait d'utiliser la largeur en pixels, donc
dans ce cas, j'ai ajouté l'attribut appelé width et je l'ai codé en dur.
C' est ce que vous appelez quand vous lui donnez une taille que vous voulez qu'elle soit toujours.
Et je l'ai codé en dur à 500 pixels.
Vous remarquerez peut-être que je n'ai réglé que la largeur et que je n'ai pas réglé la hauteur.
C' est bon.
Le navigateur déterminera automatiquement combien il doit ajuster la hauteur afin
qu'il reste proportionnel à la largeur.
L' option suivante consiste à utiliser la largeur et la hauteur.
Vous le faites si vous voulez vous assurer que votre photo tient à l'intérieur
d'une boîte de taille exacte.
C' est vraiment agréable pour le dimensionnement, mais il n'a pas
toujours l'air que vous attendez, et nous verrons cela dans une seconde.
La dernière option, qui peut être votre meilleure option, est d'utiliser des pourcentages.
Dans ce cas, si vous remarquez, j'ai la largeur = 50%.
Ce que cela veut dire, c'est de prendre l'ampleur de l'image et de la
réduire de 50 %.
Maintenant, à mesure que nous allons plus loin dans la programmation et CSS, vous comprendrez que c'est 50%
de ce qu'il devrait être, ne signifie pas nécessairement la taille de l'image originale.
Cela dépend si vous êtes à l'intérieur d'un conteneur.
Donc ici, j'ai eu chacune des options, la valeur par défaut, la largeur, la largeur et
la hauteur, et le pourcentage.
Alors allons de l'avant et jetons un coup d'oeil à ce que ça ressemble.
Donc, ce que vous pouvez voir ici sont ces quatre options différentes que j'avais pour
afficher mon image.
En haut, j'ai ma taille d'image par défaut.
C' est juste à quel point la photo était grande quand je l'ai prise.
Une taille plus bas, et
vous pouvez voir que c'est là que j'ai codé en dur la largeur de l'image.
J' ai réglé la largeur à 500 pixels.
Ma maison a toujours l'air parfaitement agréable, et tout est proportionnel.
La troisième option est l'image asymétrique.
C' est là que j'ai codé en dur à la fois la hauteur et la largeur, et
je n'ai pas vraiment réfléchi à la façon dont ils allaient agir proportionnellement.
Donc, en faisant cela, vous pouvez voir que c'est un peu écrasé, et
pas la meilleure image.
Ce dernier est celui que j'ai défini proportionnellement, et
vous pouvez voir qu'il est environ la moitié de la taille de la fenêtre du navigateur.
Ce que je veux que vous regardiez maintenant, c'est ce qui se passe quand je redimensionne la fenêtre.
Alors que je vais ici, vous pouvez voir que les trois premières images restent
exactement de la même taille, mais la partie inférieure va réellement grandir ou rétrécir.
Et c'est la même chose si je le rends plus petit et recharge la page.
Donc, penser à différentes choses le long de cette ligne est la façon dont vous voulez que votre page
regarde quand les gens peuvent regarder un grand écran, ou sur un écran mobile.
C' est à quelque chose que tu veux penser.
La dernière chose que je veux vous signaler, dont je vais parler dans
une seconde, c'est cette petite image que malheureusement,
c'est très difficile à voir et il n'y a pas vraiment de bon moyen pour moi de faire exploser.
Mais je veux vous parler de l'ajout d'images dans la barre de titre.
Donc, si vous voulez mettre un favicon dans le titre de votre page Web,
c'est légèrement différent de l'utilisation d'une image régulière.
Au lieu de cela, ce code doit entrer dans la section tête de votre code, pas dans le corps.
Ce que vous faites est que vous allez réellement entrer et
vous allez inclure un lien indiquant que c'est un type d'icône de lien.
Nous utilisons une image PNG.
Et puis vous mettez le lien vers l'image elle-même.
Juste comme note de côté, vous ne pouvez pas utiliser JPEG ou GIF pour les logos.
Il doit s'agir d'une image d'icône spéciale ou d'un .png.
Enfin, revenons à parler du texte alternatif,
l'attribut que vous souhaitez ajouter à toutes vos images.
Quel est le but de cela, et pourquoi avons-nous besoin de quelque chose ?
Eh bien, ce qu'il fait, c'est qu'il offre une alternative textuelle au contenu non textuel.
Donc, chaque fois que vous avez une image, vous voulez vous assurer
que les personnes qui ne peuvent pas voir l'image peuvent toujours comprendre le contenu derrière elle.
Il pourrait donc être lu par les lecteurs d'écran.
Parfois, il est affiché à la place des images, donc si votre fichier se casse,
vous pouvez toujours voir une petite note indiquant ce qu'ils sont censés voir.
Enfin, il fournit également un sens sémantique pour les moteurs de recherche.
Donc, si vous mettez vraiment bon texte alt dans votre page,
cela aidera les moteurs de recherche à réaliser quel est le contenu de votre page.
Alors, comment pouvons-nous créer un bon texte alt ?
Il y a vraiment quatre choses que vous voulez chercher tout de suite.
Vous voulez être extrêmement précis.
Tu veux être succinct.
On ne veut pas être redondants.
Et nous ne voulons pas inclure de titres comme image de ou graphique de.
Donc, le premier, soyez précis.
C' est assez explicite.
Mettez uniquement des choses qui définissent spécifiquement l'image que vous regardez.
Sois succinct, ça veut dire qu'il n'y a pas de suite.
Vraiment, c'est censé être une idée rapide de ce qu'il s'agit de la photo.
Lorsque nous parlons de ne pas être redondant, ce que nous disons est de
ne pas inclure de texte alt qui est déjà dans le contenu de la page.
Si vous avez l'image, et dans un paragraphe en dessous,
vous la décrivez en détail, ne mettez pas ce même contenu dans le texte alt.
Et enfin, celui de ne pas inclure l'image de,
graphique de, qui revient vraiment juste à être juste succinct.
Il est parfois acceptable de laisser votre texte alt vide.
Donc, si vous avez des images qui sont juste décoratives, des logos, des choses le long de cette ligne,
vous pouvez aller de l'avant et juste mettre alt égaux, puis les doubles guillemets.
Mais il est très important que vous ne sautez pas l'attribut alt tous ensemble.
Le problème avec cette route, c'est que vous ne dites pas vraiment aux gens si
vous pensez ou non à l'accessibilité.
Ils ne savent pas si le texte alt est manquant parce qu'il n'est pas informatif ou
parce que vous avez juste oublié de le mettre.
Ok, alors allons passer en revue certaines des choses que nous savons sur les images.
Premièrement, les extensions de fichiers sont incroyablement importantes.
Vous devez vous assurer qu'ils correspondent au format de fichier.
Le nom de fichier de votre image est quelque chose que vous allez vouloir
garder très court et descriptif afin que vous puissiez éviter d'utiliser des fautes de frappe.
Et enfin les chemins de fichier, ou où toute cette longue chose
que vous mettez dans la source où vous avez images/images/extension.
Vous voulez vous assurer que vous les orthographiez correctement.
Si vous pouvez faire ces trois choses, il
vous sera plus facile d'utiliser les images avec succès.
Et pour l'instant, allons de l'avant et simplement styliser la hauteur et la
largeur dans le code HTML lui-même.
Même si je parle souvent de séparer le contenu du style, il est très
courant d'aller de l'avant et d'incorporer ces deux éléments lorsque vous faites des images.