Bilder i HTML

Webben tok ikke skikkelig av før Mosaic-teamet, med Marc Andressen i spissen, fant opp og implementerte <img>-elementet. Trass i et meget godt erstatningsforslag som er nesten 10 år gammelt er dette elementet fortsatt defacto måte å sette et bilde inn i HTML-dokumenter.

Aktuelle elementer

Trusty ole' <img> er idag fortsatt måten å sette inn bilder på, selvom HTML 4.01 for snart 10 år siden foreslo dens død og nominerte den langt mer generiske <object> til etterfølger.

Attributter

img har en hel liten skog med attributter, noen interssante og andre som er der mer av historiske grunner (så som vspace og hspace). Følgende er attributter du burde vurdere å bruke:

alt
title
width
height
longdesc

alt brukes til den berømmelige alt-teksten. Det er også dette attributtet som ofte blir omtalt som "alt-taggen". Attributtet angir en kort beskrivende tekst som skal gi samme informasjon til brukeren som bildet, i det tilfellet brukeren ikke kan se bildet. Dette kan være fordi bildet ikke finnes lengre/er feillenket, brukeren har skrudd av bilder, eller brukeren ikke har syn. Mer om alt-teksten i et tidligere innlegg.

alt skal derimot ikke brukes til å gi en "tooltip"-tekst som brukeren får opp ved å føre musen over bildet. Dette er en vanlig misforståelse som stammer fra Internet Explorers feilaktige implementasjon. Tooltip-tekst kan gis med title. Internet Explorer vil interessant nok vise title-teksten dersom den er gitt. Finnes den ikke vil den gå tilbake til alt-teksten.

Beskrivelse

Nevnte title kan brukes til å gi en beskrivelse av bildet utover det åpenbar. Tenk bildetekst. Teksten vil - som de fleste andre attributter - ikke vises umiddelbart. Den vises som nevnt kun ved å føre musen over bildet. For å vise den som en bildetekst eller lignende kan du for eksempel ta i bruk Javascript.

Det ikke helt ukjente bilde-scriptet Lightbox bruker title som bildetekst når den er angitt.

Når bildet krever mer beskrivelse enn det som passer seg som en kort alt-tekst kan du bruke longdesc til å gi en URL til en side som viser mer informasjon. Dette kan særlig være interessant hvis du bruker image maps.

Dimensjoner

Med width og height kan du angi bildets størrelse. Du kan også bruke disse til å skalere bildene, selvom jeg ikke syns du bør gjøre det. Å sette størrelsen gjennom disse attributtene har to fordeler. Den ene er at du gir søkemotorene litt å gå på i forhold til bildesøk, og den andre er ytelse.

Siden som bildet finnes på skal visstnok laste fortere dersom nettleseren med en gang får vite dimensjonene på bildet siden den da kan sette av riktig plass med en gang, uten å vente på selve bildet.

Jeg har ved flere anledninger diskutert width og height med en tidligere kollega som mener at disse er presentasjons-spesifikke og bør droppes. Jeg har ikke nødvendigvis fasiten, men jeg er uenig. Sålenge disse attributtene inneholder bildets faktiske dimensjoner så er det interessant informasjon om bildet, ikke bare presentasjonsteknisk. Å bruke CSS til dette vil ikke være en fullverdig erstatning fordi HTML-en mister informasjon om objektet. Hva mener du?

Tweet this

Publisert 17. desember 2007 under julekalender 2007 og html.