Comment insérer une image en HTML5

Insérer des images dans des pages Web ? Vous voyez, c’est facilement dérangeant. enfin, presque. Différents formats d’image peuvent être utilisés sur le site Web et ne doivent pas être choisis arbitrairement. Il est vrai que parfois les images à télécharger sont volumineuses, ce qui peut ralentir le temps de chargement de la page (plus lent que du texte !).

Différents formats d’images que vous pouvez insérer en image en HTML5

Lorsque vous avez une image »sous la main », vous pouvez l’enregistrer dans plusieurs « formats » différents. Le poids de l’image (en Ko, voire en Mo) sera supérieur ou inférieur selon le format choisi, et la qualité de l’image variera.

Par exemple, Paint (même s’il est loin d’être le meilleur) vous donne le choix entre plusieurs formats lors de l’enregistrement des images

Selon l’image (photographie, dessin, image animée, etc.), certains formats sont plus adaptés que d’autres. Notre objectif est de faire le tour des différents formats utilisés sur le web afin que vous les compreniez et sachiez choisir le meilleur format pour vos images. Ne vous inquiétez pas, il n’y a pas beaucoup de formats différents, donc cela ne prendra pas longtemps.

Toutes les images sur Internet ont une chose en commun : elles sont compressées. Cela signifie que les ordinateurs effectuent des calculs afin qu’ils soient plus légers et donc se chargent plus rapidement.

JPEG

Les images au format JPEG (Joint Photographic Experts Group) sont très courantes sur le Web. Ce format est conçu pour réduire le poids (c’est-à-dire la taille du fichier associé) des photos, qui peuvent contenir plus de 16 millions de couleurs différentes. L’image ci-dessous est une photo enregistrée au format JPEG.

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

Notez que JPEG dégrade la qualité de l’image d’une manière qui n’est généralement pas perceptible. C’est pourquoi il est si efficace pour éclaircir les photos.
Avec les photos, vous ne pouvez généralement pas détecter une perte de qualité. D’un autre côté, si ce n’était pas une photo, vous pourriez voir l’image un peu « baveuse ». Dans ce cas, il est préférable d’utiliser le format PNG.

PNG

Le format PNG (Portable Network Graphics) est le plus récent. Ce format convient à la plupart des graphiques (je suis tenté de dire « tout ce qui n’est pas une photo »). PNG a deux grands avantages : il peut être rendu transparent et il ne change 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 redevances pour utiliser le GIF. PNG a parcouru un long chemin depuis lors et est devenu le format le plus puissant pour enregistrer la plupart des images.

Deux versions de PNG existent, selon le nombre de couleurs que l’image doit contenir :

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

Ci-dessous, une image PNG 24 bits représentant Zozor, qui sera notre mascotte tout au long du parcours.

La compression JPEG est plus puissante sur les photos. Les photos enregistrées au format JPEG se chargent toujours beaucoup plus rapidement que lorsqu’elles sont enregistrées au format PNG. Par conséquent, je vous recommande toujours de conserver le format JPEG pour vos photos.

GIF

C’est un format assez ancien, mais encore largement utilisé (et encore largement utilisé par habitude). Aujourd’hui, les PNG sont généralement bien meilleurs que les GIF : les images sont généralement plus claires et plus transparentes. Je vous recommande donc d’utiliser le PNG autant que possible.

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

Cependant, le GIF conserve certains avantages que le PNG n’a pas : il peut être animé. Du coup, les GIF animés (appelés aussi « gifs de réaction ») ont explosé sur le web ces dernières années.

Chaque image a un format adapté
Dans l’ensemble, voici le format à utiliser, en fonction des images que vous avez :

Photos : Utilisez JPEG.

• Tout graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits, ou éventuellement un GIF.
• Tous les graphiques comportant de nombreuses couleurs : utilisez le format PNG 24 bits.
• Images animées : utilisez des GIF animés.

erreurs à éviter
Les autres formats sont interdits
Les autres formats non mentionnés ici, tels que le format BITMAP ( *.bmp ) doivent être interdits car ils ne sont généralement pas compressés et donc trop volumineux. Ils ne sont pas du tout compatibles avec le Web. Vous pouvez le mettre sur votre site web, mais le chargement sera long !

Choisissez bien le nom de l’image
Si vous voulez éviter les problèmes, prenez l’habitude d’enregistrer les fichiers avec des noms en minuscules sans espaces ni accents ; par exemple : my_image.png .

Vous pouvez remplacer les espaces par des caractères de soulignement (« _ ») comme je l’ai fait ici.

Insérer une image en HTML5

Revenons maintenant au code HTML pour comprendre comment placer des images dans nos pages web !

Insérer une image
Quelles sont les fameuses balises qui nous permettent d’insérer des images ? C’est… <img /> !

C’est une balise orpheline (comme <br /> ). Cela signifie que vous n’avez pas à l’écrire deux fois comme la plupart des autres balises que nous avons vues jusqu’à présent. En fait, nous n’avons pas besoin de séparer une section de texte, nous voulons simplement insérer une image à une position spécifique.

En bref, insérer une image en HTML5 est très facile, tant que vous savez indiquer la position de l’image, comme nous l’avons appris dans le lien.
La plus grande « difficulté » (si vous pouvez l’appeler la difficulté) est de choisir le bon format d’image. Ici, c’est une photo, donc c’est évidemment le format JPEG que nous utilisons.