From cfc6e6c01a94aa6db86f05dbfd15ac5f783690f1 Mon Sep 17 00:00:00 2001 From: Manuel Schmalstieg Date: Mon, 16 Jan 2023 13:15:30 +0100 Subject: [PATCH] Ajout infos Lazy Load --- 33-lazyload.md | 33 +++++++++++++++++++++++++++++++++ 45-compression-video.md | 2 +- 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 33-lazyload.md diff --git a/33-lazyload.md b/33-lazyload.md new file mode 100644 index 0000000..02cde92 --- /dev/null +++ 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 +… +``` + +## 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. \ No newline at end of file diff --git a/45-compression-video.md b/45-compression-video.md index 97fa447..33d9c18 100644 --- 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: