Les images.
De nos jours, les programmes de retouche d'image offrent une multitude de possibilités. Les navigateurs ainsi que les connexions hautes vitesses facilitent grandement la diffusion d'images sur le web. Mais comment insérer et optimiser l'utilisation d'image sur votre site ? C'est ce que nous verrons ici.
Les formats
Le format d'une image est déterminé au moment de l'enregistrement de celle-ci.
- .jpeg, jpg, jpe — est le format idéal pour les photos.
- .png — si vous créez un menu, une bannière ou tout ce qui n'est pas une photographie.
- .gif — parfait pour les icônes qui peuvent être animées le cas échéant.
Leurs caractéristiques
- .jpeg, jpg, jpe — ne supporte pas la transparence, mais idéal pour les photos.
- .png — supporte la transparence et offre une très bonne qualité d'image.
- .gif — supporte la transparence et est moins gourmande en ressource système.
Si vous n'avez pas de photos sur votre ordinateur, trouvez-en une sur le web et enregistré-là sur le bureau. Faites un clic droit dessus puis propriété au bas du menu contextuel. Vous avec le nom de la photo ainsi que son extension, par exemple nom_de_la_photo.jpg.
Pour changer l'extension ou le format de la photo, ouvrez votre programme de retouche d'image. Si vous n'avez que Paint, même s'il peut très bien s'acquitter de cette tâche, je vous suggère de télécharger The GIMP (français) ici. Il existe plusieurs tutoriels sur le web qui vous aideront à vous familiariser avec ce programme complet et gratuit.
Faites un clic droit sur la photo et dans le menu contextuel, trouvez "Ouvrir avec" et choisissez votre programme préférer puis sauvegardé-là en choisissant une des trois extensions mentionner plus haut. Je vous suggère ".png" pour vos boutons, bannières et arrière-plan bref, pour tout ce qui est habillage, mais "jpg" si vous insérez une photo.
Cela fait, optimiser votre image et toute autre image contenues dans votre dossier chez Smush qui diminue le poids de celle-ci.
Insérer une image.
Pour intégrer une image sur une page, vous devez l'insérer dans un paragraphe.
1
|
<p><img src="chemin-complet-de-image/mon-image.png" alt="Texte alternatif (60 caractères)" title="Texte descriptif" width="400" height="200" /></p>
|
Indiquez le chemin complet, le nom et l'extention exacte sinon, l'image ne sera pas affiché. Remarquez l'élément alt et la description. C'est ce qui sera affiché à l'écran si l'image ne s'affiche pas pour l'une ou plusieurs des raisons mentionnées. L'élément title est le titre de l'image, par exemple "Nos vacances à Montréal". Les valeurs 400 et 200 définissent exactement les dimmensions de l'image.













