Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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 GIF peuvent être animées.
Affichage de quatre images : deux gifs (le deuxième animé), une image PNG, une image JPG :
Le code proposé :
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 :
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.
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.
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.
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.