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 propose 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 (directement ou via une classe qui gère cette propriété) ;
la valeur de cette propriété doit être un pourcentage !
Le plus simple est de définir dans la feuille de style plusieurs classes spécifiques à l'élement IMG.. Rappel : par défaut l'élément IMG est "inline".

Exemple : extrait d'une feuille de style externe d'un site : img.petit {display : inline-block ; width : 30% ; } img.moyen {display : block ; width : 50% ; margin : 10px auto 10px auto; } img.grand {display : block ; width : 90% ;margin : 10px auto 10px auto; } img.miniature {float : left; width : 15% ; margin :1%; }

Donc dans le code HTML et pour chaque balise IMG, il suffira d'utiliser l'attribut class avec pour valeur : "petit" ou "moyen" ou "grand" ou "miniature".

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.
Ainsi, et pour reprendre l'exemple, une image toujours associée à la classe "miniature" doit être 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"

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 : ... <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.