Le corps Le pied de page Les titres Les paragraphes Les liens Les listes Les tableaux Tableau plus complexe Les images.
Les images.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Les formats d'images. | Le format d'une image est déterminé au moment de l'enregistrement... |
| Insérer une image. | Pour intégrer une image, vous devez l'insérer dans un paragraphe... |
| Accessibilité | L'attribut « alt » qui idéalement ne doit pas contenir plus de 60 caractères... |
| Vignettes (Thumbnails) | Une vignette (thumbnails) est en fait une petite image cliquable... |
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'image sur le web. Mais comment 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ée 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 offre une qualité d'image haute résolution.
- .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.
Ouvrez votre image avec votre programme de retouche et sauvegardé-là en choisissent une des trois extensions mentionner plus haut.
Cela fait, optimiser votre image et toute autre image contenues dans votre dossier chez Smush qui diminue le poids de celle-ci. Utilisez l'onglet "UPLOADER". Vous pourrez télécharger le programe par la suite.
Insérer une image.
Pour intégrer une image sur une page, vous devez l'insérer dans un paragraphe.
1
|
<p><img src="dossier_images/mon-image.png" alt="Texte alternatif (60 caractères)" title="Texte descriptif" width="400" height="200" /></p>
|
Accessibilité
L'attribut « alt » qui idéalement ne doit pas contenir plus de 60 caractères peut ne pas être assez clair pour qu'un visiteur ayant un handicap visuel saisisse la valeur d'une image surtout si elle est complexe.
Grâce à l'attribut « longdesc », toute l'information véhiculée par l'image sera accessible à chaque utilisateur, quel que soit son handicap.
1
|
<p><img src="dossier_images/mon-image.png" alt="Texte alternatif (60 caractères)" longdesc="image001.html" width="400" height="200" /></p>
|
Ouvrez un nouveau document avec Notepad++ et insérez votre texte entre deux guillemets. Enregistrer là en lui donnant le même nom attribué à « longdesc » de votre image avec l'extension .html. Le visiteur ayant un handicap pourra consulter cette description avec un logiciel prévu à cet effet comme Jaws (Job Access With Speech) qui transforme un texte affiché sur un écran en un texte oral ou un texte en braille,
Optimisation — Utiliser des vignettes (thumbnails).
Vous est-il arrivez d'attendre lors de l'ouverture d'un site contenant plusieurs photos ? Le problème est que les images sont affichées avec leur valeur d'origine et sont trop volumineuses pour la connexion internet que vous possédez. Pour éviter ce contre temps, utiliser des vignettes.
Un « thumbnails » est en fait une petite image, une petite reproduction de l'original. Pour ce faire, ouvrez la photo originale avec votre éditeur d'image et réduisez la taille de celle-ci à 50 %, voir davantage. Généralement cette option se trouve sous l'onglet image dans la barre d'outils. Puis Enregistré sous... et donné lui un nom, par exemple vignette.png. Insérer le lien-image comme suit dans votre page HTML.
1
|
<p class="image"><a href="images/mon_image.png" onclick="window.open(this.href); return false;" ><img src="images/vignette.png" alt="Mon modèle." title="Cliquez pour agrandir l'image d'origine" width="50" height="50" ></a>
|
Résultat attendu (cliquez sur l'image) :
Le poids de la vignette est de 187 ko. ce qui n'est pas très lourd.
Le poids de l'image originale est de 1,88 Mo. Sa largeur est de 1024 pixels par 640 pixels pour la hauteur. Si vous avez plusieurs images de grandes dimensions comme des fonds d'écran (wallpaper), vous laisserais le choix au visiteur d'ouvrir l'image originale qui sera alors téléchargée comme une page web, mais sans mise en page.
Le CSS
Lorsque vous voulez ajouter des paramettres CSS à une image vous devez spécifier la classe et rajouter à celle-ci img avec un espace entre les deux. Puisque l'image thum est un lien, il y aura une affreuse bordure bleue autour. Pour annuler ce cadre bleu, nous écrivons border:none. Pour insérer un texte ou une autre image à gauche, nous utilisons float:left et une zone tampon à droite pour que le texte ne soit pas collé sur la photo.
1
2
3
4
5
|
.image img{
border:none;
float:left;
padding-right:10px
}
|
Comment mettre en valeur ses photos ?
Ajouter ce site à vos favoris
