Aller au menu - Aller au contenu

Icône Les images

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 01/11/2011
Difficulté : Facile Facile Creative Commons BY-NC-SA
311 502 visites depuis 7 jours, dont 12 594 sur ce chapitre, classé 1/795
Insérer une image dans une page web ? Vous allez voir, c'est d'une facilité déconcertante. :p

Enfin presque. Il existe différents formats d'image que l'on peut utiliser sur des sites web, et on ne doit pas les choisir au hasard. En effet, les images sont parfois volumineuses à télécharger, ce qui ralentit le temps de chargement de la page (beaucoup plus que le texte !).

Pour faire en sorte que vos pages restent lisibles et rapides à télécharger, suivez donc activement mes conseils !
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Les différents formats d'images

Savez-vous ce qu'est un format d'image ?

Quand vous avez une image "entre les mains", vous avez la possibilité de l'enregistrer dans plusieurs "formats" différents. Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi, et la qualité de l'image va changer.

Par exemple, le logiciel de dessin Paint (même si c'est loin d'être le meilleur) vous propose de choisir entre plusieurs formats lorsque vous enregistrez une image :

Formats d'image dans Paint


Certains formats sont plus adaptés que d'autres selon l'image (photo, dessin, image animée...). Notre but ici est de faire le tour des différents formats que l'on utilise sur le web, pour que vous les connaissiez et sachiez choisir celui qui convient le mieux à votre image. Rassurez-vous, il n'y a pas beaucoup de formats différents, ça ne sera donc pas bien long. :)

Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides à charger.


Le JPEG


Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de couleurs différentes.

Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg.

Voici un exemple d'image au format JPEG :

Une photo de montagne en JPEG
montagne.jpg


Notez que le JPEG détériore un peu la qualité de l'image d'une façon généralement imperceptible. C'est ce qui le rend si efficace pour réduire le poids des photos.
Quand il s'agit d'une photo, on ne peut généralement pas détecter la perte de qualité. Par contre, si ce n'est pas une photo, vous risquez de voir l'image un peu "baver". Dans ce cas, il vaut mieux utiliser le format PNG.


Le PNG


Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image.

Le PNG a été inventé pour concurrencer un autre format, le GIF, à l'époque où il fallait payer des royalties pour pouvoir utiliser des GIF. Depuis, le PNG a bien évolué et c'est devenu le format le plus puissant pour enregistrer la plupart des images.

Le PNG existe en 2 versions, en fonction du nombre de couleurs que doit comporter l'image :

  • PNG 8 bits : 256 couleurs
  • PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG)

Voici une image PNG en 24 bits, la célèbre mascotte Zozor du Site du Zéro :

Zozor en PNG
zozor.png


Une vieille version d'Internet Explorer (IE6) ne peut pas afficher correctement les images PNG 24 bits transparentes. Ce navigateur tend à être de moins en moins utilisé, mais gardez quand même cette information en tête.


Au fait, si le PNG 24 bits peut afficher autant de couleurs qu'une image JPEG, et qu'en plus il peut être rendu transparent sans modifier la qualité de l'image... quel est l'intérêt du JPEG ?


La compression du JPEG est plus puissante sur les photos. Une photo enregistrée en JPEG se chargera toujours beaucoup plus vite que si elle était enregistrée en PNG. Je vous conseille donc toujours de réserver le format JPEG aux photos.


Le GIF


C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont le plus souvent plus légères et la transparence est de meilleure qualité. Je vous recommande donc d'utiliser le PNG autant que possible.

Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs).

Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé. Exemple :

Image utilisateur
manga.gif



Il existe un format adapté à chaque image


Si on résume, voici quel format adopter en fonction de l'image que vous avez :

  • Une photo : utilisez un JPEG.
  • N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits, ou éventuellement un GIF.
  • N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
  • Une image animée : utilisez un GIF animé.



Les erreurs à éviter


Bannissez les autres formats


Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne sont pas du tout adaptés au web. On peut en mettre sur son site, mais le chargement sera vraiment extrêmement long !


Choisissez bien le nom de votre image


Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espaces ni accents. Par exemple : mon_image.png.

Vous pouvez remplacer les espaces par le caractère "underscore" comme je l'ai fait : _ .
Retour en haut

Insérer une image

Revenons maintenant au code HTML pour découvrir comment placer des images dans nos pages web ! :)


Insertion d'une image


Quelle est la fameuse balise qui va nous permettre d'insérer une image ? Il s'agit de... <img /> !

C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici. En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis.

La balise doit être accompagnée de 2 attributs obligatoires :
  • src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en absolu (ex. : http://www.site.com/fleur.png), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier images vous devrez taper : src="images/fleur.png"
  • alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour la fleur, on mettrait par exemple : alt="Une fleur".


Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>). Voici un exemple d'insertion d'image :

Code : HTML
1
2
3
4
<p>
     Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />
     <img src="images/montagne.jpg" alt="Photo de montagne" />
</p>

Essayer !


Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on sache indiquer où se trouve l'image, comme on avait appris à le faire avec les liens. :)
La plus grosse "difficulté" (si on peut appeler ça une difficulté) consiste à choisir le bon format d'image. Ici, c'est une photo donc c'est évidemment le format JPEG qu'on utilise.

Je le répète : évitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Voici un chemin qui va poser problème :
"Images du site/Image toute bête.jpg"
Il faudrait supprimer les espaces (ou les remplacer par le symbole "_"), supprimer les accents et tout mettre en minuscules comme ceci :
"images_du_site/image_toute_bete.jpg"
Sachez donc que si votre image ne s'affiche pas, c'est très certainement parce que le chemin est incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers et tout ira bien. :)



Ajouter une infobulle


L'attribut fait pour afficher une bulle d'aide est le même que pour les liens : il s'agit de title. Cet attribut est facultatif (contrairement à alt).

Voici ce que ça peut donner :

Code : HTML
1
2
3
4
<p>
     Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />
     <img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand même !" />
</p>

Survolez la photo avec la souris pour voir l'infobulle apparaître.

Essayer !



Miniature cliquable


Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale.

Il existe des millions de logiciels permettant de créer des miniatures d'images. J'utilise personnellement Easy Thumbnails. Je vais ainsi disposer de 2 versions de ma photo : la miniature et l'image d'origine.

Miniature et image d'origine


Je les place toutes les deux dans un dossier appelé img par exemple. J'affiche la version montagne_mini.jpg sur ma page et je fais un lien vers montagne.jpg pour que l'image agrandie s'affiche lorsqu'on clique sur la miniature.

Voici le code HTML que je vais utiliser pour cela :

Code : HTML
1
2
3
4
<p>
     Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br />
     <a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir" /></a>
</p>


Essayer !


Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très esthétique autour de votre image cliquable.
Heureusement, nous pourrons retirer ce cadre grâce au CSS dans peu de temps. ;)
Retour en haut

Les figures

Au cours de la lecture de ce tutoriel, vous avez déjà rencontré plusieurs fois des figures. Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.

Les figures peuvent être de différents types :
  • Images
  • Codes source
  • Citations
  • ...


Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images, mais contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.


Création d'une figure


Reprenons par exemple cette capture d'écran du premier chapitre :

Bloc-notes
Le logiciel Bloc-Notes


En HTML5, on dispose de la balise <figure>. Voici comment on pourrait l'utiliser :

Code : HTML
1
2
3
<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
</figure>


Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure>, comme ceci :

Code : HTML
1
2
3
4
<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
    <figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>


Essayer !



Bien comprendre le rôle des figures


Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient être situées dans des paragraphes (placées à l'intérieur d'une balise <p></p>). Ce n'est pas tout à fait vrai. :p

Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.

Code : HTML
1
2
3
4
5
6
<p>Connaissez-vous le logiciel Bloc-Notes ? On peut faire des sites web avec !</p>

<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
    <figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>


Je ne vois pas vraiment de changement. Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans une figure ?


Bonne question ! Tout dépend de ce que votre image apporte au texte :
  • Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image dans un paragraphe.
  • Si elle apporte une information : placez l'image dans une figure.

La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures par exemple.

Enfin, sachez qu'une figure peut très bien comporter plusieurs images. Voici un cas où cela se justifie :

Code : HTML
1
2
3
4
5
6
<figure>
    <img src="images/internetexplorer.png" alt="Logo Internet Explorer" />
    <img src="images/firefox.png" alt="Logo Mozilla Firefox" />
    <img src="images/chrome.png" alt="Logo Google Chrome" />
    <figcaption>Logos des différents navigateurs</figcaption>
</figure>
Retour en haut

Q.C.M.

Lequel de ces formats d'image n'est pas à utiliser sur Internet ?
Lequel de ces formats ne supporte pas la transparence ?
Quel attribut permet d'indiquer où se trouve l'image à insérer ?
Quel attribut permet d'afficher une bulle d'aide ?
Dans quel cas doit-on placer l'image dans une figure ?

Statistiques de réponses au QCM

Retour en haut
Vous savez maintenant insérer des images dans vos pages web !

Saviez-vous qu'avec HTML5 on peut aussi insérer très facilement des vidéos et des extraits audio dans ses pages ? Auparavant, il était obligatoire d'utiliser des plugins assez lourds comme Flash, mais désormais, c'est simple comme une balise. Vous verrez tout ça dans l'un des chapitres suivants ! ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Lire aussi

Icône
L'imagerie numérique pour les zéros
Retour en haut
413 commentaires pour "Les images"
Note moyenne : 3.86 / 4 (2970 votes)
Pseudo Commentaire
Hors ligne ToXiC_FM7 # Posté le 28/01/2012 à 23:49:37
Cogito Ergo Sum

Avis : Très bon

Super,
Il ne me reste plus qu'à mettre ça en pratique et je devrais savoir plus ou moins me débrouiller !
Merci !

Note : 16/20
Note Totale : 92/100
ToXiC_FM7
 
Hors ligne mbouguy # Posté le 29/01/2012 à 16:43:50
Avatar

Avis : Très bon

mon commentaire est pour MOI LELE au dédut j'ai le meme problème que toi mais je t'assure c'est simple tu as juste fait une petite erreur quand tu as mis <p><img src="kenyarkana.jpeg"alt="photo du concert"/>. Il te suffit d'enlever le "e" au niveau de jpeg il faut le mettre comme ceci src="kenyarkana.jpg" tout simplement j'espere que celà va t'aider.
Hors ligne Wunsuk # Posté le 30/01/2012 à 07:40:05

Avis : Très bon

Salut a tous,
J'ai eu le même problème que vous en ce qui concerne le jpeg, en fait il faut juste remplacer .jpeg par .jpg
Voilà voilà, enjoy ;)
Hors ligne HackTobirama # Posté le 30/01/2012 à 16:29:35

Slt pourquoi quand je met une image ca ne sort pas c'est un rectangle avec un dessinde feuilles là dedans ? mon francais doit-etre corrigé
Hors ligne Hidan47 # Posté le 01/02/2012 à 19:42:37
Avatar

Avis : Bon

Bonjour,
Je tourne sous windows 7, j'ai un dossier "images", je fais :
<img src="images/power.jpg" alt="Photo" /> (nomde l'image power)
Mais l'image ne s'affiche pas. Sa me fais un rectangle avec un triangle rose et 2 points bleus.
Pourriez vous m'aider ? Merci

Voir tous les commentaires