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édente | |||
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' | ||
- | |||
- | < | ||
- | |||
- | |||
- | ===== 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' | ||
- | |||
- | JPG: | ||
- | * Supprimer infos inutiles (EXIF, etc.) | ||
- | * recompression sans perte de qualité (80% est généralement suffisant, mais dépend de l' | ||
- | * 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' | ||
- | |||
- | * 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, | ||
- | * Faire charger à l' | ||
- | * Solution 1 : préciser une couleur de background + image basse résolution | ||
- | * solution 2 : utiliser jpg progressifs (reprendre images de l' | ||
- | * 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/ | ||
- | * Cas du fond (background) : indiquer la solution reprise de l' | ||
chargement-images.1577192436.txt.gz · Dernière modification : 2019/12/24 13:00 de sebsauvage