Insérer une image

Introduction

Dans ce cours, nous allons voir comment insérer une image dans notre site Web. Il est très simple d’ajouter une image ou une photo. Cependant, il existe différents formats d’images que l’on peut utiliser, et pour que votre site se charge avec efficacité et rapidité, il est nécessaire de ne pas les choisir au hasard.

1-Les formats

• • Le JPEG

Le format JPEG pour joint photographic expert group, est un des formats les plus connus. Il est conçu pour réduire le poids des photos en ayant un faible impact sur leur qualité. Cependant, si vous l’utilisez sur une image qui n’est pas une photo, celle-ci risque de « baver » un peu. Dans ce cas présent, on privilégiera le format PNG.

• • Le PNG

Le PNG pour portable network graphics, est adapté à la plupart des graphiques et de tout ce qui n’est pas photo. Il a deux gros avantages : il peut être rendu transparent et il ne modifie pas la qualité de l’image. Dans le cas d’une photo, la compression sera toujours moins puissante qu’au format JPEG. C’est pourquoi je recommande de ne pas utiliser ce format pour les photos.

• • Le GIF

Le GIF est un format assez vieux (limité à 256 couleurs), qui est bien moins performant que le PNG. En effet, ses images sont de manière générale plus lourde et la transparence est de moins bonne qualité. Cependant, il conserve encore un très gros avantage que le PNG n’a pas : il peut être animé.

Pour résumer, on utilise un format adapté à l’image voulue. Si vous avez donc une photo, utilisez un JPEG. Pour un graphique ou un dessin informatique avec beaucoup de couleurs utilisez le PNG. Si vous avez un graphique avec peu de couleurs ou une image animée, servez vous du format GIF.

 

2-Les erreurs à éviter

• N’utilisez pas d’autres formats sans les connaître. La plupart sont à bannir pour un site Web, car non compressés. Si vous le faites, le temps de chargement de votre site sera vraiment très long.
• Donnez des noms corrects à votre image. Ne mettez ni espace ni accent et vous éviterez les désagréments. Si vous avez besoin de séparer des mots, utilisez un caractère comme « _ » ou « -« . Pour optimiser votre référencement, le nom doit être en rapport avec l’image ou la décrire.

 

3-Insérer l’image

La balise qui nous permet d’insérer une image est une balise orpheline de tag img. Elle doit contenir obligatoirement 2 attributs :

• La source src dans la balise, qui indique où se trouve l’image exactement de la même façon que le lien, avec un chemin absolu ou relatif.
• Un texte alternatif alt qui a deux principales utilités : participer au référencement de l’image (pour optimiser toujours plus, mettre un texte différent du nom de l’image) et s’afficher à la place de l’image si le navigateur ne peut pas le télécharger.
• Je conseille aussi de rajouter l’attribut title qui permet d’afficher une infobulle lorsque la souris survole l’image. Vous pouvez y mettre le même texte que le nom de l’image ou un commentaire pour la décrire.

Attention au sens de l’image. Si vous mettez une image décorative, qui n’est pas utile à la compréhension du contenu que vous créez, alors vous pouvez la placer dans votre paragraphe, entre deux phrases. Mais si vous insérez une image qui illustre vos propos et aide à la compréhension, alors je vous recommande de l’insérer au sein de l’élément figure. Vous ne verrez pas de changement visuellement, mais cet élément a une valeur sémantique pour votre navigateur et pour le référencement. Il vous permet aussi de légender votre image en insérant la balise de tag figcaption. Vous pouvez voir ci-dessous un exemple d’insertion de l’image dans un élément figure, avec une légende :

Conclusion

Au premier abord il est très simple d’insérer une image dans un site Web. Cependant, pour optimiser référencement et vitesse de chargement de son site, il est important de se pencher sur ce sujet plus en détail.