Outils pour utilisateurs

Outils du site


chargement-images

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
Dernière révisionLes deux révisions suivantes
chargement-images [2019/12/24 12:52] – [Optimiser] sebsauvagechargement-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...) et pourquoi ils ne seront pas abordés ici. Pistes.
  
 ===== 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'impression** que ça se charge plus vite. Tout est dans la perception de l'utilisateur.
  
   * Astuce de prendre un JPG de plus grandes dimensions (plus fortement compressé) et le réduire à l'affichage plutôt que de prendre un jpg simple à la résolution finale (mettre exemples). (avantage: mieux aussi pour les écrans hdpi).   * Astuce de prendre un JPG de plus grandes dimensions (plus fortement compressé) et le réduire à l'affichage plutôt que de prendre un jpg simple à la résolution finale (mettre exemples). (avantage: mieux aussi pour les écrans hdpi).
   * 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, pas encore finalisée/supportée.   * 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, pas encore finalisée/supportée.
 +  * Faire charger à l'avance les images ? (tags html). Exemple: Minigalnano précharge l'image suivante.
   * Solution 1 : préciser une couleur de background + image basse résolution  + images finale.   * Solution 1 : préciser une couleur de background + image basse résolution  + images finale.
   * solution 2 : utiliser jpg progressifs (reprendre images de l'article du blog)   * solution 2 : utiliser jpg progressifs (reprendre images de l'article du blog)