Images vs fontes pour les icônes des sites Web?

Images vs fontes pour les icônes des sites Web?

— Contenu révisé le 21 juillet 2021 pour Images vs fontes pour les icônes des sites Web?

Image ou fonte pour les icônes?

La rapidité

Voici un principe très important à respecter pour aider la rapidité d’apparition des pages Web et le référencement du site. Conserver des pages Web légères. Ça s’applique autant aux gestionnaires de contenu comme WordPress et Joomla, qu’aux constructeurs de sites Weebly et Wix. En d’autres mots, c’est vrai pour tout les différents types de sites Web.

  • Une image en pixels (JPEG, PNG, GIF, autres) possède un poids plus grand que le caractère d’une fonte.
  • Les fontes donnent l’apparence des caractères d’un texte et peuvent inclure des icônes, ou images en courbe de Béziers au format SVG (Scalable Vector Graphic/graphique vectoriel adaptable).
  • Une image au format SVG s’adapte automatiquement aux différents formats d’écran tout en conservant sa qualité. Il ne deviendra pas pixellisé comme pour une image en pixels une fois agrandie.

Un exemple

Voilà un exemple concret d’application de ce principe pour le site qui offre mes services. J’ai changé les images pour «Contact» et «Suivez-moi» dans le pied de page par la fonte Font Awesome. Plusieurs fontes gratuites et commerciales existent, et elles comprennent une série d’images en SVG.

Pour installer l’icône de Facebook, par exemple, j’ai plutôt utilisé le caractère d’une fonte. Léger et présentant toujours une bonne résolution, il remplace avantageusement une grande image. Car les icônes demandent une qualité supérieure afin de rester bien lisibles, autant sur un écran d’ordinateur que sur celui d’un appareil mobile en haute résolution.

En conclusion pour images vs fontes pour les icônes

En résumé, l’utilisation d’une fonte nous assure que les icônes seront toujours de qualité, peu importe la résolution et la taille de l’écran utilisée. Et surtout, que ce sera plus léger qu’une image.

Images vs fontes pour les icônes des sites Web?
Photo fond de la bannière : Bri Schneiter
Partager