1. Afficher une image

Notre pokédex est bien joli, mais il est encore un peu triste. Il faudrait qu’on mette une petite photo à côté de nos Pokémons. Je vous propose deux étapes pour apprendre à utiliser des images, car il y a 2 manières différentes de faire, qui ont chacune leurs avantages et leurs inconvénients.

Il existe deux manières d’utiliser des images sur un site. Elles ont chacune leurs avantages et leur inconvénients,  je vous propose donc d’en voir une maintenant, et l’autre dans la prochaine étape.

Les images, comme d’habitude, sont définies par une balise. C’est la balise “img”.

Elle possède plusieurs attributs, mais le plus important est l’attribut “src”, qui renseigne l’adresse de l’image. Nous allons le voir plus en détail, mais d’abord il faut préciser aussi que, tout comme la balise “meta” qu’on utilise pour l’encodage, elle est auto-fermante, c’est-à-dire qu’elle s’utilise seule, sans paire.

Voici un exemple de code d’une balise image :

<img src="https://cdn.pixabay.com/photo/2017/03/15/13/27/rough-horn-2146181__340.jpg">

Qui donne ceci dans un navigateur :

Mais qu’est-ce que c’est que cette série de caractères ? Ça ressemble à une URL, comme ce qu’on avait utilisé pour les liens !

Eh oui ! Tout comme les pages web, les images aussi ont des adresses. Elle peuvent être sur Internet, comme c’est le cas ici, ou alors dans vos fichiers. On parlera du deuxième cas dans la prochaine étape, mais pour l’instant, contentons-nous d’utiliser une URL Internet pour aller les chercher.

Pour récupérer l’URL d’une image, il faut déjà la trouver. Par exemple, en tapant “montagne” sur Google et en allant dans l’onglet “images”. Une fois que vous avez fait votre choix, cliquez-droit dessus, puis sélectionnez “copier l’adresse de l’image” :

TODO => SCREENSHOT IMAGE

Attention, à ne pas confondre avec “copier l’adresse du lien”. Cela permet de faire X, mais cela ne nous intéresse pas pour le moment.

Vous avez alors dans votre presse-papier l’URL de l’image. Vous n’avez plus qu’à la coller dans votre code après l’attribut “src” de votre balise “img”. Et bien sûr, n’oubliez pas d’ajouter les double-quotes.

Plutôt que d’aller chercher vos images sur Google images, je vous conseille d’utiliser Pixabay, c’est un site qui possède des images libres de droits, et que vous pouvez utiliser sans la crainte d’être poursuivi en justice. De plus, même s’il y a moins de choix, les images sont de meilleure qualité en général.

Cette méthode a un avantage, elle permet de rapidement intégrer une image sur notre site sans avoir à la télécharger. Mais sur le long terme, il est plus intéressant d’utiliser la seconde méthode que l’on verra dans la prochaine étape, car l’URL des images que vous mettez dans votre site risque de changer : ces images ne vous appartiennent pas, et rien n’empêche à leur propriétaire de les supprimer ou les modifier. Et dans ce cas elles ne s’afficheront plus.

Vous savez désormais ajouter une image dans votre site, et je vous propose de mettre un portrait de chacun de nos pokémons en dessous de son nom. Dans la prochaine étape, nous verrons comment utiliser une image stockée sur votre ordinateur, ce qui est plus recommandé.