La révolution vectorielle pour les images des sites web

La navigateurs web supportent désormais quasiment tous les dessins vectoriels (svg), qui s’affichent directement dans les pages web, comme les autres images habituelles ‘bitmap’ (jpg, png, gif).


Avec la révolution mobile, les évolutions touchent également la qualité de rendu des illustrations.

Au revoir la pixellisation !

L’aliasing est l’effet de pixellisation des images matrcielles – composées de points – lorsqu’elles sont agrandies au point de rendre visibles les pixels qui les composent. Cet effet obligeait à créer différentes versions d’images en fonction de leur utilisation, rendant plus complexe et plus coûteuse leur utilisation.

svg no aliasing versus bitmap aliasing
Comparaison d’aliasing entre bitmap et SVG

A contrario, les images vectorielles – composées de ‘vecteurs’ et de courbes mathématiques, appelées courbes de Bézier – tracent des formes librement agrandissables à l’infini, sans perte de qualité. Le format vectoriel reconnu nativement par les navigateur est le SVG, pour Scalable Vector Graphics.

Les bénéfices des images vectorielles

Au delà du simple redimensionnement, les images vectorielles présentent de nombreux aspects bénéfiques :

  • images responsives
  • plus besoin de décliner les images en différentes tailles pour le web
  • modifiables très facilement (avec un éditeur graphique ou en simple fichier texte)
  • styles applicables sur les éléments constitutifs
  • animations / interactions …

Le bénéfice principal des images SVG est leur capacité à être redimensionnables sans perte de qualité (aliasing).

Exemple d’image SVG

Quelques agrandissements d’une même image SVG. On notera l’absence d’aliasing quelle que soit la résolution.


Taille réduite


Taille adaptée à la largeur disponible

 

 

Zoom




WebExpress développe et intègre nativement
les images vectorielles dans les créations de site web


Glossaire

  • Aliasing : effet mosaïque lors d’un agrandissement poussé d’une image bitmap
  • Bitmap : images matricielles (png, bmp, gif, jpg)
  • SVG : Scalable Vector Graphics

Crédit image vectorielle : tiddlywiki5 / Duarte Farrajota Ramos

En savoir plus:

 

Astuce pour Office : Depuis la version 2016, la suite Office gère nativement l’inclusion d’images SVG dans les documents. En revanche pour les versions antérieures, ce format n’est pas proposé dans les formats importables. Il existe néanmoins une solution : ouvrir le fichier SVG avec le logiciel gratuit Inkscape, y copier l’image dans le presse-papier (CTRL+C), et la coller dans le document Office (CTRL+V). (Testé sous Office 2007 par exemple)