L’image est primordiale pour illustrer une page, appuyer un commentaire, rendre un site plus convivial, original et agréable à lire.
Choisir des images pour le Web
Trois formats d’images sont adaptés à cet usage :
- – le GIF (Graphic Interchange Format) : images généralement animées, qui supportent la transparence (le fond d’une image GIF peut s’adapter à l’arrière-plan de la page où elle est insérée).
- – le JPG ou JPEG (Joint Photographic Expert Group) : format le plus courant qui ne supporte pas la transparence et dont les images sont assez volumineuses si elles ne sont pas compressées (perte de qualité).
- – le PNG (Portable Network Graphic) : sa compression ne dégrade pas l’image et il supporte la transparence.
Trouver des images sur le Web
On peut récupérer de nombreuses images sur le Web, il faut cependant vérifier qu’elles sont libres de droit (c’est souvent le cas pour un usage personnel mais pas dans un cadre commercial).
Pour enregistrer une image se trouvant sur le Web, il suffit généralement d’un clic droit suivi de “Enregistrer l’image sous…”.
Insérer une image dans une page HTML
On utilise pour cela la balise <img> accompagnée de l’attribut src (abréviation de source) :
<img src="https://cdscweb.fr/chat-robaze/
wp-content/uploads/thunderbird.png"
width=118" height="126">
La balise <img> comporte un certain nombre d’attributs :
- – width : largeur de l’image
- – height : hauteur de l’image
- Ces deux attributs ne sont nécessaires que si on souhaite afficher l’image dans une taille plus petite que l’original.
- – alt : affichage alternatif de texte, pour les personnes malvoyantes ou en cas d’impossibilité d’affichage
L’image ci-dessus est stockée chez l’hébergeur du site.
Si on clique dessus elle s’affiche à sa taille réelle (309×329).
Attention : pour que l’image apparaisse correctement, il faut bien indiquer son emplacement (son adresse, voir ci-dessus).
Si elle est stockée dans le même dossier que la page où on l’insère, alors seul son nom sera nécessaire.
Le “poids” des images
Des images trop volumineuses risquent de poser problème :
- – Elles sont stockées dans un espace accordé par l’hébergeur du site, et cet espace n’est pas illimité (ou alors ça risque de coûter beaucoup plus cher !).
- – Elles ralentissent le fonctionnement du site (même si le Web a beaucoup progressé dans la vitesse d’affichage des pages).
- – Et surtout elles ne servent à rien ! Le seul intérêt d’une image volumineuse est sa qualité d’impression, et les images d’un site ne sont généralement pas là pour être imprimées mais simplement vues : voir l’exemple ci-dessous et se reporter aux pages consacrées aux pixels et à la taille des images.
Une image en 2480 pixels par 3508, avec une résolution de 300 pixels par pouce (impression A4) pèse 3 Mo et un écran d’ordinateur moyen ne peut l’afficher qu’à 25 % de sa taille réelle.
La même image, en 602 pixels par 850 avec une résolution de 96 pixels par pouce, s’affiche à sa taille réelle sur l’écran et pèse environ 300 Ko (10 fois moins !) .
Dans le prochain article, il sera question des vidéos.