Ús de l'etiqueta IMG HTML per a imatges i objectes
L'etiqueta IMG HTML regeix la inserció d'imatges i altres objectes gràfics estàtics dins d'una pàgina web. Aquesta etiqueta comú admet diversos atributs obligatoris i opcionals que afegeixen riquesa a la vostra capacitat de dissenyar un lloc web atractiu i centrat en la imatge.
Un exemple d'una etiqueta IMG HTML completament formada té aquest aspecte:
Atributs requerits d'etiquetes d'IMG
SRC. L'únic atribut que necessiteu per mostrar una imatge en una pàgina web és l'atribut SRC. Aquest atribut identifica el nom i la ubicació del fitxer d'imatge que es mostrarà.
ALT. Per escriure XHTML i HTML4 vàlids, l'atribut ALT també és obligatori. Aquest atribut s'utilitza per proporcionar als navegadors no visuals un text que descrigui la imatge. Els navegadors mostren el text alternatiu de diferents maneres. Alguns el mostren com un pop-up quan posem el ratolí sobre la imatge, altres ho mostren a les propietats quan feu clic amb el botó dret sobre la imatge i alguns no ho mostren.
Utilitzeu el text alt per proporcionar detalls addicionals sobre la imatge que no són rellevants o importants per al text de la pàgina web. Recordeu, però, que en els lectors de pantalla i altres navegadors només de text, es llegirà el text amb la resta del text de la pàgina. Per evitar confusions, utilitzeu un text descriptiu alt que digui (per exemple), "Sobre el disseny web i HTML" en lloc de "logotip".
A HTML5, l'atribut ALT no sempre és obligatori, ja que podeu utilitzar un títol per afegir-ne més. També podeu utilitzar l'atribut ARIA-DESCRIBEDBY per indicar una identificació que conté una descripció completa.
El text alt també no és obligatori si la imatge és purament decorativa, com ara un gràfic a la part superior d'una pàgina web o icones. Però si no esteu segurs, incloeu el text alt per si de cas.
Atributs IMG recomanats
AMPLIACIÓ i ALTURA . Heu de fer ús de l'ús dels atributs WIDTH i HEIGHT. I sempre haureu d'utilitzar la mida real i no canviar la mida de les imatges al navegador.
Aquests atributs acceleren la representació de la pàgina perquè el navegador pot assignar espai en el disseny de la imatge i, després, continueu descarregant la resta del contingut, en comptes d'esperar que la imatge sencera es descarregui.
Altres atributs IMG útils
TITLE . L'atribut és un atribut global que es pot aplicar a qualsevol element HTML . A més, l'atribut TITLE us permet afegir informació addicional sobre la imatge.
La majoria dels navegadors admeten l'atribut TITLE, però ho fan de diferents maneres. Alguns mostren el text com una finestra emergent mentre que altres la mostren a les pantalles d'informació quan l'usuari fa clic amb el botó dret a la imatge. Podeu utilitzar l'atribut TITLE per escriure informació addicional sobre la imatge, però no compti amb que aquesta informació estigui oculta o visible. No hauríeu de fer servir això per ocultar paraules clau per als motors de cerca. Aquesta pràctica ara és penalitzada per la majoria dels motors de cerca.
USEMAP i ISMAP . Aquests dos atributs estableixen la imatge del costat del client () i del costat del servidor (ISMAP) per a les imatges.
LONGDESC . L'atribut admet URL per a una descripció més llarga de la imatge. Aquesta funció fa que les teves imatges siguin més accessibles.
Atributs IMG obsolets i obsolets
Diversos atributs ara estan obsolets en HTML5 o obsolet en HTML4. Per obtenir el millor HTML, heu de trobar altres solucions en comptes d'utilitzar aquests atributs.
FRONTERA . L'atribut defineix l'amplada en píxels de qualsevol vora de la imatge. Ha quedat obsolet a favor de CSS en HTML4 i està obsolet en HTML5.
ALIGN . Aquest atribut us permet col·locar una imatge dins del text i fer que el text flueixi al seu voltant. Podeu alinear una imatge a la dreta o a l'esquerra. Ha quedat obsolet a favor de la propietat CSS flotant en HTML4 i està obsolet en HTML5.
HSPACE i VSPACE . El HSPACE i els atributs VSPACE afegeixen espai en blanc horitzontalment (HSPACE) i vertical (VSPACE). L'espai en blanc s'afegirà a les dues cares del gràfic (cap amunt i avall, o bé a l'esquerra i a la dreta), de manera que si només necessiteu espai d'un costat, haureu d'utilitzar CSS. Aquests atributs han quedat obsolets en HTML4 a favor de la propietat CSS de marge, i estan obsolets en HTML5.
LOWSRC . L'atribut LOWSRC proporciona una imatge alternativa quan la font d'imatge és tan gran que es descarrega molt lentament. Per exemple, és possible que tingueu una imatge de 500 KB que voleu que aparegui a la vostra pàgina web, però 500 KB trigaria molt de temps a baixar. Per tant, creeu una còpia molt més petita de la imatge, potser en blanc i negre o extremadament optimitzada, i poseu-la en l'atribut LOWSRC. La imatge més petita es descarregarà i es mostrarà primer, i després, quan aparegui la imatge més gran, substituirà la de baix consum.
L'atribut LOWSRC s'ha afegit a Netscape Navigator 2.0 a l'etiqueta IMG. Era part del nivell 1 del DOM però després es va eliminar del nivell DOM 2. El suport del navegador ha estat incomplet per a aquest atribut, encara que molts llocs afirmen que és compatible amb tots els navegadors moderns. No està obsolet en HTML4 o obsolet en HTML5 perquè mai va ser una part oficial de cap especificació.
Eviteu utilitzar aquest atribut i, en comptes d'això, optimitzeu les vostres imatges perquè es carreguin ràpidament. La velocitat de càrrega de la pàgina és una part crítica del bon disseny web, i les imatges grans redueixen la velocitat de les pàgines fins i tot, tot i que utilitzeu l'atribut LOWSRC.