I. Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original de Paul Underwood, Fake Images Please.
II. Introduction▲
Lorsque vous créez un nouveau site Web, vous passez obligatoirement par quelques étapes avant de finaliser le design.
Tout d'abord, obtenir les besoins (cahier des charges par exemple) du client ; à la suite de quoi vous pouvez créer une maquette que vous pourrez montrer au client afin d'être sûr que votre production correspond bien à ses attentes.
Grâce à cette maquette vous aurez un aperçu visuel basique de ce à quoi doit ressembler votre site Web, mais ce n'est pas encore très abouti. C'est à partir de là que vous commencez à créer les prototypes de vos pages. Et pour ce faire vous avez besoin de contenu type (texte) et d'images types.
Pour le texte rien de plus simple : il suffit d'insérer le très connu Lorem Ipsum. Pour les images en revanche le travail est plus fastidieux. Vous devez les créer de toutes pièces et si vous avez besoin de modifier leurs tailles par la suite vous êtes obligés de repasser par l'étape d'édition via un éditeur d'images quelconque.
Une solution possible est d'utiliser un service de « placeholder » comme Fake Images Please. Ce service vous permet de créer des images types de la taille que vous souhaitez en utilisant leur API, ce qui signifie que vous pouvez simplement utiliser ces images en les insérant en HTML.
III. Insérer une image de 300x300▲
La méthode la plus simple pour créer une image est de lui passer un paramètre pour la taille. Cet exemple va créer une image de 300 pixels de large et 300 pixels de haut.
<img src="http://fakeimg.pl/300/">IV. Insérer une image de 250x100▲
Vous pouvez également passer en paramètre deux tailles. Votre image sera alors créée avec la taille suivante : largeurxhauteur.
<img src="http://fakeimg.pl/250x100/">V. Insérer une image de 250x100 avec un arrière-plan rouge▲
Vous pouvez aussi préciser la couleur de l'arrière-plan. Pour ce faire il vous suffit d'ajouter un deuxième paramètre dans l'URL de votre image.
<img src="http://fakeimg.pl/250x100/ff0000/">VI. Insérer une image de 350x200 avec un arrière-plan rouge et un texte noir▲
Vous pouvez passer un troisième paramètre afin de préciser une couleur pour le texte à l'intérieur de l'image. Pour créer une image de 350x200, avec un arrière-plan rouge et un texte noir, utilisez le code suivant :
<img src="http://fakeimg.pl/350x200/ff0000/000">VII. Insérer une image de 350x200 avec un texte personnalisé▲
Vous pouvez modifier le texte contenu dans l'image en passant en paramètre une chaîne de caractères « text » dont la valeur sera le nouveau contenu texte de votre image.
<img src="http://fakeimg.pl/350x200/?text=Paulund">VIII. Insérer une image de 350x200 avec une police personnalisée pour le texte▲
Non seulement vous pouvez modifier le texte contenu dans l'image, mais vous pouvez également changer la police utilisée pour ce texte. Pour cela il suffit d'ajouter le paramètre « font » dont la valeur sera une police Google fonts.
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster">IX. Conclusion▲
Nous avons vu dans cet article comment utiliser très simplement des images types pour nos prototypes de pages Web. Le tout sans avoir besoin d'un éditeur d'images. Cette méthode permet un gain de temps considérable !
X. Liens▲
XI. Remerciements▲
Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.