Le fichier arrive par mail, il s’appelle illustration-finale-v3.png et pèse 400 Ko. Parfait pour la page d’accueil. Trois mois plus tard, l’imprimeur le refuse pour la bâche du salon. Entre une illustration vectorielle et une illustration matricielle, la différence ne saute pas aux yeux à l’écran. Elle apparaît le jour où l’image doit changer de taille ou de support.
Deux façons de dessiner, deux façons de grandir
Une image matricielle est une grille de pixels. Chaque point a sa couleur, et le nombre de points est fixé une bonne fois pour toutes. Agrandissez-la au-delà de ce qu’elle contient et le logiciel invente les pixels manquants. Ça donne du flou, ou des escaliers sur les courbes.
Une illustration vectorielle repose sur des tracés décrits mathématiquement : des points, des courbes, des aplats de couleur. Le logiciel recalcule le dessin à chaque affichage, quelle que soit la taille demandée. Du timbre-poste à la façade, le trait reste net.
Le style dicte souvent le choix avant même la technique. Les aplats, les lignes franches, les personnages en formes simples se prêtent très bien au vectoriel. Une illustration peinte, texturée, pleine de grain ou de lavis numérique reste matricielle par nature. Je ne trouve pas l’une supérieure à l’autre, tout dépend de ce qu’on va en faire.
En impression, la taille finale décide de tout
Pour un flyer ou un document A4, les imprimeurs demandent en général 300 pixels par pouce à la taille réelle. Un A4 plein cadre réclame donc environ 2 480 × 3 508 pixels. C’est beaucoup plus que la plupart des images préparées pour un site.
Les grands formats suivent une autre logique, parce qu’on les regarde de loin. Ce guide de graphiste.com sur les fichiers grand format recommande 150 dpi à l’échelle 1, et certains imprimeurs de banderoles acceptent de descendre à 75. Même à 100 dpi, une bâche de 3 mètres sur 1 représente un fichier de 11 811 × 3 937 pixels. Une illustration matricielle doit avoir été dessinée à cette taille dès le départ, sinon elle ne tiendra pas.
Le vectoriel contourne le problème. Un PDF ou un fichier Illustrator bien préparé (polices vectorisées, images incorporées) s’imprime aussi bien sur une carte de visite que sur un panneau de salon. C’est la raison pour laquelle je livre toujours une version vectorielle quand le dessin le permet.
Sur le web, le poids compte autant que la netteté
À l’écran, la question change de nature. Un visiteur sur mobile ne profite pas d’un fichier taillé pour l’imprimerie, il le télécharge. Le SVG, format vectoriel du web, reste net sur les écrans haute densité et pèse souvent très peu pour un dessin en aplats. Il se colore même en CSS, ce qui permet d’adapter une illustration au mode sombre sans fichier supplémentaire.
Attention quand même au SVG trop gourmand. Une illustration vectorisée à partir d’un dessin très texturé peut contenir des milliers de tracés, et devenir plus lourde qu’une bonne image compressée.
Pour les illustrations matricielles, le WebP fait très bien le travail. Google annonce des fichiers 26 % plus légers que le PNG en compression sans perte, et 25 à 34 % plus légers que le JPEG à qualité équivalente en compression avec perte. J’en parlais plus en détail en revenant sur le format WebP et la performance des sites.
Le SVG et l’accessibilité
Un SVG intégré directement dans le code d’une page n’a pas d’attribut alt. Pour qu’un lecteur d’écran l’annonce, on lui donne le rôle img et un nom accessible, via une balise title placée à l’intérieur ou un attribut aria-label. C’est ce qu’exige le critère 1.1.1 des WCAG sur les contenus non textuels. Une illustration purement décorative, elle, se masque aux technologies d’assistance avec aria-hidden.
L’animation, le terrain de jeu du vectoriel
Un personnage qui cligne des yeux sur une page d’accueil, une icône qui s’anime au survol : ces petites animations passent très souvent par du vectoriel. Le format Lottie, créé par Hernan Torrisi, en est l’exemple le plus répandu. Son extension Bodymovin pour After Effects convertit une animation en un fichier JSON qui décrit des formes vectorielles. Le rendu s’adapte à toutes les résolutions.
Une illustration matricielle peut aussi bouger, mais en vidéo ou en GIF, avec un fichier souvent plus lourd et une netteté figée. Si une animation est envisagée, même dans un an, mieux vaut le savoir avant de dessiner… Reprendre un personnage peint pour l’animer revient souvent à le redessiner.
Le choix se fait au brief, pas à la livraison
Vectoriser après coup une illustration matricielle reste possible. Les logiciels proposent une vectorisation automatique, mais le résultat est une approximation : courbes irrégulières, détails perdus, couleurs regroupées. Pour un dessin simple, une reprise à la main corrige le tir. Pour une illustration texturée, autant repartir de zéro.
Le plus simple consiste à lister les usages dès la commande. Site, réseaux sociaux, affiche, signalétique, goodies, animation : chaque support oriente la technique. Quand je prépare une création d’illustration, cette liste passe avant le premier croquis, pour que la même image tienne sur la page d’accueil comme sur le stand.
Et vous, savez-vous dans quel format dort l’illustration de votre site aujourd’hui ?
