Attributs |
class | pour attribuer une classe |
id | pour attribuer un identificateur |
src | l'adresse relative au fichier dans lequel il faut charger l'image |
title | pour afficher une infobulle au survol de l'image par la souris |
alt | définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorecte ou si l'image n'est pas encore téléchargée) |
border | pour une bordure, border=0 si on veut empêcher une bordure |
height | hauteur de l'image (uniquement en px) |
width | largeur de l'image (uniquement en px) |
usemap | nom de la carte placée en calque sur l'image |
Préparer les images
La taille et le poids de l'image sont définits avant de l'insérer car
les attributs WIDTH et HEIGHT n'ont aucune influence sur le poids de l'image!
Trouver des images (libres de droit)
Le site Unsplash propose des images libres de droit.
Compresser/dimensionner les images
Il existe une série de logiciels en ligne permettant de préparer les images , I love image par exemple.
Cette petite application permet de compresser, dimensionner, concertir, etc.
Le contraste général
Le contraste permet d'améliorer la lisibilité, le site Color contrast checker permet d'évaluer la qualité du contraste entre les couleurs de fond et les couleurs de texte.
Utiliser un favicon
Vous devez utiliser des images .png pour créer vos favicons.
Pour construire l'image, le plus simple est d'utiliser une application en ligne du type
générateur de favicons de 1&1, il suffit de fournir l'image
au site et celui-ci vous renvoie les .png correspondants.
Ensuite vous intégrer la ligne suivante dans le <head> du site.
Idéalement l'image favicon doit être située dans le dossier racine du site afin d'être détectée automatiquement.
Démo
<link rel="icon" type="image/png" href="favicon-16x16.png">