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 perd de sa qualité.

Une image vectorielle,au contraire, est construite à partir de formules mathématiques. Une image vectorielle peut être étirée sans perte de qualité.

Une image vectorielle est donc mieux adaptée au Web ; elle sera aussi nette sur un grand écran que sur un écran de smartphone.
Sachez aussi que depuis que le HTML5 est implémenté par les navigateurs, vous pouvez dessiner (au format SVG) dans un document HTML. Le langage SVG est le format vectoriel recommandé par le W3C.

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

Comme vous savez, les gifs peuvent être animés.

Types d'images matricielles

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

Le code HTML correspondant : ... <br><img src ="../images/ascidie.gif"> <img src ="../images/fondeur2.gif"> <br><img src ="../images/camion.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. En effet certaines images matricielles ont 1200 voire 1800 pixels de large alors qu'un écran de smartphone (en mode portrait) c'est autour de 400 pixels ...
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 illisible ...
Il faut toujours associer à la balise IMG la propriété width/height. Si vous utilisez la propriété width, sa valeur doit être exprimée en pourcentage (pour un "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 surtout si elle doit apparaitre telle un miniature.

Images matricielles et transparence

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

Le code correspondant

Instruction HTML unique dans cette page web : ... <div id ="boite1" style ="width : 100% ; height : 500px ; background-color : lime;"></div> ...

Extrait de la feuille de style interne de cette page web

#boite1 {background: 
		url(../images/ascidie.gif) no-repeat top left, 
		url(../images/fondeur2.gif) no-repeat top right, 
		url(../images/autobus.png) no-repeat bottom left,
		url(../images/femme_nue.jpg) no-repeat bottom right ;
		}

Vous constatez que les images GIF et PNG gèrent la transparence ce qui n'est pas le cas de l'image JPG.
Encore une fois, les images sont insérées pour leur taille native.
Vous pouvez donc 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.

Comparaison entre images matricielles et vectorielles

Une image matricielle très agrandie

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 "moche" ; effet "crénelage".

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

Une image vectorielle très agrandie

Ci-dessous une image vectorielle (au format SVG et pesant seulement 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 découlent de formules mathématiques et non pas d'une agglomération de pixels.

Insertions d'images vectorielles dans un document HTML

Une image vectorielle (ou document SVG) peut être affichée dans une page web aussi facilement qu'un fichier .png ou .gif ou .png.

Exemple

Ci-dessous deux images vectorielles au format SVG (le format d'image vectorielle le plus répandu) intégrées 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.

Le code correspondant

Instruction HTML unique dans la page web

Extrait de la feuille de style interne de cette page web

	#boite2 {background : 
		url(../images/auto_anime.svg) no-repeat top left,
		url(../images/avion.svg) no-repeat bottom right	;}

Ci-dessous le code de l'image "auto_anime.svg"

Ne cherchez pas à comprendre ce code, c'est prématuré.
Constatez seulement que c'est compréhensible pour un humain et que ça ressemble à du HTML : des balises avec des attributs.
Ce qui est logique puisque le SVG appartient comme le HTML, à la famille des langages XML.

Vous trouverez dans mon site tout un tuto sur le langage SVG : dessin vectoriel avec SVG

Quant au code de l'autre image SVG (avion.svg), il a été généré par Inkscape (éditeur WYSIWYG de SVG).
Il existe aussi dans mon site un tuto sur l'éditeur 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

La classe "centre" prevoit le centrage des éléments IMG.