Les médias

Les objectifs

Dans de nombreux sites, les médias occupent une place de plus en plus importante. Ces médias, ces images doivent être choisis avec soin et optimisés au mieux pour un chargement rapide sur tous les supports actuels : écran d’ordinateur, de tablette et de smartphone. Dans les pages web, les images sont des contenus « embarqués », car elles ne sont pas directement décrites dans le contenu du fichier HTML. Les fichiers des images sont usuellement placés dans un dossier spécifique dans le dossier du site et elles sont insérées dans la page web en indiquant leur chemin d’accès.

Aujourd’hui, il est presque banal d’insérer de la vidéo et de l’audio dans les pages web. La « bascule » entre les anciennes méthodes à base de plug-in propriétaires, s’est faite avec l’avènement de l’HTML5. Ce dernier a introduit les nouveaux éléments audio et vidéo, reconnu actuellement par tous les navigateurs.

Les images et les formats

Actuellement, il existe trois principaux formats de compression d’image : GIF, JPEG et PNG. Cette compression se fait avec des logiciels dédiés, suite à des traitements pour retoucher les photos.

Le format GIF, pour Graphics Interchange Format, est un format de compression d’images conçu en 1987 par Compuserve et il n’est pas totalement libre. Son extension est .gif. Avec ce format, les images utilisent 256 couleurs au maximum et ne proposent qu’un seul niveau de transparence. Les pixels sont donc soit opaques, soit transparents, ce qui implique des effets d’escalier très disgracieux sur les bordures. Si l’image initiale possède moins de 256 couleurs, ce format est non destructif, s’il y en a plus de 256, la compression est destructive. Le format GIF est donc réservé aux images de petites dimensions, comme des icônes, des boutons, des logos, possédants de larges aplats de couleurs.

Le format JPEG, pour Joint Photographic Experts Group, est un format qui a été normé en 1991 et publié en 1992. Son extension usuelle est .jpg, plus rarement .jpeg. Les images compressées dans ce format peuvent conserver des millions de couleurs et ne peuvent pas utiliser la transparence. Notez bien que c’est un format de compression destructif qui provoque donc une destruction irrémédiable de couleurs...

Les images avec l’élément <img>

1. L’attributs scr

L’élément <img> est fait pour insérer des images d’illustration directement liées au contenu rédactionnel. Le premier attribut obligatoire est src. Cet attribut permet d’indiquer le chemin d’accès à l’image qui doit être affichée. Le chemin d’accès s’indique usuellement relativement à la page contenant l’élément <img>. Voici quelques exemples :

<img src="mon-image.png"> : l’image se trouve dans le même dossier que la page HTML.
<img src="images/mon-image.png"> : l’image se trouve dans un sous-dossier nommé images, placé dans le dossier contenant la page HTML.
<img src="../mon-image.png"> : l’image se trouve dans le dossier parent du dossier contenant la page HTML.

Mais il est aussi possible d’afficher une image déjà publiée sur le Web, avec un chemin absolu : <img src="http://www.mon-site.org/ images/mon-image.png">. C’est une solution qu’il faut utiliser avec parcimonie, il faut être sûr des droits d’auteur et il se peut que l’image vienne à être supprimée du site dans laquelle elle se trouve.

2. L’attribut alt

L’attribut alt permet de renseigner le texte alternatif à l’image, si celle-ci ne peut...

Les illustrations avec l’élément <figure>

1. L’élément <figure>

Les images permettent d’illustrer directement un contenu et les deux sont intimement liés. Les illustrations peuvent se suffire à elles-mêmes et n’ont pas besoin d’un texte rédactionnel pour être compréhensibles. Voilà la principale différence sémantique entre l’utilisation d’une image et d’une illustration.

C’est l’élément <figure> qui permet d’insérer une illustration dans une page web. Cet élément possède une balise d’ouverture et une balise de fermeture.

<figure>  
  ...  
</figure>

2. L’élément <figcaption>

L’élément <figcaption> permet d’afficher une légende à l’illustration. Cet élément se place n’importe où dans l’élément <figure>.

Voici un exemple simple d’utilisation de ces deux éléments, avec l’utilisation de trois images :

<!doctype html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>Ma page web</title>  
</head>  
<body>  ...

Le multimédia, les formats et les codecs

Les fichiers multimédias audio-vidéo bruts ne sont pas adaptés à une diffusion sur Internet. Il faut au préalable les compresser avec un codec et les publier avec un format reconnu par les navigateurs. Sans entrer dans des considérations trop techniques concernant le multimédia, voici quelques points sur la compression et la diffusion du multimédia.

Pour compresser un fichier, il faut utiliser un codec. Cet acronyme signifie Coder-Décoder. Il faut savoir qu’il existe de très nombreux codecs multimédias : VP9, MP3, AAC, H.265… Ensuite, pour diffuser ces fichiers compressés, il faut « emballer » ces fichiers dans un format de transport. Citons .ogg, .mp4 et .webm.

En ce qui concerne la diffusion, il est préconisé d’utiliser un format open source et gratuit. Plusieurs solutions sont alors disponibles :

Mozilla, Opera et Google utilisent les codecs Theora et Vorbis, et .ogg pour le format de diffusion.
Apple et Microsoft utilisent les codecs H.264 et MP4, et .mp4 pour le format.
Google propose les codecs VP8 et Vorbis, et .webm pour le format. Ces solutions sont open source et gratuites.

À cette URL : https://developer.mozilla.org/fr/docs/Web/Media/Formats, des informations très techniques sur les codecs et les formats de diffusion sont disponibles. Dans le titre...

La vidéo

1. L’élément <vidéo>

L’élément <vidéo> permet d’insérer un fichier vidéo dans vos pages web :

<vidéo>  
  ...  
</vidéo>

Dans l’élément <vidéo>, c’est l’attribut src qui indique le chemin d’accès à la source du fichier vidéo à utiliser.

<vidéo src="venise.mp4"></vidéo>

En affichant la page web, seule la première image de la vidéo est affichée. Pour le moment, avec ce code, il n’y a aucun moyen d’utiliser la vidéo.

2. Les contrôles

Maintenant, il faut donner la possibilité de jouer cette vidéo. Pour cela, il suffit d’ajouter l’attribut booléen autoplay à l’élément <vidéo> :

<vidéo src="venise.mp4" autoplay></vidéo>

Cet attribut permet de jouer automatiquement la vidéo au chargement de la page. Mais le visiteur n’aura aucun moyen de gérer lui-même la diffusion de la vidéo.

Pour offrir les moyens de contrôler la vidéo, il faut plutôt utiliser l’attribut booléen controls :

<vidéo src="venise.mp4" controls></vidéo>

Dans ce cas, chaque navigateur devra...

L’audio

L’insertion d’un fichier audio est très similaire à ce qui a été vu pour la vidéo. L’élément à utiliser est <audio> et l’attribut src indique quel est le fichier à utiliser. Il faut ajouter l’attribut controls pour afficher les boutons de contrôle de l’audio. Les attributs autoplay, loop et preload, sont aussi disponibles.

<audio src="musique.mp3" controls preload autoplay loop></audio>

Voici l’affichage obtenu dans Google Chrome :

Comme précédemment, il est possible de proposer plusieurs sources, avec différents formats de diffusion :

<audio controls>  
  <source src="musique.mp3">  
  <source src="musique.webm">  
</audio>