Le langage HTML/Images
Une image est insérée avec la balise codice_1 en spécifiant avec l'attribut codice_2 "(source)" le chemin de l'image à inclure (sous la forme d'une adresse réticulaire, URL) et avec l'attribut codice_3 l'éventuel texte de remplacement de l'image :
<img src="mon_image.png" alt="texte si l'image n'est pas affichée">
<img src="mon_image.png" alt="texte si l'image n'est pas affichée" />
Par la suite, nous considérerons du HTML. Pour du XHTML, ajoutez simplement la barre de fraction avant la fermeture de la balise.
La balise codice_1 peut avoir divers attributs facultatifs. Seuls les attributs codice_2 et codice_3 sont obligatoires.
L'attribut codice_2.
L'attribut codice_2 contient donc l'adresse à laquelle on va chercher l'image (voir le chapitre "Liens"). On peut utiliser une adresse absolue ou relative.
Il faut cependant proscrire l'inclusion des objets (images, sons, vidéo) situés sur d'autres sites, ce que l'on appelle des « liens à chaud » "(hot links)". En effet, cela génère du trafic sur le serveur cible au lieu de son propre serveur, ce que le serveur cible peut considérer comme du « vol de bande passante ». Par ailleurs, le fait que l'on utilise l'objet original n'implique pas un respect du droit d'auteur : certes on n'a pas fait de copie de l'objet, mais on utilise l'objet, et cela doit se faire avec l'accord de l'auteur et/ou de ses ayants droit.
Donc, si par exemple notre page web est codice_20 et que l'on veut inclure l'image codice_21, les deux solutions acceptables sont :
<img src="/image/img1.png" … > <br>
Reproduit avec l'aimable autorisation de
<a href="http://www.autresite.com/">Autresite.com</a>,
tous droits réservés 
Voir l'illustration sur l'article dédié
du site <a href="http://www.autresite.com/lapage.html">Autresite.com</a>
L'attribut codice_3.
Il est nécessaire de donner, pour chaque image, un texte de remplacement pour les navigateurs ne supportant pas l'affichage d'images ou pour des raisons d'accessibilité des pages web (cf normes W3C). Le texte de remplacement est spécifié par l'attribut codice_3 :
<img src="bienvenue.png" alt="Bienvenue !" >
Lorsqu'une image ne véhicule pas d'information, ce texte doit être vide (n'oubliez pas que le codice_3 est lu ou rendu en braille pour un malvoyant), l'attribut est alors présent sous la forme :
<img src="image_decorative.png" alt="" >
L'attribut codice_14.
Il est possible d'attribuer un titre à chaque image en plus de l'information alternative "(alt)". L'attribut codice_14 doit contenir une information "optionnelle" sur l'image, ou reproduire l'attribut codice_3:
Les navigateurs affichent cette information dans une infobulle ("tooltip" en anglais) :
<img src="renard.png" alt="Renard en promenade" title="Renard en promenade" >
Les attributs codice_16 et codice_17.
Si l'on omet ces attributs, l'image s'affiche en grandeur réelle (pixel pour pixel).
Si l'on indique une des dimensions (la largeur ou la hauteur), l'autre dimension est calculée pour que l'image s'affiche avec ses proportions originales.
Le fait d'indiquer les deux dimensions peut faciliter l'affichage : les images sont chargées après le texte, le navigateur peut ainsi réserver la place nécessaire, sinon, il doit décaler le texte au fur et à mesure que les images sont chargées. Il peut donc être intéressant d'indiquer les dimensions même si l'on utilise les dimensions originales de l'image. Cependant, l'auteur doit bien s'assurer que les proportions (rapport largeur/hauteur) sont respectées, sous peine que l'image s'affiche déformée.
Image contenant des liens.
Une image elle-même peut être à l'intérieur d'une balise codice_34 : on peut alors cliquer sur l'image pour accéder à la ressource désignée. Par exemple :
<a href="http://fr.wikibooks.org">
 <img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Wikibooks-logo-en-noslogan.svg" alt="Wikibooks" />
</a> 
L'image peut également être découpée en zones cliquables menant vers des ressources différentes. Pour cela :
Par exemple :
<img src="image.png" alt="Carte du site" usemap="#nomdelacarte" />
<map name="nomdelacarte">
 <area shape="rect" coords="9,372,66,397" href="http://fr.wikipedia.org/" alt="Wikipédia" title="Wikipédia" >
</map>
Les attributs de la balise codice_38 sont :
Image SVG.
Le SVG étant du XML, comme le XHTML, il est possible de définir une image SVG directement à l'intérieur du code HTML. Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 <title> Rectangle noir </title>
 </head>
 <body>
 <p>Voici un rectangle noir :</p>
 <svg width="3cm" height="2cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
 <rect
 x="0.5cm" y="0.5cm" width="2cm" height="1cm"
 </svg>
 </body>
</html>