Utiliser les images avec HTML5

Voici un des piliers du webdesign, c’est l’utilisation des images en HTML 5.

Les images

La grande majorité des sites Internet possèdent toujours des images, une bannière, un logo, des illustrations avec les articles.

Aujourd’hui, les format JPEG, GIF, et PNG sont pris en compte par les principaux navigateurs Web.

Le format GIF était utilisé au début du web ; rappelez-vous les GIF animés, il y en avait partout de ces gifs animés, plus ou moins jolis, bien évidemment. C’est une compression sans perte, maintenant il faut savoir que le GIF a été remplacé par d’autres formats.

Vous avez le format JPEG qui possède une compression vraiment efficace de 16 millions de couleur par contre c’est une compression avec perte, suivant la valeur de la compression de votre image, elle s’affiche plus ou moins bien, vous avez une perte de qualité. Par contre, les JPEG ne prennent pas beaucoup de place, c’est leur avantage.

Et vous avez le format PNG qui est de plus en plus utilisé, parce que non seulement il gère la transparence, mais réunit le meilleur du JPEG et du GIF, donc on peut faire de l’animation avec le PNG, c’est un format ouvert non breveté et qui compresse les images HTML.

Il existe aussi un nouveau format, WebP développé par Google. Il commence à prendre de plus en plus d’importance, l’avantage du format WebP est qu’il réduit la taille des fichiers de 30 pour cent, par rapport au format PNG et sans perte de qualité perceptible. Ce format est voué à se développer, vous allez le voir de plus en plus. Globalement vous verrez souvent du format PNG et JPEG.

L’ajout d’une image

Pour ajouter une image dans votre document HTML, vous avez la balise img avec différents attributs, les attributs height et width pour définir en pixels respectivement la hauteur et la largeur de l’image.

L’attribut alt contient une description de l’image, vous mettez une description, un texte associé à l’image, qui sera affiché si l’image ne peut pas l’être, par exemple si l’utilisateur a désactivé leur affichage ou dans le cas d’accessibilité, ce texte sera lu aux aveugles.

Exemple :

<img src="https://www.develop4fun.fr/wp-content/uploads/2016/10/develop4fun-fr.png" alt="Develop4fun">

Vous chargez l’image avec l’attribue src, vous mettez le lien vers votre image, si c’est dans le même répertoire c’est comme les fichiers HTML dans l’article sur les liens, logo.png ; si c’est dans un autre répertoire vous mettez le nom de l’autre répertoire repertoire/logo.png ou vous pouvez remonter d’un répertoire ../logo.png.

Vous pouvez afficher des images HTML qui sont sur un autre domaine, un autre site Internet que le vôtre, en donnant l’URL complète : https:// www.develop4fun.com/ images/ logo.png.

Remarquez à la fin le slash, pour fermer la balise image ; comme nous vous l’avons dit certains développeurs n’utilisent pas le symbole slash tout à la fin, personnellement je vous conseille de l’utiliser. Votre code sera ainsi valide suivant la norme XHTML pour le WC3.

L’image logo.png sera affichée avec une largeur de 150 pixels et une hauteur de 150.

L’ajout d’un lien sur une image

Vous pouvez également mettre des liens sur une image. Vous l’avez vu souvent dans un site Internet, le header donc la bannière en haut, c’est un lien qui renvoie vers la page d’accueil du site Internet. Vous mettez votre balise image et autour de votre balise image, vous ouvrez la balise a, href = accueil.php et vous refermez la balise a, après votre balise image, comme vous avez dans l’exemple ci-dessous :

<a href="https://www.develop4fun.fr/"> 
   <img src="https://www.develop4fun.fr/wp-content/uploads/2016/10/develop4fun-fr.png" alt="Develop4fun">
</a>

La bordure de l’image

Vous pouvez, bien évidemment, rajouter du CSS sur votre image, vous allez le voir dans les prochains chapitres, les balises CSS 3 permettent de faire des effets de profondeur, des effets d’ombre, des bordures sur votre image.

Dans l’exemple précédent, pour supprimer la bordure sur votre image, il suffit d’utiliser l’attribut style, et vous faites border: none, et là, la bordure de votre image ne va pas s’afficher.

<img src="https://www.develop4fun.fr/wp-content/uploads/2016/10/develop4fun-fr.png" alt="Develop4fun" style="border: 3px dotted black;">

L’ajout d’une couleur en arrière-plan

Vous pouvez ajouter une couleur d’arrière-plan pour votre image. Si vous avez une image png avec une couleur transparente, vous pouvez modifier cette couleur et ajouter la couleur que vous souhaitez.

Par exemple, vous définissez le style, avec background-color et un code couleur en hexadécimal, comme ci-dessous :

background-color: #E2A9F3; 

Ainsi, vous pourrez créer une image avec une certaine couleur, de sorte que la taille de l’image soit la plus petite possible (après compression en JPEG, les pixels voisins similaires ne prennent pas de place). Et votre page HTML donnera la couleur voulue à vos images HTML 5 lors du chargement.

Vous faites ainsi gagner du temps à votre utilisateur, puisque l’image sera téléchargée rapidement. Vous pouvez également ajouter une image en arrière-plan, vous avez de plus en plus de site Internet, des blogs WordPress, avec une image en arrière-plan et votre texte qui défile.

Vous utilisez background image avec les mêmes règles de chargement d’un fichier que vues précédemment.

Conclusion

Les images HTML 5 sont ajoutées sur votre page grâce à la balise img qui prend en paramètre le chemin vers votre fichier, comme pour les liens.

Bien que les images soient indispensables à votre site web, n’oubliez pas qu’elles représentent un poids important dans le temps nécessaire à l’affichage de votre site.

Nous verrons plus tard comment optimiser la gestion des images, en les compressant, en utilisant le cache du navigateur, etc.