Différences

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

--- chargement-images [2019/12/24 13:00] – [Améliorer la perception du chargement] sebsauvage
+++ chargement-images [2020/10/26 14:04] (Version actuelle) – supprimée sebsauvage
@@ Ligne 1: / Ligne 1: @@
-====== Améliorer le chargement des images dans une page web ======
-Si votre page semble se charger trop lentement parcequ'elle contient trop d'images, voici quelques solutions non seulement pour alléger les images, mais aussi pour donner l'impression que la page se charge plus vite.
-<note>Cette page est une ébauche</note>
-===== Choisir le bon format =====
-jpg, png, gif: quand, pourquoi.
-autres formats ? (webp, bgp...) et pourquoi ils ne seront pas abordés ici. Pistes.
-===== Optimiser =====
-Première étape, réduire au maximum le poids des fichiers en minimisant la perte de qualité d'image.
-JPG:
-  * Supprimer infos inutiles (EXIF, etc.)
-  * recompression sans perte de qualité (80% est généralement suffisant, mais dépend de l'image)
-  * recompresser avec perte de qualité en augmentant la compression
-PNG:
-  * Supprimer infos inutiles
-  * recompresser sans perte de qualité (optipng)
-  * réduire le nombre de couleurs (pngquant, etc.)
-GIF:
-  * animé ? Il vaut mieux prendre mp4 (voir la page dédiée)
-  * si GIF animé, solutions pour optimiser (présenter les deux principaux outils)
-Une fois la taille réduite au maximum:
-===== 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).
-  * 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 2 : utiliser jpg progressifs (reprendre images de l'article du blog)
-  * Solution 3 : placeholder javascript (mettre reférrence à la blurha.sh)
-  * Solution 4 : proposer une solution maison (image réduite à qq pixels en résolution + data/uri:png dans la page html directement).
-  * Cas du fond (background) : indiquer la solution reprise de l'article du blog + exemple (sebsauvage.net/ambient)