Ajout infos Lazy Load

coursweb · Jan 16, 2023 · cfc6e6c · cfc6e6c
1 parent 5b0f713
commit cfc6e6c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/33-lazyload.md b/33-lazyload.md
@@ -0,0 +1,33 @@
+---
+layout: page
+title: Lazy load
+---
+
+La technique du "lazy load" consiste à ne charger des ressources que lorsqu'elles sont nécessaires pour l'affichage visible.
+
+Ainsi, des images qui se situent "hors-champ" lors du chargement initial, ne seront chargées que lorsque le scroll les fait entrer dans zone visible.
+
+Cette méthode a été utilisée depuis de nombreuses années en ayant recours à des solutions JavaScript.
+
+Désormais, un attribut HTML a été défini, qui est progressivement adopté par les navigateurs - [voir l'état actuel sur CanIUse](https://caniuse.com/loading-lazy-attr). L'attribut est supporté notamment:
+
+- Depuis 2019 dans Chrome (77)
+- Depuis 2020 dans Edge (79)
+- Depuis 2020 dans Firefox (75)
+- Depuis décembre 2022 dans Chrome pour Android (108)
+- Depuis 2022 dans Safari (15.4)
+
+En janvier 2023, cet attribut est pris en compte dans 91.47% des navigateurs.
+
+## Comment utiliser
+
+Il suffit d'ajouter un attribut `loading="lazy"` à la balise `img`. Exemple:
+
+```html
+<img src="image.png" loading="lazy" alt="…" width="200" height="200">
+```
+
+## Ressources
+
+- CanIUse: [https://caniuse.com/loading-lazy-attr](https://caniuse.com/loading-lazy-attr) - l'état du support des navigateurs.
+- web.dev [https://web.dev/browser-level-image-lazy-loading/](https://web.dev/browser-level-image-lazy-loading/) - article très complet sur la manière d'utiliser le Lazy Load.
diff --git a/45-compression-video.md b/45-compression-video.md
@@ -12,7 +12,7 @@ Les recommandations de compression de Vimeo: [https://vimeo.com/help/compression
 - pour 720p, Bit rate de 5-10 Mbps
 - pour 1080p, Bit rate de 10-20 Mbps
 
-Il faut considérer que ces Bit rates sont le point de départ, les versions produites ensuite par Vimeo vont être réduites de moitié.
+Il faut considérer que ces Bit rates sont le point de départ, les versions produites ensuite par Vimeo vont être *réduites de moitié*.
 
 Si on analyse les vidéos en ligne sur Vimeo, [par exemple celle-ci](https://vimeo.com/channels/staffpicks/417104590), on découvre les Bit rates suivantes: