Comment insérer une image GIF sur votre site web

Ajouter une image à votre site web améliore grandement son attractivité pour les visiteurs. Les formats de fichier d'image les plus courants sur le web sont .jpg et .gif. L'Université d'Indiana indique que les fichiers .gif conviennent le mieux aux images aux contours nets avec des dégradés de couleur réduits : dessins animés, texte, art linéaire. Autres avantages du .gif : fond transparent possible et animation. Ajouter un .gif à un site est aussi simple que téléverser un fichier et écrire une phrase.

Étape 1

Ouvrez votre panneau d'administration de site web. Cela diffère pour chacun car cela dépend du serveur d'hébergement ou de programmes comme Dreamweaver pour gérer le site. Il y a deux grands types de logiciels d'édition : éditeur HTML ou WYSIWYG. Smashing Magazine explique que WYSIWYG signifie « What You See Is What You Get » (ce que vous voyez est ce que vous obtenez). Ces programmes rendent la construction de page plus intuitive. Les éditeurs HTML requièrent de comprendre les bases du langage HTML.

Étape 2

Enregistrez votre fichier image .gif dans le dossier « images » ou approprié de votre site. Si vous utilisez un programme sur votre ordinateur, trouvez simplement le bon dossier sur votre disque dur. Si vous utilisez une interface d'administration en ligne, vous devrez téléverser l'image. Naviguez vers le bon dossier dans votre panneau d'administration et suivez les instructions pour téléverser un fichier. Dans la plupart des cas, vous utiliserez un bouton « Parcourir » pour trouver le fichier .gif sur votre ordinateur, puis cliquerez « Téléverser ».

Étape 3

Ajoutez le .gif à la page web. Sur un éditeur WYSIWYG, glissez-déposez l'image où vous la voulez. Prévisualisez le site pour vérifier l'apparence et ajustez si nécessaire.

Si vous utilisez un éditeur de texte HTML, ouvrez la page HTML où le .gif sera placé. Descendez jusqu'au point dans le texte HTML où vous voulez le .gif. Ajoutez la ligne suivante, en remplaçant les informations après les signes « = » par les vôtres et en gardant les guillemets :

<img src="dossier/fichier.gif" alt="texte alternatif" width="largeur" height="hauteur" hspace="espace horizontal" vspace="espace vertical" border="épaisseur bordure">

« img src » signifie « source de l'image ». L'information entre guillemets doit lister le nom du dossier où réside le .gif puis le nom du .gif. L'attribut « alt » est le texte affiché si le lien image est cassé, si le visiteur a désactivé les images, ou pour les lecteurs d'écran. « Width » et « height » définissent la taille affichée en pixels. Les attributs d'espace définissent l'espace vertical/horizontal autour de l'image par rapport au contenu environnant. L'attribut « border » ajoute une bordure et le nombre dans les guillemets détermine son épaisseur.

Astuce

Un usage courant du .gif est le « spacer.gif ». C'est un carré transparent de 1 pixel sur 1 pixel. Ce fichier donne aux concepteurs la possibilité d'ajouter efficacement de l'espace prévisible à divers endroits de la mise en page. Pour ajouter de l'espace sous un bloc de texte, placez le spacer.gif dans son propre paragraphe et ajustez hauteur/largeur selon vos préférences.

Avertissement

Sauvegardez une copie de la page web que vous modifiez avant d'ajouter le nouveau .gif et travaillez hors ligne si possible jusqu'à satisfaction. Cela évite que des pages d'essai ne deviennent publiques et protège votre capacité à recommencer en cas de difficulté.