Bilder och bakgrunder

Det sägs att en bild säger mer än tusen ord. Även om det inte alltid är sant gör en rätt använd bild ofta webbsidan mer tilltalande. En bakgrund som fungerar väl ihop med sidans övriga innehåll kan verkligen förvandla en sida från alldaglig till proffsig.

Bilder

Webbsidor utan bilder kan bli ganska tråkiga. Visst finns det tillfällen då en sida inte behöver bilder, men ofta piffar en bild upp en sida. I lektionen om layout och utformning av sidor ska vi prata med om bilders funktioner, men det finns en tumregel som kan nämnas redan nu: använd bara bilder om det finns ett behov. Sätt inte in en tjusig bild om den inte tillför något till sidan. En bild på 20 Kb, tar lika lång tid som 20 000 bokstäver att läsas in, så det är bäst att den har ett berättigande. Av de olika bildformat som finns används framför allt två på webben, GIF och JPEG. I en senare lektion (vet ej vilken eftersom jag inte skrivit den än) ska vi prata mer om olika format men jag nämner ändå kortfattat de två populäraste.

GIF

GIF står för Graphic Interchange Format. Det är ett format som passar till bilder med få färger. Om färgerna "ligger" rätt i bilden kan den komprimeras till en bråkdel av den ursprungliga storleken. GIF-bilder kan visa 256 färger. Om man vill vara säker på att bilderna ser bra ut på de flesta skärmar och operativsystem bör man bara använda sig av de 216 färgerna i den s.k. webbfärgpaletten.

JPEG eller JPG

Det andra populära bildformatet är JPEG, Joint Photographic Expert Group, som lämpar sig bäst för fotografier eller andra bilder med många olika färger och nyanser. För små bilder kan det trots allt vara bäst att använda GIF, men när bilder börjar bli uppåt 20 KB stora ger JPEG den största komprimeringsvinsten. Till skillnad från GIF är komprimeringen av JPEG förstörande. Det innebär att en bild som komprimeras, och därigenom mister en del av skärpan, inte kan återställas. Information i bilden går förlorad och kommer inte tillbaka.

Det var lite kort om de två vanligaste formaten, men nu fortsätter vi med HTML-koden.

Bilder på webbsidor

<IMG>

I ordbehandlingsprogram och de olika layoutprogrammen på marknaden sätter man in bilder direkt på sidan. Ibland länkar man bilder, men ofta kopieras de in på sin plats. När det gäller webbsidor sätter man in ett märke som instruerar webbläsaren att sätta in bilden då sidan öppnas. Märket jag talar om är <IMG>, som står för image (bild). Man kan förse märket med ett antal olika attribut, varav det viktigaste är SRC. Genom att ange ett namn och en sökväg som värde för SRC talar du om för webbläsaren var bilden finns.

Exempel 2-1: 

   <HTML>
   <BODY>
    <IMG SRC="bjoern.jpg">
   </BODY>
   </HTML>

Om man sparar filen som sida02a.html och öppnar den i sin webbläsare kan det se ut som i Bild 2.1.

Bild 2.1 - En webbsida med en bild på

Man kan anropa bilden via en absolut eller relativ adress. I exemplet ovan angavs bara namnet på bilden, vilket betyder att webbläsaren söker i samma katalog som webbsidan ligger i. Genom att ange adressen: 

   <IMG SRC="bilder/bjoern.jpg">

instruerar du webbläsaren att leta i katalogen bilder, som måste vara en underkatalog till katalogen där webbsidan ligger.

Båda ovanstående adresser är relativa. Det betyder att man utgår från den katalog där den aktuella webbsidan finns sparad. Det är en smidig metod eftersom man inte behöver skriva så långa sökvägar. Om du vill kan du ange en absolut adress. Fördelen är då att det inte spelar någon roll var sidorna lagras. Då fungerar anropen trots att man till exempel lagrar sidorna på sin egen hårddisk. Förutsättningen är givetvis att du är ansluten till Internet, så att bilderna är åtkomliga. En absolut adress har med hela webbadressen i sökvägen: 

   <IMG SRC="http://www.algonet.se/¨bjorn_m/bjoern.jpg">

Via en absolut adress kan man länka bilder från andra webbplatser också till sina webbsidor, men då minskar givetvis kontrollen över bilderna. Har man otur plockar den som äger webbplatsen bort sina bilder, och då står du där med tvättad hals och en webbsida utan bild.

En nackdel med att ange en absolut adress är att webbläsaren kommer att uppfatta bilden som ny, trots att den kanske lästs in i webbläsarens cache-minne [länk till cache-minne] på en annan sida. Om inläsningshastigheten är viktig, och det är den ju ofta, bör du använda relativa adresser.

Absolut adressering av bilder bör bara användas om det är nödvändigt, t.ex. om du länkar bilder från en annan webbplats.

Exemplet ovan innehåller den enklaste formen av bildreferens, bara en referens (adress) till var bilden finns lagrad. Bilden visas överst till vänster i fönstret, i sin naturliga storlek och utan några inställningar i övrigt. Om man trivs med det så behöver man inte göra mer, men annars kan man få bilden att samverka med övriga element på sidan. Till sin hjälp har man då några attribut.

WIDTH och HEIGHT

Attributet WIDTH styr bildens bredd. Motsvarande attribut för bildens höjd heter HEIGHT. Värden på dessa attribut kan vara absoluta (ett värde anges) eller relativa (en procentsats anges). Man kan ange höjd och bredd för bilder, oavsett vilket omfång bilden egentligen har. Dock är bilden lika stor i byte räknat. Antag att du har en bild som är 100 kB stor, med omfånget 200 x 300 bildelement. Även om du anger att bilden ska visas som 100 x 150, d.v.s. hälften så stor som i verkligheten, är den fortfarande 100 kB stor på serverns hårddisk.

Så här anger du höjd och bredd för en bild: 

   <IMG SRC="bjoern.jpg" WIDTH="100" HEIGHT="150">

Ovanstående HTML-kod talar om för webbläsaren att bilden bjoern.jpg ska ha höjden 150 bildelement och bredden 100 bildelement. Se Bild 2.2 för exempel på en bild som visas förminskad, naturlig storlek och förstorad.

Var noga med att behålla proportionerna, annars kan resultatet bli oönskat (eller roligt beroende på hur man ser på det), se Bild 2.3. Om du bara anger ett värde för HEIGHT väljer webbläsaren automatiskt korrekt bredd på bilden (kontrollerat i NN 4.0 och IE 4.0). Detsamma gäller omvänt, om du anger värde för WIDTH.

Bild 2.2 Samma bild i tre olika storlekar

Bild 2.3 En bild där proportionerna mellan höjd och bredd är fel

Satsen 

   <IMG SRC="bjoern.jpg" WIDTH="100">

visar en bild som är 100 bildelement bred. Hur hög den är vet vi inte eftersom webbläsaren räknar ut det åt oss. (Jag vet att bilden är 150 x 207, vilket gör bilden 138 bildelement hög.)

I många bildhanteringsprogram kan man välja att visa bildens egenskaper, såsom bredd, höjd och storlek i kB. Ofta kan man även ställa in hur hög och bred bilden ska vara. Men i detta fall påverkas även storleken i byte. Kan vara lämpligt att göra om bilden är stor, och den i alla fall kommer att förminskas på sidan. Se bilagan om bildhanteringsprogram.

Genom att ange en procentsats kopplar man bildens storlek till webbläsarens fönsterstorlek. Satsen: 

   <IMG SRC="bjoern.jpg" WIDTH="50%" HEIGHT="50">

gör att bilden alltid är hälften så hög och hälften så bred som fönstret.

Genom att ange bredd och höjd för en bild kommer övriga objekt på sidan dessutom att laddas snabbare och snyggare. Webbläsaren använder de angivna måtten och avsätter motsvarande yta för bilden, trots att den läses in efter texten. Vinsten är dels att besökaren kan börja läsa texten på sidan trots att alla bilder inte har lästs in fullständigt (se Bild 2.4 till 2.6), dels att sidan redan från början ser ut som den ska. Om bilderna inte har några måttangivelser kan inte webbläsaren "städa upp" sidan förrän alla objekt är helt inlästa.

Bild 2.4 En sida där bilder definieras med WIDTH och HEIGHT.



Bild 2.5 Samma sida när bilden inte visas

Bild 2.6 Samma sida utan angiven höjd och bredd

För dem som väljer att inte visa bilder betyder måttangivelsen att layouten på sidan bibehålls. Om man inte anger hur hög pch bred bilden ska vara kommer sidan att se ut som i Bild 2.6. Som en service till dessa rekommenderar jag att du alltid förser dina bilder med värden för höjd och bredd.

LOWSRC

Som webbdesigner bör du anstränga dig att skapa bilder som läses in snabbt. Trots det kan det ta en stund om besökarens anslutning [länk till info om anslutningar] är långsam. Om bilderna är specificerade med WIDTH och HEIGHT kommer en tom ruta att visas. Men om du vill visa en enklare representation av bilden som håller på att läsas in kan du använda attributet LOWSRC. Bilder som adresseras med attributet LOWSRC läses in före SRC-bilden.

Vi använder bilderna src.jpg 51 KB stor, och lowsrc.gif som är 6 KB stor, se Bild 2.7. Det finns inget som hindrar att de två bilderna är av olika format. För bilder med få färger lönar det sig bättre att använda GIF eftersom den komprimerar bättre.

Bild 2.7 En bild och motsvarande LOWSRC-variant

Eftersom vitsen med LOWSRC är att visa en bild medan den riktiga håller på att läsas in bör den vara riktigt liten, helst inte mer än 4-5 kB. Bilden bör inte innehålla fler än 8 färger, kanske räcker det med en bitmappad svartvit bild.

Även om LOWSRC används för att visa en mindre (i kB räknat) version av SRC-bilden kan man skapa en "fattigmans"-animering genom att länka en annan bild till LOWSRC. Först visas en bild, och sedan ersätts den med den riktiga bilden.

BORDER

Beroende på vilken webbläsare som besökaren använder kan bilder visas med eller utan ram som standard. Via attributet BORDER kan du själv ange om ramen ska visas eller ej, och i så fall hur tjock ramen ska vara. I de fall då bilden används som en länk, se Lektion XX, bör BORDER alltid användas för att definiera ramen runt bilden. Orsaken är att ramen används för att visa att det är en länk, på samma sätt som textlänkar är understrukna.

Satsen 

   <IMG SRC="bjoern.jpg" BORDER="0">

stänger av, eller döljer, ramen. Satsen 

   <IMG SRC="bjoern.jpg" BORDER="1">

visar den tunnaste formen av ram runt bilden. Ange större värden om du vill ha en tjockare ram. Det finns ingen begränsning av ramens tjocklek

ALT

Hur märkligt det än kan låta finns det användare som inte visar bilder automatiskt, eller använder webbläsare som bara visar text, t.ex. Mosaic. Jag vet, man tror knappt att det är sant ;-) För deras skull bör man alltid förse sina bilder med en alternativ text. En text som beskriver vad bilden visar. För detta ändamål finns attributet ALT. Sätt in attributet och ange din text så här: 

   <IMG SRC="bjoern.jpg" ALT="Bild på Björn">

Om texten efter ALT-attributet består av fler än ett ord måste man sätta citattecken runt det.

Jag tycker att det är en bra metod att alltid sätta citattecken runt värden på attribut. Då blir det en vana, och man löper mindre risk att glömma att använda citattecknen. Dessutom blir det konsekvent gjort, och koden blir lättare att begripa.

Om du använder ALT bör du se till att den förklarande texten hålls kort. Även om man använder attributen WIDTH och HEIGHT, för att styra hur stor bilden är, skrivs hela texten ut om användaren valt att inte visa bilder. Det kan förstöra layouten på sidan.

Horisontell justering av bilder

Man kan göra inställningar för hur bilder ska justeras. Som standard visas bilder vänsterställda, d.v.s. åt den vänstra kanten av webbläsaren. Men man kan ställa in att bilder ska visas centrerade eller åt höger också.

Sidledes finns det två olika inställningar: vänster och höger. Bilder visar normalt till vänster så såvida man inte vill använda "flytande" bilder behöver man sällan använda attributet ALIGN="left". Bild 2.8 visar två bilder som är inställda med ALIGN="left" och ALIGN="right".

Bild 2.8 Två bilder som visas till vänster och till höger

När man justerar bilder horisontellt spelar det ingen roll var i textstycket märket sitter, bilden sätts in där attributet anger. Genom att ange att bilden ska justeras till vänster eller höger i <IMG>-märket kommer eventuell text att flöda runt bilden.

Bilder kan justeras genom att märket <CENTER> används. Det här märket är inte speciellt för bilder, det centrerar allt som det omsluter, även text. Satsen 

   <CENTER><IMG SRC="temp.gif" BORDER="2" HEIGHT="45"></CENTER>

centrerar en bild på sidan. Eventuell text som står till vänster om <CENTER> kommer att hamna på raden ovanför bilden, text skrivs in till höger om </CENTER> kommer att flyttas ner till nästa rad oavsett om det finns plats på samma rad som bilden, se första stycket i Bild 2.9. Om texten anges innanför <CENTER>-märkena kommer både bild och text att centreras och texten förblir . Satsen 

   <CENTER>Lorem ipsum dolor
   <IMG SRC="temp.gif" BORDER="2" HEIGHT="45">
   consectetuer adipiscing elit</CENTER>

visar texten Lorem ipsum dolor på samma rad som bilden temp.gif, se nedre stycket i Bild 2.9.

Bild 2.9 Bild och text i skön harmoni

Vertikal justering av bilder

Bilder kan även justeras i höjdled. Bildens övre kant kan justeras mot den högsta bokstavens övre del, eller mot textens nedre del. Det finns ett antal olika värden: absbottom, bottom, middle, absmiddle och top. De två stora, Netscape Navigator och Internet Explorer, implementerar ALIGN olika så jag tar bara upp de tre värden som båda stödjer: bottom, middle och top.

Dessa märken kan inte användas tillsammans med left och right. Om du sätter in både <ALIGN="left"> och <ALIGN="top"> kommer bara det första märket att utföras.

Bild 2.10 Exempel på bilder som justerats med top, middle och bottom

VSPACE och HSPACE

Om man vill ha lite utrymme mellan bilder och omgivande text kan man ordna det också. Attributet VSPACE ordnar utrymme över och under bilden, HSPACE ger utrymme till vänster och höger om bilden. Satsen 

   <IMG SRC="bjoern.jpg" VSPACE="10" HSPACE="20">

sätter in 10 bildpunkters avstånd ovanför och under bilden, samt 20 bildpunkter på varje sida om bilden, se Bild 2.10. Tyvärr kan man inte ange osymmetriska värden, angivet värde kommer på varje sida av bilden.



Bild 2.11 Bild med och utan vertikalt och horisontellt mellanrum

Bakgrundsbilder

Som standard anges bakgrunden till dina webbsidor i webbläsaren. Man kan ställa in vilken bakgrundsfärg man vill använda. Förutom att man kan ange att sidan ska ha en annan bakgrundsfärg än standard så kan man ha en bild som bakgrund. Detta görs i märket <BODY>. Attributet heter BACKGROUND och används så här: 

   <BODY BACKGROUND="bakgrund.gif">

Det fina med bekgrundsbilden är att man kan visa sidans övriga element ovanpå. Du kan inte visa text ovanför en bild angiven med <IMG>. Bilden kan i princip vara hur stor som helst eftersom bara så mycket som faktiskt syns i webbläsarens fönster visas. Av praktiska och utrymmesmässiga skäl bör man hålla bilderna relativt små både vad gäller omfång och storlek i byte. Om du har en jättestor bild så visas ju aldrig hela bilden. Om det dessutom tar lång tid att läsa in sidan på grund av att bakgrundsbilden är stor, kan du vara säker på att besökarna tröttnar och beger sig någon annanstans.

Bild 2.11 En stor bakgrundsbild

En bild som är mindre än fönstret som webbsidan visas i kommer att upprepas både vertikalt och horisontellt, se Bild 2.12. Man kan åstadkomma snygga bakgrunder med relativt små medel. I ett bildhanteringsprogram, t.ex. Photoshop eller PaintShop Pro, kan man göra bilder som då den upprepas på en sida bildar en enhetlig bild.


Bild 2.12 Många små bilder som bakgrund

Som du ser är texten inte lätt att läsa. I senare lektioner ska vi diskutera hur man använder bakgrunder och text så att resultatet blir snyggare än ovanstående.

Vad man ska tänka på när man anlägger en stor bild är att den måste vara tillräckligt bred för att inte återupprepas, se Bild 2.13. Det blir inte särskilt vackert när den fina kanten till vänster dyker upp även längst ut till höger. I vårt fall dyker bilden på maten upp igen.

Bild 2.13 En stor bakgrundsbild som upprepas

Sammanfattning

Vi har gått igenom märket <IMG> som används för att sätta in bilder på en webbsida. Attributet SRC anger sökvägen till bildfilen. Om filen är stor kan man med hjälp av attributet LOWSRC ange att en mindre bild ska visas medan den större läses in.

Använd WIDTH och HEIGHT för att redan innan bilden lästs in på sidan tala om för webbläsaren hur stor bilden ska vara. Det snabbar upp visningen av sidans övriga element och gör att sidan behåller sin utformning även om den visas i en webbläsare som inte hanterar eller visar bilder. Om du dessutom lägger till en beskrivning av bilden med hjälp av ALT så underlättar det också för dem som väljer att inte visa bilder eller har en textbaserad webbläsare.

Lägg till luft mellan bilder och text med attributen VSPACE och HSPACE. Ange om bilden ska ha en ram eller ej via BORDER.

Lägg till en bakgrundsbild genom att ange en bildfil i attributet BACKGROUND i märket <BODY>. En liten bild upprepas så att hela webbläsarens fönster fylls, men du kan även använda en stor bild som bara visas en gång.

Så tabellen på nästa sida för en kort lista över de märken vi gått igenom.

Tabell 2.1 Dagens märken

Frågor

1. Vilket märke sätter in en bild på en webbsida?

2. Vilket attribut ska du använda för att visa en annan bild medan den riktiga bilden håller på att läsas in?

3. Vad gör VSPACE och HSPACE?

4. Vilka värden kan man ange för attributet ALIGN?

5. Kan man använda ALIGN="top" och ALIGN="left" samtidigt?

6. Varför bör man använda WIDTH och HEIGHT?

Svaren på frågorna finns i Bilaga A.

Senast uppdaterad 99-08-09