Trois formats d’images sont adapt\u00e9s \u00e0 cet usage : <\/p>\n\n\n\n
- \n
- – le GIF <\/strong>(Graphic Interchange Format)<\/em> : images g\u00e9n\u00e9ralement anim\u00e9es, qui supportent la transparence (le fond d’une image GIF peut s’adapter \u00e0 l’arri\u00e8re-plan de la page o\u00f9 elle est ins\u00e9r\u00e9e)<\/em>.<\/li>\n\n\n\n
- – le JPG <\/strong>ou JPEG<\/strong> (Joint Photographic Expert Group)<\/em> : format le plus courant qui ne supporte pas la transparence et dont les images sont assez volumineuses si elles ne sont pas compress\u00e9es (perte de qualit\u00e9)<\/em>.<\/li>\n\n\n\n
- – le PNG <\/strong>(Portable Network Graphic)<\/em> : sa compression ne d\u00e9grade pas l’image et il supporte la transparence.<\/li>\n<\/ul>\n\n\n\n
Trouver des images sur le Web<\/strong><\/h4>\n\n\n\n
On peut r\u00e9cup\u00e9rer de nombreuses images sur le Web, il faut cependant v\u00e9rifier qu’elles sont libres de droit (c’est souvent le cas pour un usage personnel mais pas dans un cadre commercial)<\/em>.
Pour enregistrer une image se trouvant sur le Web, il suffit g\u00e9n\u00e9ralement d’un clic droit suivi de \u201cEnregistrer l’image sous…\u201d<\/em><\/strong>.<\/p>\n\n\n\nIns\u00e9rer une image dans une page HTML<\/strong><\/h4>\n\n\n\n
On utilise pour cela la balise <img> accompagn\u00e9e de l’attribut src (abr\u00e9viation de source)<\/em> : <\/p>\n\n\n\n
\n\n<img src=\"https:\/\/cdscweb.fr\/chat-robaze\/
wp-content\/uploads\/thunderbird.png\"
width=118\" height=\"126\"><\/pre>\n\n\n\nLa balise <img> comporte un certain nombre d’attributs :<\/p>\n\n\n\n
- \n
- – width <\/strong>: largeur de l’image<\/li>\n\n\n\n
- – height <\/strong>: hauteur de l’image\n
- \n
- Ces deux attributs ne sont n\u00e9cessaires que si on souhaite afficher l’image dans une taille plus petite que l’original<\/em>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- – alt <\/strong>: affichage alternatif de texte, pour les personnes malvoyantes ou en cas d’impossibilit\u00e9 d’affichage<\/li>\n<\/ul>\n<\/div>\n\n\n\n
\n![\"\"](\"https:\/\/cdscweb.fr\/chat-robaze\/wp-content\/uploads\/thunderbird.png\")
<\/a><\/figure>\n<\/div>\n\n\nL’image ci-dessus est stock\u00e9e chez l’h\u00e9bergeur du site.
Si on clique dessus elle s’affiche \u00e0 sa taille r\u00e9elle (309×329)<\/em>.<\/p>\n\n\n\nAttention : pour que l’image apparaisse correctement, il faut bien indiquer son emplacement <\/strong>(son adresse, voir ci-dessus)<\/em>.
Si elle est stock\u00e9e dans le m\u00eame dossier que la page o\u00f9 on l’ins\u00e8re, alors seul son nom sera n\u00e9cessaire.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\nLe \u201cpoids\u201d des images<\/strong><\/h4>\n\n\n\n
Des images trop volumineuses risquent de poser probl\u00e8me : <\/p>\n\n\n\n
- \n
- – Elles sont stock\u00e9es dans un espace accord\u00e9 par l’h\u00e9bergeur du site, et cet espace n’est pas illimit\u00e9 (ou alors \u00e7a risque de co\u00fbter beaucoup plus cher !)<\/em>.<\/li>\n\n\n\n
- – Elles ralentissent le fonctionnement du site (m\u00eame si le Web a beaucoup progress\u00e9 dans la vitesse d’affichage des pages)<\/em>.<\/li>\n\n\n\n
- – Et surtout elles ne servent \u00e0 rien ! Le seul int\u00e9r\u00eat d’une image volumineuse est sa qualit\u00e9 d’impression, et les images d’un site ne sont g\u00e9n\u00e9ralement pas l\u00e0 pour \u00eatre imprim\u00e9es mais simplement vues : voir l’exemple ci-dessous et se reporter aux pages consacr\u00e9es aux pixels<\/a><\/em><\/strong> et \u00e0 la taille des images<\/a><\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
Une image en 2480 pixels par 3508, avec une r\u00e9solution de 300 pixels par pouce <\/strong>(impression A4)<\/em> p\u00e8se 3 Mo et un \u00e9cran d’ordinateur moyen ne peut l’afficher qu’\u00e0 25 % de sa taille r\u00e9elle.
La m\u00eame image, en 602 pixels par 850 avec une r\u00e9solution de 96 pixels par pouce, s’affiche \u00e0 sa taille r\u00e9elle sur l’\u00e9cran et p\u00e8se environ 300 Ko <\/strong>(10 fois moins !)<\/em> .<\/strong>
<\/p>\n\n\n\n<\/div>\n\n\n\nDans le prochain article, il sera question des vid\u00e9os.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
- – Elles ralentissent le fonctionnement du site (m\u00eame si le Web a beaucoup progress\u00e9 dans la vitesse d’affichage des pages)<\/em>.<\/li>\n\n\n\n
- – alt <\/strong>: affichage alternatif de texte, pour les personnes malvoyantes ou en cas d’impossibilit\u00e9 d’affichage<\/li>\n<\/ul>\n<\/div>\n\n\n\n
- – height <\/strong>: hauteur de l’image\n
- – le JPG <\/strong>ou JPEG<\/strong> (Joint Photographic Expert Group)<\/em> : format le plus courant qui ne supporte pas la transparence et dont les images sont assez volumineuses si elles ne sont pas compress\u00e9es (perte de qualit\u00e9)<\/em>.<\/li>\n\n\n\n