Cours 8¶

Vite¶

Jusqu'à aujourd'hui nous avons utilisé, d'une manière un peu détournée, Vite pour compiler notre CSS. Étant donné qu'on amorce la portion JavaScript du cours, nous pourrons maintenant utiliser la manière plus conventionnelle.

La vrai installation 😅¶

L'installation normale fonctionne avec une logique de Javascript par défaut qu'on a évité volontairement jusqu'à présent pour se concentrer sur le CSS.

Quand on va sur vite.dev , il est dailleurs indiqué d'installer vite avec la commande suivante :

npm create vite@latest timmomo

npm create vite@latest .

Une série de questions vous sera posé. Choisir les options suivantes :

• Select a framework : Vanilla 👈
• Select a variant : JavaScript 👈
• Install with npm and start now ? Yes

Le serveur Vite parti, vous devriez voir ceci dans le navigateur :

Structure d'un projet Vite¶

📁 timmomo
├── 📁 node_modules
├── 📁 public
│    ├── 🎆 favicon.svg
│    └── 🎆 icons.svg
├── 📁 src    
│    ├── 📁 assets
│    │    ├── 🎆 hero.png
│    │    ├── 🎆 javascript.svg
│    │    └── 🎆 vite.svg
│    ├── 📄 counter.js
│    ├── 📄 main.js
│    └── 📄 style.css
├── 📄 index.html
├── 📄 package.json
└── 📄 package-lock.json

Optimiser les médias 🎬¶

En Web, si on ne prépare pas les médias, ceux-ci rendent la page lente et font fuir les visiteurs.

Les formats d'image¶

Chaque format a son usage. La règle d'or : le plus léger qui fait le travail.

CanIUse.com

Compresser, dimensionner et convertir les images¶

1. Compresser afin d'obtenir une version le plus allégée possible, sans grande perte de qualité
   • Squoosh
   • TinyPng
2. Redimensionner pour le contexte d'affichage. Ne servez jamais une image de 4000 px pour l'afficher à 400 px. Ça ralenti le chargement du site et prends du data inutilement sur les téléphones
   • Figma
   • Photoshop
   • image-resizer
3. Convertir lorsqu'on veut optimiser la page Web
   • ezgif : gif à webp
   • ezgif : jpg à avif
   • ezgif : png à avif

Chargement « paresseux » d'une image¶

L'attribut loading="lazy" diffère le chargement des images hors écran jusqu'à ce qu'on approche par le défilement. Gratuit et efficace.

<img src="./assets/images/chat.webp" alt="Chat" loading="lazy">

La vidéo¶

MP4 et WebM sont les deux standards Web.

À des fins de compatibilité, on peut donner plusieurs choix au navigateur et celui-ci choisi en premier ce qu'il sait lire. Par exemple :

<video controls poster="./assets/images/apercu.webp" width="640">
  <source src="./assets/videos/demo.webm" type="video/webm">
  <source src="./assets/videos/demo.mp4" type="video/mp4">
  Votre navigateur ne supporte pas la vidéo.
</video>

<video autoplay loop muted playsinline>
  <source src="demo.webm" type="video/webm">
</video>

Compresser et convertir une vidéo¶

Une vidéo sortie d'un téléphone ou d'un logiciel de montage pèse souvent plusieurs centaines de Mo. Pour le Web, une vidéo de fond de 10 à 20 secondes devrait peser moins de 5 Mo.

1. Compresser et redimensionner
   • HandBrake
   • DaVinci Resolve
   • ezgif : vidéo vers WebM
2. Choisir le bon format
   • MP4 (codec H.264) : lu partout, y compris sur les vieux appareils.
   • WebM (codec VP9) : plus léger, lu par tous les navigateurs modernes.
   • Pour les curieux : le codec AV1, encore plus efficace, peut remplacer VP9 dans un WebM
3. Retirer le son d'une vidéo de fond (muted) : c'est du poids inutile

L'audio¶

Mêmes principes : MP3 (universel) et OGG/Opus ou WebM (plus légers). On peut aussi offrir plusieurs sources.

<audio controls>
  <source src="./assets/audio/theme.webm" type="audio/webm">
  <source src="./assets/audio/theme.mp3" type="audio/mpeg">
</audio>

Classement et nommage¶