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.

Types d'images matricielles

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

Il ne faut jamais faire ce que j'ai fait ci-dessus c'est à dire insérer les images avec leur taille native.
Certaines images matricielles ont 1200 voire 1800 pixels de large alors qu'un écran de smartphone en mode portrait c'est entre 300 et 400 pixels seulement donc sur un "ordiphone" le navigateur va dézoomer la page pour afficher l'image et donc le texte sera minuscule ...

Il faut toujours affecter à la balise IMG l'attribut WIDTH et de préférence la valeur doit être un pourcentage (par rapport à la largeur du parent conteneur).

Pour publier une image matricielle sur le web celle-ci ne doit pas être trop lourde ; pensez à la redimensionner avec PAINT les images gif,png ou jpg.

Images matricielles et transparence

Ci-dessous ces mêmes 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" (personnage d'une animation) dans un décor (une boite DIV avec une image en fond) des images GIF ou PNG mais jamais 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 et pesant 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 :

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