Quand un logo imprimé sort avec des bords flous, ou qu'une petite icône devient pixelisée dès qu'on l'agrandit, la cause se résume souvent à un seul choix technique : la différence vectoriel matriciel. Ces deux types d'image se ressemblent à l'écran, mais ils sont stockés de façons totalement différentes. Une fois que vous savez lequel utiliser et quand, vous obtenez des résultats plus nets en impression comme sur le web, et vous évitez le poids de fichier inutile et la perte de qualité.
Qu'est-ce que le vectoriel et le matriciel ?
Les images matricielles (bitmap) sont faites de petits carrés colorés appelés pixels. Chaque photo que vous prenez, chaque capture d'écran et chaque document numérisé est matriciel. La quantité de détail dépend de la résolution : une image de 2000×2000 pixels contient quatre millions de points, et la couleur de chacun est enregistrée individuellement.
Les images vectorielles stockent des définitions mathématiques au lieu de pixels : points, lignes, courbes et les couleurs qui les remplissent. Un cercle est décrit comme « un cercle à ce centre, avec ce rayon, dans cette couleur ». Un graphique vectoriel est donc comme une recette de dessin écrite en chiffres ; il est recalculé pour la taille à laquelle il est affiché.
Différence vectoriel matriciel : la vraie frontière, c'est l'évolutivité
La différence vectoriel matriciel la plus critique est ce qui se passe à l'agrandissement. Quand vous poussez une image matricielle au-delà de sa taille d'origine, on ne peut pas inventer de nouveaux pixels ; les pixels existants grossissent, l'image devient floue et les bords s'escaliérisent. Un graphique vectoriel est recalculé à chaque taille, il est donc indépendant de la résolution : le même fichier reste net sur une carte de visite comme sur une enseigne de façade.
- Vectoriel : s'agrandit sans limite, bords toujours nets, fichier généralement léger, facile à modifier.
- Matriciel : porte des dégradés riches et un détail photoréaliste, mais se dégrade à l'agrandissement et devient lourd en haute résolution.
Quand utiliser le vectoriel ?
Le vectoriel est le bon choix pour tout ce qui est fait de formes nettes et d'aplats de couleur. Les logos en sont l'exemple type : une identité de marque doit rester aussi nette d'une taille de favicon à un panneau publicitaire. Lorsque vous dessinez un logo en vectoriel, un seul fichier couvre tous les usages.
- Logos et identité de marque utilisés à toutes les tailles.
- Icônes et symboles d'interface qui doivent rester nets selon la densité d'écran.
- Typographie et illustration qui doivent rester modifiables.
- Travaux d'impression (cartes de visite, affiches, enseignes) qui exigent une haute résolution.
Sur le web, l'équivalent vectoriel est généralement le SVG. Le SVG s'affiche directement dans le navigateur, peut être coloré en CSS et reste net sur les écrans retina sans fichier supplémentaire :
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" fill="#2563eb" />
</svg>
Quand utiliser le matriciel ?
Tout ce qui est photoréaliste, avec des dégradés doux et de la texture, doit être matriciel. Vouloir dessiner les milliers de teintes d'un coucher de soleil en vectoriel n'est ni pratique ni efficace et produit des fichiers énormes ; une photographie est de toute façon pixel par nature.
- Photographies et images du monde réel.
- Peintures numériques complexes et textures.
- Captures d'écran et contenus numérisés.
Une règle importante : en travaillant en matriciel, produisez-le à une résolution suffisante dès le départ. Agrandir ensuite n'ajoute pas de détail. Pour le web, réduire la taille brute à l'écran cible améliore à la fois les performances et la netteté.
Formats de fichier : lequel pour quel type ?
Le choix du format découle directement de cette distinction. Regroupons les plus courants :
- Vectoriel :
SVG(idéal pour le web),AI(Adobe Illustrator),EPS, et lePDF, qui peut porter des données vectorielles. - Matriciel :
JPG(photos, compression avec perte),PNG(transparence, bords nets),WebPetAVIF(modernes, plus légers),GIF(couleurs limitées, animation simple).
Une précaution : exporter un logo en PNG ne le rend pas vectoriel ; vous obtenez juste un instantané matriciel à cette taille. La vraie source modifiable doit toujours rester dans le fichier vectoriel. Pour passer au WebP, une seule commande suffit :
cwebp -q 80 photo.png -o photo.webp
Flux de travail pratique : utiliser les deux ensemble
Dans les projets réels, les deux types travaillent souvent côte à côte. Vous gardez l'identité de marque en vectoriel, traitez les photos en matriciel, et sur une page web vous livrez les icônes en SVG et les images en WebP. Un bon ensemble de règles pourrait être :
- Gardez toujours le fichier source des logos, icônes et illustrations en vectoriel ; exportez en matriciel au besoin.
- Archivez les photos en haute résolution et réduisez-les à la cible lors de la publication.
- Sur le web, préférez le
SVGpour les petits graphismes nets, et leWebP/AVIFpour les images photoréalistes. - Pour l'impression, envoyez toujours du vectoriel ou du matriciel haute résolution ; la résolution écran ne suffit pas à l'impression.
Une fois cette logique en place, la question « pourquoi ce fichier est-il flou » disparaît en grande partie.
Questions fréquentes
Puis-je convertir une image matricielle en vectoriel ?
Oui, mais pas automatiquement. Les outils de vectorisation (trace) peuvent transformer des images simples aux lignes nettes en vecteurs ; avec des photos complexes, le résultat est brouillon. La voie la plus propre est de redessiner le logo en vectoriel depuis zéro.
Le SVG est-il toujours meilleur que le PNG ?
Non, cela dépend du type. Pour les icônes et logos en aplat, le SVG est à la fois plus léger et plus net. Mais vouloir transformer une image photoréaliste en SVG alourdit le fichier ; là, le PNG ou le WebP est le bon choix.
Quels fichiers demander à un designer pour mon logo ?
Demandez toujours la source vectorielle modifiable (comme SVG ou AI) ainsi que des exports matriciels prêts pour le web et l'impression. Si vous ne recevez qu'un JPG, modifier l'échelle et les couleurs plus tard devient difficile.
Faites en sorte que votre marque reste nette à toutes les tailles. Si vous voulez organiser correctement votre flux logo, icône et image autour de la logique vectoriel/matriciel, planifions-le ensemble : contactez-moi.