Les images vectorielles sur nos sites internet
Moins connues que les images JPEG ou PNG, que nous publions régulièrement sur nos sites internet, les images vectorielles sont bien supportées par les navigateurs modernes. Elles offrent de nouvelles possibilités d’affichage, et ont un potentiel tout à découvrir dans le dessin technique et les applications interactives.
Si vous naviguez sur internet avec un vieil ordinateur, en utilisant un navigateur de l’ancienne génération, alors cet article n’est pas pour vous. Mais c’est dommage, car vous ne pourrez pas profiter des avantages offerts par les images vectorielles.
Les images vectorielles, à la différence des JPEG et PNG que l’on appelle images « matricielles », sont composées d’un ensemble d’objets, où chaque objet est défini avec des attributs qui en précisent les caractéristiques. Finalement, ce sont des assemblages de « vecteurs » : des formes géométriques définies par des formules mathématiques adaptées à chaque type de forme.
Par exemple, un cercle sera défini ainsi :
<circle r="40" cy="45" cx="161" style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
où « r » définit le rayon, « cy » et « cx » sa position, et « style » les couleurs du cercle et de son contour.
Quel est l’avantage ? Il suffit de modifier ces paramètres pour obtenir tout type de cercles dans notre image. Et cela, on peut le faire dynamiquement, en interaction avec un mouvement de la souris, l’appui sur une touche du clavier, une information reçue par internet, un paramètre que l’on a programmé dans la configuration de notre système. Et en multipliant la valeur de « r » par un coefficient, on redimensionne immédiatement l’image.
Format de fichier et logiciels pour le traitement
Le format le plus utilisé pour les images vectorielles est le SVG : « Scalable Vector Graphics » (en français « graphique vectoriel adaptable »).
Un très bon logiciel Open Source permet de créer et manipuler les images SVG : c’est Inkscape, disponible pour toutes les plateformes.
Voir : https://inkscape.org/fr
On trouve aussi la version « portable » d’Inkscape, par exemple dans la Liberkey. Voir l’article « Des logiciels gratuits et portables ».
Essayez vous-même !
Dans l’exemple à côté, les différents éléments constituant l’image vectorielle sont modifiés ou déplacés de façon indépendante les uns des autres.
On pourrait programmer des séquences d’effets, qui s’exécuteraient automatiquement dès que la page est chargée dans le navigateur. Cette méthode remplace avantageusement l’ancienne technologie Flash pour les animations dans les encadrés publicitaires.
De plus, les images vectorielles évitent toute pixellisation quand elles sont agrandies (on appelle cela « l’aliasing »), gardant toujours des profils nets et des angles bien définis.
Finalement, quand on peut utiliser ce type d’images, on a que des avantages :
- responsive : l’image s’adapte à la taille de l’écran de façon optimale. On n’a plus besoin de décliner différentes tailles d’images pour l’affichage, par exemple, d’un logo
- modifiable facilement, même automatiquement et dynamiquement, par le code inséré dans la page
- styles, animations et interactions gérables séparément pour chaque objet constituant l’image
Quand utiliser les images vectorielles ?
Pour les photos le format vectoriel n’est pas adapté. Les images vectorielles montrent toute leur valeur dans des applications de cartographie, dans les schémas et les plans, dans le dessin géométrique même en 3D, dans les formes stylisées et les dessins.
Elles acceptent un niveau de zoom pratiquement infini, ne provoquant pas l’effet d’aliasing qui limiterait l’agrandissement au delà d’une certaine taille (voir l’exemple plus bas).
Exemple de pixellisation, en agrandissant une image matricielle.
L’image vectorielle, par contre, garde toujours ses formes bien propres.
Où trouver des images vectorielles ?
Il est souvent nécessaire de produire soi-même les images dont on a besoin : un logo, des bandeaux d’annonce, des boutons personnalisés, des textes obliques ou courbés etc.
Mais des nombreux sites proposent des collections d’images vectorielles, que l’on peut télécharger et modifier selon ses besoins. Voilà par exemple quelques banques d’images libres de droit :
- Freepik : https://fr.freepik.com/photos-vecteurs-libre/svg
- Pixabay : https://pixabay.com/fr/photos/?image_type=vector
- Vecteezy : https://www.vecteezy.com/
Et quelques
coups de coeur !
Quelques exemple de dessins vectoriels élaborés.
D’autres articles qui pourraient vous intéresser…
Un incendie, ça peut arriver
… et c’est arrivé ! L’incendie qui a ravagé des locaux de l’hébergeur OVH la nuit du 9 mars a détruit des milliers de serveurs internet. Aussi nos outils de travail, nos sites internet et nos applications auraient pu partir en fumée et les données collectées et publiées au fil du temps détruites à jamais.
Simplifier la publication en ligne des images
Quand on publie des articles sur internet, ou qu’on envoie des newsletters, l’importance des images est notoire. Mais publier des images bien calibrées, harmonisées avec la charte graphique et optimisées pour la mise en ligne, exige des traitements qui rendent la tache plus longue et difficile. Peut-on faire plus simple et efficace ?
Quand l’éditeur d’article rame rame rame…
L’édition d’un contenu publié sur internet se fait souvent sur des pages du site, accessibles seulement aux utilisateurs autorisés, qui ont été prévues à cet effet, et qui offrent une panoplie d’outils d’édition, souvent semblables aux bien populaires traitements de texte.
Le retour d’expérience (personnelle et par les remontés de mes clients), fait état de cas où il arrive d’attendere longtemps avant que la page d’édition soit opérationnelle, ou qu’après le chargement de la page les fonctionnalités ne soient pas disponibles ou seulement partiellement.