Outils pour utilisateurs

Outils du site


chargement-images

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.

Cette page est une ébauche

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)
chargement-images.txt · Dernière modification: 2019/12/24 13:00 par sebsauvage