IMG

Syntaxe

Paramètres

Description

Cette balise permet d'inclure une référence d'image au document.

Remarques

• Quand utiliser cette balise ? Cette balise ne devrait seulement être utilisé que dans une situation d'affichage de contenu, tandis que les autres images (logo, icônes,...) devrait être situé dans un sprite d'image. Ainsi, si vous désactivez les CSS, vous verrez encore les images de contenu mais pas les logos et icônes non pertinent dans cette situation.
• Image n'affichant pas dans IE6, IE7 ou IE8 mais s'affiche dans les autres navigateurs : Généralement, ce problème vient du fait que les anciennes versions d'IE ne supportaient pas la palette de couleur CMYK, ils supportaient uniquement les RVB (RGB). Pour résoudre le problème, il suffit de resauvegarder l'image avec une palette RVB et il sera visible sous IE.
• Générateur de Sprites CSS : Étant donné le temps de chargement très élever de plusieurs images dans une page, il peut être préférable de regrouper les images dans un même fichier et de découper chacune de ses images avec une feuille de style (CSS). Pourquoi ? Chaque fichier téléchargé d'un site Web transmet également de nombreuses informations d'entête par le serveur Web, lesquelles ne sont pas vraiment utiles dans ce contexte. De plus, les images ont également des informations répétitives se trouvant dans chacune des images. Il existe de nombreux site en ligne offrant ce genre de possibilité, comme par exemple «http://fr.spritegen.website-performance.org/»,...
• Conflit : Dans la plupart des navigateurs, le paramètre «style» est prioritaire sur le paramètre «class» ou «id». Ainsi, si vous définissez aux deux endroits, des valeurs différentes, par exemple «style="color:red;"» et «color:green» dans la classe, c'est le paramètre «style» avec son «color:red» qui sera utilisé par le navigateur Web. Il est à noter qu'il est préférable de ne pas mettre des informations contradictoires comme celle-ci (deux paramètres identiques avec des valeurs différentes) car le résultat peut malgré tout demeurer imprévisible.
• Ancienne pratiques : Au début du HTML, la bande passante était très limitée, par exemple, le modem avec un taux de transfert de quelques centaines d'octets par secondes. Le chargement des pages était très lent, et pour accélérer le processus beaucoup de développeurs enlevaient délibérément les guillemets «"» au paramètre de leur balise afin de réduire la taille de leur page HTML. Par la suite, à cause des résultats souvent imprévisible que cela causait par à un IE versus les autres navigateurs, les idées de la norme du w3c se sont imposées et le retour des guillemets au paramètres de balises est revenue.
• Les paramètres peuvent être indiqué dans l'ordre que vous le souhaitez. Il n'existe pas d'obligation de les mettre dans un ordre précis pour les navigateurs Web.
• Courriel : Dans un courriel, l'adresse de l'image peut-être soit un lien absolue, une relation avec un fichier en attachement dans le courriel (lequel est généralement un <IMG SRC="cid:maphoto">) ou enfin un encodage en base64 directement dans la balise (soit le format <img src="data:image/type;base64,...>).
• Il est possible de changer la source d'une image à partir d'un CSS (feuille de style) en utilisant content:url. Par exemple, on peut changer à partir d'une classe l'image de la manière suivante :
1. <style>
2. .MaClass123{
3.      content:url("https://www.gladir.com/IMAGES/logo.gif");
4. }
5. </style>
6.  
7. <img class="MaClass123"/>

Exemples

L'exemple suivant permet d'afficher une image de 19x21 pixels avec un URL absolue :

on obtiendra le résultat semblable suivant :

L'exemple suivant permet d'afficher une image avec un URL relatif :

on obtiendra le résultat semblable suivant :

L'exemple suivant permet d'afficher une image GIF encodé directement en base64 dans la balise :

on obtiendra le résultat semblable suivant :

Voici un exemple permettant d'afficher une image :

on obtiendra le résultat semblable suivant :

L'exemple suivant permet de voir immédiatement l'image devant être téléversé avant même de la soumettre par le formulaire (fonctionne uniquement sous FireFox ou IE6, IE7, IE8, IE9 (s'il est inclus dans les sites de confiance des options de sécurités d'IE)) :

on obtiendra le résultat semblable suivant :

Si le CSS3 est supporté, voici un exemple permettant d'effectuer une rotation de l'image de 10 degrées :

on obtiendra le résultat semblable suivant :

Voir également

Articles - URL (Uniform Resource Locator)

Références

HTML - The Definitive Guide, 3rd Edition, Edition O'Reilly, Chuck Musciano, Bill Kennedy, 1998, ISBN: 1-56592-492-4, page 514 à 515
La Bible Micro Application HTML & Développement Web, Edition Micro Application, Stefan Munz, Wolfgang Nefzger, 2003, ISBN: 2-7429-2898-7, page 615