Optimiser les médias¶

Pourquoi optimiser les médias ?¶

Optimiser les médias est crucial pour améliorer la performance d'un site web. Les images et vidéos sont souvent les éléments les plus lourds d'un site, et leur optimisation peut avoir un impact significatif sur le temps de chargement et l'expérience utilisateur.

Dans le cadre du projet portfolio¶

Critère d'évaluation: C'est un indicateur du critère 1 de votre grille : «Traitement optimisé des médias pour le web : format adapté à l'usage, compression appropriée, dimensions adéquates».

Contrôle de la qualité (QA): Le scénario 11 du gabarit QA le teste.

Retour aux consignes QA du portfolio

Mesurer d'abord¶

1. Ouvrez votre site en ligne, puis l'inspecteur (F12) → onglet Réseau (Network).
2. Cochez Désactiver le cache (Disable cache), puis filtrez sur [Img].
3. Rechargez la page (Ctrl + F5).
4. En bas de l'onglet : le nombre x d'images (x / y requests) et le poids total x transféré (x kB / y kB transferred).
5. Triez la colonne Taille (Size) : les plus lourdes en haut. Ce sont elles qu'on traite en premier.

1. Le bon format¶

Convertir et compresser : deux options¶

2. Les bonnes dimensions¶

Une image de 4000px de large affichée dans une carte de 400px : le navigateur télécharge 10 fois trop de pixels en largeur (100 fois trop au total), puis les jette.

Règle simple : environ 2 fois la largeur d'affichage, pour rester net sur les écrans haute densité (ex. une carte affichée à 400px → une image de 800px).

Pour connaître la largeur d'affichage : inspecteur → survolez l'image dans l'onglet Éléments, sa taille s'affiche. Redimensionnez ensuite avec l'une des deux options ci-dessus.

3. Le chargement différé : loading="lazy"¶

Par défaut, le navigateur télécharge toutes les images de la page dès l'ouverture, même celles tout en bas que le visiteur ne verra peut-être jamais. Avec loading="lazy", une image n'est téléchargée qu'à l'approche du défilement.

<img src="assets/images/biome.webp"
     alt="Interface mobile de Biome : carte des sentiers"
     loading="lazy">

Dans vos cartes générées en JavaScript¶

Une seule ligne de plus dans le gabarit de createProjectCard(), et toutes vos cartes en profitent :

return `
  <article class="project-card">
    <img class="project-card__image"
         src="${project.image}"
         alt="${project.title}"
         loading="lazy">
    ...
  </article>
`;

4. Réserver la place : width et height¶

Sans dimensions dans le HTML, le navigateur ne sait pas quelle place prendra l'image avant qu'elle arrive : le texte s'affiche, puis saute vers le bas quand l'image se charge. Avec width et height, la place est réservée d'avance.

<img src="assets/images/biome.webp"
     alt="Interface mobile de Biome : carte des sentiers"
     width="800" height="600"
     loading="lazy">

Ce sont les dimensions réelles du fichier. Votre CSS garde le contrôle de la taille affichée :

.project-card__image {
  width: 100%;
  height: auto;
}

Le navigateur s'en sert seulement pour connaître la proportion (ici 4:3) et réserver la bonne hauteur.

Les vidéos¶

Une vidéo pèse souvent plus lourd que tout le reste du site réuni. La règle de base : hébergez vos vidéos de projet sur YouTube ou Vimeo, et intégrez-les dans votre portfolio. C'est leur serveur qui fait le travail : compression, qualité adaptée à la connexion, lecture sur tous les appareils.

1. YouTube ou Vimeo : récupérer le code d'intégration¶

  <iframe width="560" height="315" 
  src="https://www.youtube.com/embed/ID_DE_LA_VIDEO" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; 
         encrypted-media; gyroscope; picture-in-picture; 
         web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen></iframe>

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe
    src="https://player.vimeo.com/video/ID_DE_LA_VIDEO"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture;
           clipboard-write; encrypted-media; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    style="position:absolute;top:0;left:0;
           width:100%;height:100%;"
    title="Titre de la vidéo"></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

2. Adapter le code avant de le coller¶

Le code copié tel quel fonctionne, mais il n'est pas prêt pour votre portfolio. Trois ajustements :

<iframe class="project-video"
  src="https://www.youtube.com/embed/ID_DE_LA_VIDEO"
  title="Biome : démonstration de l'application"
  loading="lazy"
  allow="encrypted-media; picture-in-picture; fullscreen"
  allowfullscreen></iframe>

.project-video {
  width: 100%;
  aspect-ratio: 16 / 9;  /* garde la proportion, sans calcul */
  border: 0;
}

Votre vidéo n'est pas en 16:9? Ajustez aspect-ratio : 4 / 3 pour du 4:3, 9 / 16 pour une vidéo verticale.

3. Une courte vidéo dans votre site : la balise <video>¶

Pour un court extrait (une animation en boucle, un aperçu de quelques secondes), un fichier .mp4 dans votre dépôt peut remplacer une vidéo hébergée, ou un GIF.

Mais comme pour les images, on n'ajoute jamais une vidéo telle qu'elle sort du logiciel : une exportation de 20 secondes peut peser 50 Mo. Visez :

• court : 30 secondes au plus;
• léger : quelques Mo au plus;
• la bonne taille : la résolution d'affichage (souvent 1280 px de large suffit), pas du 4K;
• sans son, s'il joue tout seul.

Compresser : deux options

Ensuite, deux usages, deux codes :

<video autoplay muted loop playsinline
       poster="assets/images/biome-poster.webp">
  <source src="assets/videos/biome-apercu.mp4"
          type="video/mp4">
</video>

<video controls preload="none"
       poster="assets/images/biome-poster.webp">
  <source src="assets/videos/biome.mp4" type="video/mp4">
</video>

Mesurer après, et le documenter¶

Refaites la mesure de la première section. Dans l'onglet Correctifs de votre fichier QA :

• Correctif apporté : « Images converties en WebP et redimensionnées à 800px, loading="lazy" sur les cartes »;
• Comment j'ai validé : « Onglet Réseau (Network), filtre Img : 8,4 Mo → 620 Ko ».

Un avant et un après chiffrés : c'est exactement la preuve qu'attend la grille.

Références¶

• Chargement différé des images (lazy loading) (MDN)
• L'élément <img> (MDN)
• Squoosh: outil en ligne pour compresser vos images : convertir et compresser dans le navigateur