chargement-images
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteDernière révisionLes deux révisions suivantes | ||
chargement-images [2019/12/24 12:52] – [Optimiser] sebsauvage | chargement-images [2019/12/24 13:00] – [Améliorer la perception du chargement] sebsauvage | ||
---|---|---|---|
Ligne 10: | Ligne 10: | ||
jpg, png, gif: quand, pourquoi. | jpg, png, gif: quand, pourquoi. | ||
- | autres formats ? (webp, bgp...) | + | autres formats ? (webp, bgp...) |
===== Optimiser ===== | ===== Optimiser ===== | ||
Ligne 34: | Ligne 34: | ||
===== Améliorer la perception du chargement ===== | ===== Améliorer la perception du chargement ===== | ||
+ | |||
+ | Quand on ne peut plus trop jouer sur le poids des images sans toucher à la qualité, on peut encore ruser et donner **l' | ||
* Astuce de prendre un JPG de plus grandes dimensions (plus fortement compressé) et le réduire à l' | * Astuce de prendre un JPG de plus grandes dimensions (plus fortement compressé) et le réduire à l' | ||
* Lazy-loading pour charger en priorité les images dans le viewport. Présenter solutions: Javascript (Donner exemple (minigalnano)) et future norme du w3c de lazy-loading, | * Lazy-loading pour charger en priorité les images dans le viewport. Présenter solutions: Javascript (Donner exemple (minigalnano)) et future norme du w3c de lazy-loading, | ||
+ | * Faire charger à l' | ||
* Solution 1 : préciser une couleur de background + image basse résolution | * Solution 1 : préciser une couleur de background + image basse résolution | ||
* solution 2 : utiliser jpg progressifs (reprendre images de l' | * solution 2 : utiliser jpg progressifs (reprendre images de l' |