Irudi eta objektuetarako HTML IMG etiketa erabiltzea
HTML IMG etiketa web orrialde baten barruan argazkiak eta beste objektu grafiko estatiko batzuk txertatzen ditu. Etiketa arrunt honek etiketa adimendun eta irudi korporatibo bat diseinatzeko gaitasuna duen aberastasuna gehitzen dion derrigorrezko eta hautazko atributuak onartzen ditu.
HTML formatuan HTML IMG etiketa baten adibidea honakoa da:
Beharrezko IMG Tag atributuak
SRC. Web orri batean erakutsitako irudia lortzeko behar duzun atributu bakarra SRC atributua da. Atributu honek erakusten du irudien fitxategiaren izena eta kokapena.
ALT. XHTML eta HTML4 baliozkoak idazteko, ALT atributua ere beharrezkoa da. Atributu hau ikusentzuneko arakatzaileei irudia azaltzen duen testua erabiltzen da. Arakatzaileek testu alternatiboa modu ezberdinetan bistaratzen dute. Zenbaitek popup-a erakutsiko dute sagua irudiaren gainean jartzen duzunean, beste batzuk propietateetan bistaratzen dituzunean, egin klik eskuineko botoiaz irudiaren gainean, eta batzuek ez dute guztiz erakutsi.
Erabili goi testua Web orrialdearen testuan garrantzitsuak edo garrantzitsuak ez diren irudiei buruzko xehetasun gehiago emateko. Baina gogoratu pantailako irakurleek eta beste testu-arakatzaileek soilik, testua lerroan lerrokatuko da orriaren gainerako testuan. Nahasmena saihesteko, erabili deskribatzailea den testu altua (adibidez), "Web diseinua eta HTMLa" buruz "logotipoaren ordez".
HTML5-n, ALT atributua ez da beti behar, atal bat erabil dezakezu gehiagorako. ARIA-DESCRIBEDBY atributua ere erabil dezakezu deskribapen osoa duen ID bat adierazteko.
Ez da beharrezkoa testu altua irudia guztiz apaingarria baldin bada, web orrialde baten goialdean dagoen grafikoa edo ikonoak. Baina ziur ez bazaude, alt testua, kasuetan, sartzen da.
Gomendatutako IMG atributuak
ZABALERA ETA ALTZARIA . WIDTH eta HEIGHT atributuak beti erabiliz erabili beharko zenituzke. Eta beti erabili behar duzu tamaina erreala eta ez ditu zure irudiak tamaina aldatu arakatzailearekin.
Atributu horiek orriaren errendimendua azkartzen dute, nabigatzaileak irudia diseinuan espazioa esleitu dezakeelako eta, ondoren, gainerako edukia deskargatzen jarraitzen du, deskargatzeko irudi osoa zain egotea baino.
Beste erabilgarriak IMG atributuak
TITULUA . Atributua HTML elementu bati aplikatu daitekeen atributu orokor bat da . Gainera, TITLE atributuak aukera ematen dizu irudiari buruzko informazio gehigarria gehitzeko.
Nabigatzaile gehienek TITLE atributua onartzen dute, baina modu ezberdinetan egiten dute. Zenbaitek testu gisa agertuko dute testua, beste batzuek informazioa pantailetan bistaratzen duten bitartean, erabiltzaileak irudiaren gainean eskuineko botoiaz klik egiten duenean. TITLE atributua erabil dezakezu irudiari buruzko informazio osagarria idazteko, baina ez da ezkutuko edo ikusgai dagoen informazio hau zenbatzea. Zalantzarik gabe hau ez da erabili behar bilatzaileak bilatzeko gako hitzak ezkutatzeko. Praktika hau bilaketa motore gehienek zigortzen dute.
USEMAP eta ISMAP . Bi atributu hauek bezeroaren alboan () eta zerbitzariaren aldetik (ISMAP) irudi mapak zure irudietara ezartzen dituzte.
LONGDESC . Atributuak URLak onartzen ditu irudiaren deskribapen luzeagoa lortzeko. Eginbide hau zure irudiak errazagoak bihurtzen ditu.
IMG atributu zaharkituak eta zaharkituak
Hainbat atributuak orain HTML5 zaharkituta daude edo HTML4 zaharkiturik daude. HTML hobeagatik, beste irtenbide batzuk aurkitu beharko zenituzke atributu horiek erabili beharrean.
FRONTERA . Atributuak irudiaren inguruko edozein ertzaren zabalera zehazten du. HTML4rekin CSSren alde deuseztatu da eta HTML5 zaharkituta dago.
ALIGN . Atributu honek testuaren barruan irudi bat jartzen uzten dio eta testua fluxua du inguruan. Irudi bat eskuinera edo ezkerrera lotu dezakezu. Du HTML4 karpetaren CSS propietatearengatik baztertu da eta HTML5 zaharkituta dago.
HSPACE eta VSPACE . HSPACE eta VSPACE atributuei zuriune horizontalki (HSPACE) eta bertikalean (VSPACE) gehitu. Grafikoaren bi aldeetatik zuriuneak (goiko eta beheko edo ezkerreko eta eskuinekoak) gehituko zaizkio, beraz, alde batetik bestera bakarrik behar baduzu, CSS erabili beharko zenuke. Atributu horiek baztertu egin dira HTML4 marjinaren CSS propietatearen alde, eta HTML5 zaharkituta geratzen dira.
LOWSRC . LOWSRC atributuak irudi alternatiboa eskaintzen du irudien iturburua oso astuna den deskargatzen denean. Adibidez, zure web orrian erakutsi nahi duzun 500KB irudia izan liteke, baina 500KB-k deskargatzeko denbora luzea hartuko luke. Beraz, irudiaren kopia askoz txikiagoa sortzen duzu, agian zuri-beltzean edo oso optimizatuta, eta LOWSRC atributuan jarri. Irudi txikiagoak lehendabizi deskargatu eta bistaratuko du eta, orduan, irudi handiagoak agertzen direnean, behe-iturri bat ordezkatuko du.
LOWSRC atributua Netscape Navigator 2.0-ra gehitu da IMG etiketari. DOM maila 1eko zatia zen, baina DOM 2. mailatik kendu zen ondoren. Arakatzaileen euskarria atributua izan da, nahiz eta webgune askok diote nabigatzaile moderno guztiek onartzen dutela. Ez da baztertua HTML4 edo zaharkituta HTML5-an, izan ere, sekula ez zen zehaztapen baten zati ofizialik.
Saihestu atributu hau erabiltzea eta horren ordez optimizatu irudiak azkar kargatu ahal izateko. Orriaren karga abiadura web diseinu ona duen zati kritikoa da, eta irudi handiak orri motelak izugarri gutxitzen ditu, LOWSRC atributua erabiltzen baduzu ere.