Débuter en programmation web - sommaire

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 formats les plus répandus et interprétés par les navigateurs sont les suivants :
• GIF : transparence
• PNG : recommandé par le W3C - transparence
• JPG : pour les photos - pas de transparence

Les images GIF peuvent être animées.

Types d'images matricielles

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

Le code proposé : <br><img src ="../images/ascidie.gif"> <img src ="../images/fondeur2.gif"> <br><img src ="../images/auto2.png"> <img src ="../images/femme_nue.jpg">

Il ne faut jamais insérer les images avec leur taille native comme je le fais dans le code ci-dessus.
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" (smartphone pour les québécois) le navigateur va dézoomer la page pour afficher l'image et donc le texte qui accompage l'image sera minuscule et donc illisible ...
Il faut toujours associer à la balise IMG la propriété width/height (directement ou via une classe qui gère cette propriété) ;
Si vous utilisez la propriété width, sa valeur doit être exprimée en pourcentage ("responsive design") et height doit valoir "auto" afin que les proportions soient respectées.

Pour publier une image matricielle sur le web celle-ci ne doit pas être trop lourde ; pensez à la redimensionner avec PAINT.
Ainsi une image toujours affichée sous forme d'une miniature doit être nativment très légère.

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"

Les images vectorielles peuvent être librement redimensionnées sans perte de qualité. En effet les formes (rectangles, cercles, ellipses, polygones, arcs de cercle ou d'ellipse) découlent de formules mathématiques et non pas de pixels.

Ci-dessous deux images vectorielles au format 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

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 : Dessin vectoriel 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) qui génère du SVG).
Il existe aussi dans mon site un tuto sur Inkscape : Logiciel Inkscape

Le format webP

Il s'agit du format d'image le plus récent ; il a été imaginé par Google. Il s'agit d'un format d'image matricielle.

Son objectif est de réunir dans un même format les qualités des autres :
• comme JPG la compression dans ce format est efficace : obtention de fichiers légers donc rapide à charger
• comme PNG le format webP accepte la transparence
• comme GIF le format webP prend en charge les animations

Attention, les vieilles versions de navigateurs ainsi que les navigateurs Safari & Internet Explorer ne prennent pas charge ce format.

Ci-dessous affichage de deux images au format webP

Le code correspondant

Pour info la règle de style relative à la classe "centre" :
img.centre {width : 60%; display : block; margin : 10px auto; }
Rappel : avant de centrer horizontalement l'image il faut la transformer en élément "bloc" (car "margin:auto" ne s'applique pas à un élément "inline").