Det 7. Bud; Kjenn din <IMG> kode!



Hva er verdt å vite om <IMG>?

Hvordan brukes WIDTH og HEIGHT?

Ved å tilføye WIDTH og HEIGHT elementer til <IMG> koden din , sparer du inn en masse tid som Netscape-brukere må bruke for å vente på at grafikken skal lastes ned.

La oss kikke litt enkelt på en nettlesers funksjon. Først lastes HTML-dokumentet ned, deretter finner den alle IMG-koder. Hvis nettleseren ikke kjenner størrelsen på bildene, må den vente og laste dem ned først før dokumentet kan formatteres korrekt!

De fleste versjoner av Mosaic omgår problemet ved å vise et lite "erstatnings"-bilde, og deretter reformatteres dokumentet for hvert bilde som lastes ned. Helt ærlig, det kan være irriterende når du leser, men du kan bla rundt i dokumentet selv grafikken lastes ned.

Netscape derimot, vil bare vente til det meste av grafikken er lastet ned, før dokumentet vises. Dette betyr, at Netscape-brukere er låst i toppen av dokumentet mens grafikken åpnes (det kan kanskje ta flere minutter)! De kan ikke bla rundt i dokumentet. De er nødt til å vente.

WIDTH og HEIGHT elementene gir Netscape mulighet til å bestemme utseendet på dokumentet ditt. Når størrelsen på grafikken er kjent, kan Netscape vise hele dokumentet og avsette plass til grafikken. Etterhvert som hver grafikkfil lastes ned, vises den i den avsatte plassen i dokumentet. Brukeren kan nå bla rundt i dokumentet mens grafikken lastes ned.

Hvis du har et bilde som heter "mygirl.gif" i "/images"directory'et ditt og det er 300 pixels ganger 200 pixels, ville du skrive følgende <IMG> kode for å vise det i HTML-dokumentet ditt.

<IMG SRC="design/img/mygirl.gif" ALT="My Girlfriend" WIDTH="300" HEIGHT="200">

Bruk alltid ALT

Har du noensinne sett siden din med Lynx? Lynx er en nettleser, utelukkende til tekst som primært finnes på Unix-systemer. Hver gang Lynx finner en <IMG> kode uten et ALT-element, vil den vise følgende til brukeren:

[image]

Hvis du legger til et ALT-element til <IMG> koden din , vil den vise ALT-teksten. Hvorfor er det viktig? La oss ta et generelt eksempel:

Mange bruker et bilde som link til andre HTML-dokumenter. La oss si at vi har et bilde som heter "top.gif", og som vil sende brukeren til toppen av dokumentet.

<A HREF="#Top"><IMG SRC="/design/img/top.gif" HEIGHT="30" WIDTH="30"></A>

Dette vil vises korrekt på en grafisk nettleser (med grafikken på), men hvis man ser det med Lynx vil det se slik ut:

[link] [image]

Hvor fører denne linken hen?!? Bruk alltid ALT-elementet! Følgende vil vises riktig på alle browsere:

<A HREF="#Top"><IMG SRC="/design/img/top.gif" ALT="Gå til toppen av siden" HEIGHT="30" WIDTH="30"></A>

Alt-ikette

Vær omhyggelig med den teksten du skriver i ALT-elementet. Ikke noe slikt som "Bilde av en opp-pil" eller "mygirl.gif". Det er mye bedre å bruke et beskrivende navn. Hva nå, hvis bildet ikke vises... Hvilken tekst vil være mest beskrivende for bildets funksjon?

Kikk på eksemplet fra tidligere. Du vil se de beskrivende tekstene som ble brukt i ALT-elementet.

Designer Tips: av og til er ALT-elementet ikke nødvendg. I stedet for å utelate ALT-elementet, bruk ALT="[]".

<IMG SRC="title_graphic.gif" WIDTH="320" HEIGHT="20" ALT=" ">

På en nettleser som ikke støtter grafikk, vil det ikke engang stå [image]. På den måten unngår du unødig fyll på skjermen.

Jeg er ikke redd for å støtte Lynx

Litt av en påstand. Vet du egentlig hvor mange som bruker Lynx? Hva nå, hvis det er flere millioner?

Hva hvis surfere med nettlesere som støtter grafikk, har slått grafikken av? Hvor mange det av dem? En million? 2 millioner? Hvor mange personer ønsker du å fremmedgjøre?

Bruk små bilder

Mange mestrer HTML, men overser ett og annet vitalt område av Nett-design. Noen fete bilder er ikke det eneste saliggjørende. Vi må også lære å bruke små bilder!

Folk blir fort lei av å skulle vente på at bilder skal lastes ned. Ved å bruke WIDTH og HEIGHT attributter, vil Netscape-brukere kunne klikke på tekst-linker og behøver ikke å vente på at grafikken skal lastes ned. Men hva hvis du bruker imagemap?

For det første: Tilføy alltid en tekst-meny som alternativ til en imagemap (se nærmere omtale i Det 9. Bud).

For det andre: Sørg for at bildene dine er SSSM! (Så Små Som Mulig). Lær å begrense bit-dybden (antall farger) i GIF'ene dine og øv deg på oppsetning i JPG'ene dine.

På en Mac er Debabylizer mitt yndlings-verktøy til å konvertere GIF'er til 7 bit, 6 bit, 5 bit, eller enda 4 bit GIF'er. På IBM kan du bruke Photoshop til å oppnå samme funksjon/resultat.

En tommelfinger-regel sier: Hold bildene under 25 Kb. Vi foretrekker å ha våre bilder på 15 Kb eller mindre, hvis det er mange på en side.


Du er velkommen til å la andre se denne URL'en. Dette arbeidet, er Copyrighted 1995 av forfatteren, Sean Howard, og er IKKE frigitt til public-domain. Enhver form for distribusjon og kopiering av dette materiale er forbudt uten skriftlig tillatelse fra forfatteren.
Kommentar fra oversetteren:
Etter at ha fått Sean Howard's velsignelse, har jeg etter beste evne forsøkt å oversette original teksten fra engelsk, da noen nordmenn fremdeles har lettere for å forstå norsk, enn engelsk. God fornøyelse med lesingen.

Copyright er likeledes også gjeldende for den norske oversettelsen. Steinar D. Varsi (steinar@varsi.net)