Hittills har vi mest behandlat text, men bilder fyller också en viktig funktion på väven. De används som prydnader för att göra en sida mer attraktiv, som navigationshjälpmedel eller som en integrerad del av en sidas innehåll.
Det första du måste tänka på är att bilder är stora. Även en liten ikon motsvarar lätt hundra ord eller mer. Visserligen säger en bild lika mycket som tusen ord, men i en dator är är den ofta många gånger större. Det är heller inte alla vävläsare som kan visa bilder överhuvudtaget, eller inte kan visa dem direkt på sidan. De kan också göra att sidan tar längre tid att presenteras för mottagaren.
Samtidigt är de ofta också ovärderliga. De gör sidan mer attraktiv och de kan enkelt förklara eller visa saker som inte går att säga i ord. Men hanteringen av bilder på väven kräver planering, noggrannhet och att man tänker efter före.
Det viktigaste är att göra bilderna så utrymmessnåla som möjligt. För att göra detta kan man reducera antalet färger, klippa bort delar som inte behövs eller minska bildens fysiska storlek. Har man ett galleri eller behöver en stor bild skapar man miniatyrer av som länkar till motsvarande fullstora bild. Miniatyerna ger en snabb översikt av vad du har att erbjuda, laddas ner snabbare och låter besökaren själv välja ut vilka bilder han eller hon vill se.
Nästa del är återanvändning. Lägg dina bilder samlat i en katalog, och länka sedan in bilderna därifrån för alla dina sidor. Om du använder samma bild för samma funktion på dina sidor ritas dels sidan upp snabbare eftersom vävläsaren redan har laddat ner bilden en gång, och du ger också dina sidor en starkare identitet. Om det finns ett centralt bildbibliotek i din vävserver ska du definitivt utnyttja det.
Vävläsaren måste också veta hur stor bilden är innan den kan rita
upp texten runtomkring. Du kan reservera utrymme för bilden genom att
använda attributen HEIGHT och WIDTH till
IMG-markören. Men ändra aldrig storlek på bilden med de här
värdena - dels får du alltid bättre resultat om du gör det
själv, dels är inte vävläsaren tvungen att skala om bilden. Den kan
rita om sidan istället.
Sist, men definitivt inte minst, kommer ALT-texten. Ange alltid en ALT-text till alla dina bilder. Jag tar upp mer om ALT-texten nedan.
Om ett företag eller en organisation har en logotyp ska den naturligtvis återfinnas på alla sidorna. Om man dessutom gör den till en länk till rotsidan fyller den ytterligare en funktion. Ofta kan man också ersätta den vanliga rubriktexten, t ex Välkommen till XYZ med logotypen. Om man då placerar bilden i rubriken och ger den en bra ALT-text kommer den också att hanteras rätt av sökmaskiner och (förhoppningsvis) vävläsare som inte laddar ner bilderna. De här sidorna använder för övrigt den metoden.
Det finns flera skäl till att använda ikoner istället för text för de grundläggande gemensamma länkarna. En ikon syns oftast bättre än en text, vilket är en fördel. Detta kräver dock att ikonerna används konsekvent, dvs samma ikon används för Nästa, Topp osv på alla sidor. Konsekvensen har naturligtvis andra fördelar, som att ge sidorna en identitet och att vävläsaren behöver ladda ner färre bilder. Om man bygger upp en knapprad kan man låta en ikon som pekar på sidan man är på vara kvar, men utan en länk.
ALT-texterna är extra viktiga här - det är inte roligt att se en
räcka med [LINK] över hela sidans bredd. Ett problem här
är att ikonerna ofta är relativt små, vilket innebär att om du ger
ikonen attributen HEIGHT och WIDTH så kan
det hända att ALT-texten inte får plats i en del vävläsare. En lösning
är att slopa HEIGHT och WIDTH i dessa fall,
en annan att skriva extremt korta ALT-texter, t ex
> istället för Nästa. Den förra lösningen
kan fungera bra om ikonerna är på botten av sidan. Den senare
lösningen ger problem för röstläsare. Attributet REL kan
troligen användas för att åtgärda detta, men det är endast en handfull
vävläsare som stöder REL.
I många fall används bilder bara eftersom de gör sidan snyggare och mer attraktiv. I många fall är det inga problem så länge man tänker på ALT-texter och storleken på bilderna, men tyvärr finns det inga bra och effektiva sätt att använda bilder istället för punkter i listor eller som avdelare. Style sheets går att använda, men stödet för detta fortfarande dåligt.
ALT-texten är ett av dina viktigaste verktyg för att skapa anpassningsbara vävsidor. Det är långtifrån endast blinda personer eller personer vars vävläsare inte kan visa bilder överhuvudtaget som drar nytta av dem. En stor andel användare av grafiska vävläsare surfar normalt med avstängd automatisk nedladdning av bilder (de flesta uppskattningar pekar på ungefär en tredjedel). En textläsare som Lynx kan hämta och spara bilder, eller visa dem i en separat bildläsare - som oftast är bättre på detta än en grafisk vävläsare.
Tyvärr är ALT-texten begränsad på många sätt, främst beroende på
hur IMG-elementet är konstruerat. Det kan innehålla max 1024 tecken
och, vad värre är, inte heller några HTML-element. Du kan däremot
lägga hela bilden i ett eget element, t ex en rubrik,
och ALT-texten kommer då att "ärva" det elementet. Det nya elementet
OBJECT i Cougar löser de problemen,
men det stöds mycket dåligt.
I vilket fall ska ALT-texten i nästan samtliga fall
ersätta bildens funktion, inte beskriva bilden. För
rent dekorativa bilder är ALT="" effektivt. För avdelare
är ALT="----" bra (repetera -- tills du har 60 eller så),
osv.
Text-friendly
authoring
Alan Flavell diskuterar hur ALT-texten ska hanteras samt för-
och nackdelarna med klickbara bilder.
Image Use
on the Web
En kort text från WDG om bildformat och bildhantering.
On images,
especially in the Web context
En grundlig genomgång av hur bilder ska användas på väven.
Copyright © 1997 Karl-Johan Norén,
kjnoren@hem3.passagen.se