Aujourd'hui, comment bien optimiser ses images pour pouvoir partager des trucs même si le débit montant de son serveur est à chier.

Si comme moi vous autohébergez votre site, déjà partagez moi l'info (par mail cf la page de contact ou alors par commentaire là où vous avez trouvé ce post), et ensuite vous vous êtes surement retrouvé dans la même situation que moi ; vous voulez partager des photos, mais votre téléphone prends des photos de plusieurs Mo (voire dizaines de Mo), et votre connexion montante à la maison est déplorable (pour rester poli).

TL;DR:

• Si l’icone est utilisé une seule fois dans votre page,
• Si cet icone est critique ou a besoin de changer de couleur lors d’une interaction,
  • ➡️ utiliser le SVG en inline dans le HTML
• Si non,
  • ➡️ utiliser une balise <img>
• Si l’icone est utilisée plusieurs fois,
• Si l’icone est critique
  • ➡️ utiliser des Inline SVG Symbol
• Si l’icone n’est pas critique,
  • S’il est possible d’héberger du SVG sur votre propre domaine
    • ➡️ utiliser des Remote SVG Symbol
  • Si non,
    • ➡️ Essayez de convaincre très fort votre admin sys de l’importance d’avoir le même domaine pour vos assets
    • ➡️ Ou passez par un fallback avec des CSS mask
    • ➡️ Ou utilisez des Inline SVG Symbol
• Si vous utilisez une font d’icone,
• ➡️ repartez en haut de cette matrice et choisissez une autre méthode. Vos utilisateurices vous remercieront.