Les images pour le web

Il faut distinguer les images matricielles des images vectorielles.

Un image matricielle c'est un "bouillon" de pixels.
Quand vous étirez une image matricielle de faible définition elle peut devenir très moche : effet "dents de scie".

Une image vectorielle,au contraire, est construite à partir de formules mathématiques qui dessinent des formes diverses : rectangles, cercles, ellipses, suite de segments, arcs, etc.
Une image vectorielle reste toujours nette même très agrandie.

Une image vectorielle est donc mieux adaptée au Web ; elle sera aussi nette sur un écran de smartphone que sur un écran d'ordinateur de bureau.
Mais pour l'instant les images rencontrées sur la toile sont encore le plus souvent matricielles ...

Les images matricielles

Les images GIF peuvent être animées.

Exemple

Affichage de quatre images avec leur taille native : deux gifs (le deuxième animé), une image PNG, une image JPG

Ensuite ces quatre images sont intégrés (via la propriété CSS background) dans une boite avec une couleur d'arrière plan (vert clair).

Vous constatez que les images GIF et PNG gèrent la transparence ce qui n'est pas le cas de l'image JPG.
Conclusion : vous pouvez intégrer comme "sprite" dans un décor (une boite DIV avec en "background" une image) des images GIF ou PNG mais pas des images JPG.

Images vectorielles

Ci-dessous une image matricielle (format GIF, 160 pixels par 110 pixels, 25 KO) très agrandie. Vous constatez qu'elle est alors très dégradée : effet "crénelage".

Nous n'aurions pas eu ce problème avec un image vectorielle ...

Ci-dessous une image vectorielle (format SVG, 4 KO) très agrandie ; elle est toujours aussi nette : pas d'effet "crénelage"

Cette image vectorielle fait 260 par 110 pixels. Il n'y a cependant aucune rapport entre sa dimension en pixels et son poids. Ce dernier est lié à l'importance du code SVG ; code qui est visible avec n'importe quel éditeur de textes (notePad ou un autre).

Ci-dessous deux images vectorielles SVG (le format d'image vectorielle le plus répandu) intégrée dans une boite avec une couleur d'arrière plan (vert clair).
Vous constatez que le format SVG gère la transparence.
Notez aussi que la première image vectorielle est animée.

Pour info le code de l'image vectorielle animée

Code affiché via NotePAd :

<?xml version="1.0" encoding="utf-8"?> <svg height = '110' width = '150' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <filter id="flou"> <feGaussianBlur stdDeviation="3" /> </filter> </defs> <g id ="auto"> <rect x = '10' y ='60' width ='90' height ='20' fill = 'yellow' /> <rect x = '30' y ='40' width ='50' height ='20' fill = 'yellow' /> <circle cx = '30' cy='80' r = '10' fill = 'silver' /> <circle cx = '80' cy='80' r = '10' fill = 'silver' /> <rect x = '33' y ='43' width ='17' height ="17" fill ="black" /> <rect x = '53' y ='43' width ='17' height ="17" fill ="black" /> <animateTransform attributeName="transform" type="skewX" values = "0;-10;0" begin="0s" dur="4s" repeatCount="indefinite"/> </g> <ellipse cx="125" cy="70" rx="25" ry="10" fill="gray" filter = "url(#flou)" > <animate attributeName ="visibility" attributType = "CSS" values = "hidden;visible;hidden" repeatCount="indefinite" begin ="0s" dur ="4s" /> </ellipse> </svg>

Le code est écrit en SVG (langage de la famille XML). On retrouve facilement des formules pour dessiner des rectangles, des cercles et des ellipses dans un repère cartésien de 110 par 150.
Comme HTML, SVG c'est un langage de balisage ; balise RECT pour dessiner des rectangles, balise CIRCLE pour dessiner des cercles, etc.
Plusieurs formes peuvent être groupées en un seul objet (identifié ici "auto").
Il y aussi une animation du groupe et de l'ellipse floutée (le nuage de pollution émis par la voiture).

Il y a dans ce site tout un tuto sur SVG : Dessiner avec SVG

Quant au code de l'autre image SVG (avion.svg), il a été généré par Inkscape (logiciel de dessin vectoriel WYSIWYG). Aussi est-il un plus verbeux.
Retour menu