Images

Une image est insérée dans une page à l’aide de la balise <img> avec ces attributs essentiels :

1. src : URL de l’image
2. alt : texte alternatif qui s’affiche si l’utilisateur ne souhaite pas ou ne peux pas voir les images, ou peut être dit pour une personne malentendante
3. width et height : largeur et hauteur de l’image en pixels

Source de l’image

Il y a peu à dire sur la source, c’est une URL vers une image de préférence jpg, png ou gif. Vous prendrez garde au droit d’auteur tout particulièrement si le site sera public, ce qui est le cas normalement pour le web !

Texte alternatif

L’attribut alt est obligatoire dans la norme HTML 5 mais souvent oublié. Il permet de décrire l’image par quelques mots si celle-ci ne s’affiche pas, en améliorant l’accessibilité à votre site (site accessible aux handicapés, voir par exemple accessiweb). Il aide aussi au référencement, notamment lorsque l’utilisateur cherche une image par Google Image ou son équivalent ailleurs (le très bon moteur DuckDuckGo a aussi une recherche par image).

On peut considérer deux grands types d’images dans un site :

1. les images purement décoratives pour lesquelles on peut écrire alt=""
2. les images qui apportent une information ou une illustration en rapport avec le contenu de la page, un texte court étant alors recommandé pour alt

<!-- ici l'image va occuper sa taille d'origine,
selon le nombre de pixels contenu dans l'image -->

<img src="img/logo.png" alt="logo"/>

Largeur et hauteur

Il est fortement recommandé de fournir la largeur et la hauteur souhaitée pour l’image afin d’éviter une repagination pendant le chargement de la page avec potentiellement des replacements d’objets pas très agréables. Il faut bien comprendre le processus de chargement. La page HTML est chargée, interprétée et tout de suite affichée par le navigateur, pour ne pas trop faire attendre l’utilisateur pressé, alors même que les ressources intégrées ne sont pas encore chargées. Le navigateur lance ensuite plusieurs requêtes en parallèle pour charger tout cela. En local, vous ne vous en rendez pas compte, mais une fois hébergé sur Internet, les délais de chargement se font ressentir !

Avec une taille fournie, le navigateur affiche la page en réservant la place pour l’image qui va venir. Vous pouvez choisir une dimension indépendamment de la dimension réelle de l’image qu’on appelle parfois résolution, pour une image matricielle. Évitez tout de même de sur-dimensionner l’image au risque de la pixeliser. L’idéal, pour une image qui ne sera pas affichée à sa dimension réelle est de prendre la même dimension. Par exemple pour un jpg de 300×200, vous pouvez l’afficher en 150×100 sans problème mais évitez 600×400, le plus simple étant de laisser 300×200.

La question des images est complexe et nécessite un véritable cours. Nous vous donnons ici quelques éléments de base. Nous verrons par la suite l’usage des styles pour dimensionner une image, avec la possibilité de travailler en pourcentage par rapport au contenant. Ce principe est utile pour les pages « flexibles », qui s’étendent lorsque l’utilisateur agrandie la fenêtre.

N’oublions pas enfin les images vectorielles qui permettent de s’affranchir de ces questions de redimensionnement.

<!-- préférable avec les dimensions -->

<img src="img/logo.png" alt="logo" width="600" height="150"/>

Affichage dans le flux HTML

La balise <img>, comme les suivantes <video> et <audio>, est « en ligne », ce que nous avons appelé pour l’instant « balise de caractère ». Cela signifie que son affichage ne provoque pas de retour à la ligne, l’élément s’affiche dans le texte comme un caractère (en prenant plus de place tout de même !). Pour l’instant, sans utiliser les CSS, nous devons placer l’image dans un bloc <h1> ou <p>, ou alors mettre un <br/> à la suite pour que l’image soit sans texte à gauche et à droite.

Voici donc un petit code et son rendu :

• <img src="logo.png" alt="" width="150" height="150"/>AAAA

• AAAA

Maintenant avec <h1> et <br/> :

• <h1>
     <img src="logo.png" alt=""
      width="60" height="60"/>
     <img src="logo.png" alt=""
      width="60" height="60"/>
     Titre
  </h1>
  blabla<br/>
  <img src="logo.png" alt=""
   width="60" height="60"/>

• Titre

  blabla

  

Son et vidéo

En HTML 5, l’intégration d’un son ou d’une vidéo est très simple, par la balise <audio> ou <video> avec les attributs :

1. src, URL du fichier sonore ou vidéo
2. type, le type MIME qui désigne le type de fichier, facultatif (voir en général sur le type MIME, commentcamarche.net et w3schools pour les type audio et vidéo
3. poster : URL de l’image qui s’affiche à la place de la vidéo avant qu’elle démarre
4. mutex, controls, loop, autoplay : attribut  sans valeur pour respectivement couper le son, afficher les boutons de commande, passer la vidéo en boucle et lancer la vidéo ou le son immédiatement

Quelques exemples :

<video src="/video/journal_tv.webm" autoplay></video>
<audio src="startrek.mp3" type="audio/mp3"></audio>

Vous pouvez utiliser des formats non standards que tous les navigateurs ne prennent pas forcément en charge. Dans ce cas, l’élément source, enfant de audio ou video, permet de fournir plusieurs fichiers dans différents formats. Le navigateur utilise automatiquement le premier qu’il peut afficher, soit nativement soit grâce à une extension que l’utilisateur a installée.

<video>
   <!-- 1er format, pas forcément pris en charge selon les navigateurs et les flux à l'intérieur -->
   <source src="trailer.mp4"/>

   <!-- 2e format standard qui doit passer sans problème, au cas où -->
   <source src="trailer.webm"/>
</video>