Formats de fichiers graphiques

Choisir un format d'image revient à arbitrer entre la fidélité, le poids et les fonctions attendues. Un logo enregistré en JPEG perd sa netteté et son fond transparent ; une photographie enregistrée en PNG pèse 5 fois trop lourd. Les règles tiennent en peu de choses, à condition de distinguer d'abord les images composées de pixels de celles composées de tracés.

Images matricielles

Le JPEG compresse en supprimant de l'information de façon irréversible : il convient aux photographies, où les dégradés masquent les pertes, et se dégrade à chaque réenregistrement. Le PNG compresse sans perte et gère la transparence, d'où son usage pour les captures d'écran, les visuels à fond transparent et les aplats de couleur. Le GIF ne conserve que 256 couleurs et ne survit que pour les animations courtes, désormais mieux servies par la vidéo. Le poids d'une image matricielle dépend surtout de ses dimensions réelles, qu'il faut réduire avant la mise en ligne.

Images vectorielles

Le SVG décrit des formes par des coordonnées et des courbes, non par des pixels : il s'affiche net à toute taille et sur tout écran, y compris les affichages à forte densité. Il convient aux logos, aux icônes, aux pictogrammes et aux graphiques, et son poids reste faible tant que le tracé demeure simple. Il s'insère directement dans le code de la page, ce qui permet d'en modifier les couleurs par la feuille de style. Un fichier SVG contenant du code exécutable doit toutefois être nettoyé avant d'être accepté depuis une source extérieure.

WebP et AVIF

Le WebP remplace avantageusement le JPEG et le PNG : à qualité comparable, il allège les fichiers de 25 à 35 %, gère la transparence et l'animation, et il est reconnu par tous les navigateurs courants. L'AVIF compresse encore mieux, au prix d'un encodage plus lent. La bonne pratique consiste à servir plusieurs formats par une balise qui laisse le navigateur choisir, en conservant un JPEG ou un PNG en dernier recours, et à préciser toujours les dimensions dans le code pour éviter les décalages pendant le chargement.