Les imatges a la web
Les imatges són, després del text, el segon recurs més utilitzat en la construcció i aportació de continguts a la web. Encara que, en un primer moment, les imatges il·lustraven i acompanyaven el text del document o formaven part d'una galeria o col·lecció d'una determinada temàtica (viatges, experiències,...), no van trigar en ser utilitzades com a element decoratiu (fons), reclam visual (els esperpèntics arxius .gif animats) o, petites imatges (en blanc) com a ajuda a la maquetació de la pàgina i que van suposar la negació absoluta de l'estructura i l'accessiblitat.
Lluny d'aquells dies d'irresponsabilitat i desconeixement de la web, les imatges, seguint les pautes del W3C, retornen al seu significat original: aportar un contingut visual al document. Si es diferencia entre les imatges d'una festa al centre, d'un viatge de final de curs, d'una sortida o il·lustracions d'un treball i aquelles altres mancades de contingut, però que milloren la presentació, és a dir, les ornamentals, es podrà determinar quines imatges aniran al document XHTML, les que aporten contingut, i les que aniran al document CSS, les purament decoratives.
Les imatges com a part de l'estructura: l'element img
Les imatges incloses en el document XHTML es troben sota l'etiqueta <img>, que correspon a un element buit, i, per tant s'han de tancar per mitjà de la inclusió al final d'una barra inclinada: <img />
Els atributs que han d'acompanyar sempre a l'element img són: src, que indica on es troba l'arxiu de la imatge (la ruta pot ser absoluta o relativa) i alt, que ofereix un text alternatiu a la imatge i, per tant, proporciona una infromació textual en el cas que, per diferents circumstàncies, la imatge no carregui, o bé en el cas que es deshabiliti la càrrega d'imatges per mitjà del navegador, navegadors només textuals i, especialment, lectors de pantalla. Aquests dos atributs (scr i alt) són per tant, imprescindibles. Veieu un exemple:
<img src="imatges/festa.png" alt="imatge de la festa major del poble" />
Un altre atribut, longdesc, incrementa el grau d'accessibilitat ja que permet afegir una descripció textual de la imatge més àmplia que l'etiqueta alt.
Amplada i alçada d'una imatge
És habitual trobar dins de l'etiqueta els atributs width i height, en la declaració de la imatge. Aquests dos atributs són els que especifiquen l'amplada i l'alçada de la imatge. Veieu un exemple:
<img src="wikipedia.jpg" alt="Wikipedia para gatos" width="450" height="360" />
Se li està indicant al navegador quin espai, sempre en píxels, ha de reservar per aquella imatge en carregar la pàgina. Sense aquesta informació, el navegador deixa un petit espai per defecte a la imatge. Si les dimensions de la imatge superen aquest petit espai, el navegador haurà de dibuixar de nou la pàgina per poder col·locar la imatge correctament.
Hi ha, però, diversitats d'opinions sobre la utilitzacó o no d'aquests atributs. Alguns analistes consideren que no són estructurals, sinó de presentació i, per tant, la seva ubicació a l'estructura del document va en contra de la filosofia de separar el contingut de la presentació. D'altres, en canvi, consideren que, sense ser la solució ideal, la presència d'aquests atributs està plenament justificada si, així, s'evita el redibuixat de la pàgina.
