Le Web/Cours/Images et Multimedia

Images et Multimedia

30 min Cours SNT

Enrichir vos pages avec des medias

HTML permet d'integrer des images, videos et audio directement dans les pages web. Ces elements rendent le contenu plus attractif et informatif.

<img>

Images

<video>

Videos

<audio>

Audio

Les formats d'images

Format	Usage	Avantages	Limites
`JPEG / JPG`	Photos, images complexes	Bonne compression, couleurs	Pas de transparence
`PNG`	Logos, icones, transparence	Transparence, qualite	Fichiers plus lourds
`GIF`	Animations simples	Animations, leger	256 couleurs max
`WebP`	Web moderne (tout)	Tres leger, transparence	Vieux navigateurs
`SVG`	Icones, logos vectoriels	Scalable, modifiable CSS	Pas pour photos

Balise <img> : inserer une image

images.html

<!-- Image simple -->
<img src="photo.jpg" alt="Description de l'image">

<!-- Image avec dimensions -->
<img src="logo.png"
     alt="Logo de mon site"
     width="200"
     height="100">

<!-- Image responsive -->
<img src="photo.jpg"
     alt="Paysage"
     style="max-width: 100%; height: auto;">

<!-- Image avec legende -->
<figure>
  <img src="graphique.png" alt="Graphique">
  <figcaption>Legende de l'image</figcaption>
</figure>

L'attribut "alt" : essentiel !

L'attribut alt decrit l'image en texte. C'est obligatoire pour :

Accessibilite

Lecteurs d'ecran pour malvoyants

Chargement lent

Texte affiche si l'image ne charge pas

SEO

Google comprend le contenu

Bonne pratique : Decrivez le CONTENU de l'image, pas juste "image" ou "photo". Exemple : "Chat roux dormant sur un canape"

Balise <video> : integrer une video

Formats video

MP4 (H.264)

Tous navigateurs

WebM

Chrome, Firefox, Edge

OGG

Firefox, Chrome, Opera

video.html

<!-- Video simple -->
<video src="video.mp4" controls>
  Navigateur non compatible.
</video>

<!-- Video avec plusieurs sources -->
<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<!-- Attributs utiles -->
<video
  controls    
  autoplay    
  muted       
  loop        
  poster="apercu.jpg" 
>

Balise <audio> : integrer du son

audio.html

<!-- Audio simple -->
<audio src="musique.mp3" controls>
  Navigateur non compatible.
</audio>

<!-- Audio avec plusieurs sources -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
</audio>

Optimiser les medias

Images

Compresser avec TinyPNG ou Squoosh
Utiliser WebP quand possible
Redimensionner a la taille d'affichage
Utiliser le lazy loading

Videos

Compresser avec Handbrake
Utiliser YouTube/Vimeo pour les longues videos
Proposer plusieurs qualites
Ne pas mettre autoplay avec son

Quiz : Teste tes connaissances

5 questions pour verifier ce que tu as appris sur les medias HTML

A retenir

<img> pour les images, <video> pour les videos, <audio> pour le son
L'attribut alt est obligatoire sur les images
WebP et MP4 sont les formats les plus compatibles
Toujours optimiser les medias pour les performances

Structure HTML Cours suivant : Liens et Navigation