Per inserir imatges en un document HTML fem servir l’etiqueta <img/>. Al tractar-se d’una imatge externa, aquesta etiqueta és auto-tancada. També pot anar acompanyada d’alguns atributs que ens permetran controlar diferents paràmetres que controlen com es mostra la imatge al document HTML. Observa l’exemple següent:

01. <img src="directori/imatge.format" alt="títol alternatiu" title="Nom de la imatge"/>

Per incrustar correctament les imatges en un document HTML caldrà fer servir, com a mínim, els atributs alt i title.

L’atribut alt ens permet assignar un nom alternatiu a la imatge. Si aquesta no es carrega es mostrarà la descripció que afegim al valor d’aquest atribut.

L’atribut title assigna un títol a la imatge. Si passem el cursor per sobre la imatge del document HTML, notarem que apareix un tooltip amb el títol que hem assignat al valor d’aquest atribut.

Addicionalment s’hi poden incloure més atributs com ara width i heihgt, per modificar l’amplada i l’alçada de a imatge respectivament. Pots trobar més informació sobre aquesta etiqueta i els seus atributs a la pàgina de W3Schools.

Si copiem el següent codi dins el cos d’un HTML:

01. <img src="http://blocs.xtec.cat/codify/files/2017/01/perfil.png" alt="Logotip de Codify" title="Codify Logo"/>

… el resultat serà el que es mostra a continuació.