Bilder på hemsidan

1. Inledning
2. Lägg in bilder i ditt HTML-dokument
3. Bildplacering och text
4. Alternativtext
5. Bakgrundsbild
6. Lek med avgränsare
7. lowsrc-kommandot
8. Transparenta bilder

1. Inledning

Den här sidan berättar det mesta om hur man lägger in bilder på sin hemsida. Den ger såväl teorin bakom, samt ger praktiska tips för de flesta situationer man kan hamna i.

2. Lägg in bilder i ditt HTML-dokument

För att lägga in en bild på sin sida måste man skapa en slags länk till den från sitt HTML-dokument. Bilden och texten ligger sedan som separata filer på datorn och servern. Det du gör i HTML-dokumentet är alltså att tala om för webbläsaren var bilden skall ligga på den färdiga sidan, samt var den kan hitta bilden. Man lägger alltså inte in bilden som man gör i Word, där text och bild hamnar i en och samma fil.

För att hämta en fil från nätet kan man hålla muspekaren över bilden och sedan högerklicka (Windows) eller hålla nere musknappen (Mac). I menyn som dyker upp väljer man "Spara bilden som" eller "Save image as". Sedan bläddrar man fram till rätt ställe i datorn och sparar filen där.

Jag förutsätter nu att vi har hämtat en bild från nätet, som vi skall lägga in på sidan. Vi börjar med kommandot för en bild:

Anger den bild man vill lägga in i dokumentet, där Bild.gif är filnamnet (rättstavat och med rätt extension!). Bilden placeras där elementet skrivs, d.v.s i vänstermarginalen och efter den närmast föregående texten. Ingen avslutning behövs.

Inne i samma element, men efter src="Bild.gif" brukar man ange hur många pixlar hög och bred bilden är:

XX och YY är värdena i pixels. Kommandona talar om för browsern hur stor bilden är och det gör att den kan reservera plats för bilden när den laddar ner HTML-dokumentet. Det går alltså fortare om du utnyttjar detta kommando. Men du måste använda rätt värden! Ja, om du vill att bilden skall presenteras på ett korrekt sätt, vill säga. Width och height kan också användas för att manipulera bilden på olika sätt. Testa själv så får du se! En liten regel dock: om du anger felaktiga värden så bör de vara proportionerliga, så att förhållandet mellan bredd och höjd inte ändras för mycket. Problemet med att använda felaktiga värden är dock uppenbara: den reserverade platsen för bilden stämmer inte och browsern måste göra ny plats, vilket tar onödig tid.

Exempel:


width=96 height=120	width=50 height=62	width=50 height=120

Hur får man då reda på rätt pixelvärden? Jo, genom att först öppna filen i webläsaren! Längst uppe i fönsterramen står nämligen pixelstorlekarna. Width står alltid först. Ja, det fungerar i alla fall i Netscape, men inte i de nyare versionerna av Explorer, tyvärr. Ett annat sätt är då att använda ett bildbehandlingsprogram och där använda de verktyg som är ämnade åt detta. Det kan se lite olika ut, men funktionen är inte avancerad utan finns i alla program. När du fått reda på antalet pixlar skall du spara filen och lägga den i din mapp med bilder och sedan ange rätt pixelvärden i HTML-dokumentet där bilden skall ligga.

3. Bildplacering och text

Om du lägger in en bild kommer den att placeras i vänstermarginalen och efter närmast föregående text. Detta kan emellertid ändras.

Exempel på normalplacerad bild:

Lejon

Bilden hamnar med andra ord där som webläsaren bestämmer att den skall ligga. Om man inte använder något <P> innan man börjar att skriva texten utan

Lejon skriver den direkt efter <IMG>, får man en text som följer bilden, men bara delvis, som du ser här. Detta vill man naturligtvis kunna ändra på. För att texten skall följa bilden måste man ange detta i <IMG>-elementet:

Ger följande:

Fisk man kan på motsvarande sätt skriva align="right", för att placera bilden till höger och få texten att smita runt på vänster sida. Man kan nu också lägga in en bild mitt inne i ett textstycke för att få texten att omringa bilden på tre sidor. Däremot är det svårare att centrera bilden och få texten att smita runt på båda sidor; det vill gärna bli fel då.

Detta beror på att det finns två olika sätt att centrera en bild på:

Den förra borde kunna fungera som när man anger align="left" eller align="right", men ofta lyckas webläsarna inte klura ut skillnaden mellan detta och att centrera hela bilden, utan att lägga med någon text, som det andra kommandot anger. Fisk Det blir lätt så att texten bara smiter runt ena sidan och inte båda. Eller så gör den stora mellanrum i texten. Mitt tips är att du i stället lägger in bilden och texten i tre tabellceller, med bilden i mitten.

Nu märker du att texten ligger väldigt nära bilden. Det kan man åtgärda med ett par andra attribut:

Dessa skapar ett mellanrum mellan bilden och den efterföljande texten, där y är avståndet i pixels. hspace skapar ett horisontellt mellanrum och vspace ett vertikalt, alltså ovanför/under respektive till vänster och höger.

Jag rekommenderar dig att skriva citationstecken runt alla värden. Du bör använda citationstecken runt alla värden som innehåller procenttecken, plus och minus och andra konstiga tecken.

För att få extra bra kontroll på bilder och text och för att placera en bildtext vid sidan av bilden, kan man också använda tabeller. I de flesta fall justeras tabellens celler automatiskt efter bilden.

Man kan göra en ram runt en bild:

Där z anger antalet pixlar, som vanligt. I äldre webläsare måste man göra en tabell med en ram, för att få samma effekt.

Tips!
Du kan göra bilder lika stora och sedan göra en tabell där du lägger in bilderna, en i varje cell. (Du kan ta bort tabellramen genom att i TABLE skriva border=0 och ta bort mellanrummet mellan bilderna med kommandot cellspacing=0 och cellpadding=0.) Då läggs bilderna tätt ihop.

4. Alternativtext

De som har stängt av "automatisk bildvisning" när de surfar till din sida, kommer inte att se bilderna du lagt in, utan bara texten. Om du inte lagt in någon alternativ text, kommer det bara att synas ett frågetecken eller ett "X". Men lägger du in en alternativtext får besökaren ändå information. Här är två bilder, utan och med alternativtext:

För att ange en alternativtext skriver du:

Vissa webbläsare visar en skylt när man håller muspekaren över en bild. På skylten står då den text man skrivit i ALT. Detta fungerar dock lite si och så. Netscape vägrar t.ex att visa skyltar, medan Explorer hellre vill att man använder title-attributet. Här är de två exemplen:


alt	title

I HTML 4.0 finns också ett attribut som heter title, som ger ungefär samma funktioner som alt. Läs mer om detta på min sida Hjälpmedel och handikapp.

5. Bakgrundsbild

Du kan lägga in en bild som bakgrund i ditt dokument, med hjälp av kommandot

Som alltså skrivs i BODY-elementet. Bilden behöver inte vara särskilt stor, eftersom browsern kopierar den så att den fyller ut hela sidan. Här kan du få pilla en del med bilden i ett särskilt bildbehandlingsprogram, så att skarvarna inte syns så tydligt.

Tips!
background-kommandot är "starkare" än bgcolor (bakgrundsfärg) och därför kan du lägga in ett kommando för en piffig bakgrundsfärg, som väcker besökarens intresse, men försvinner när bakgrundsbilden laddats in. Men tänk bara på att ange en bakgrundsfärg, som passar med texten! Det kan ju nämligen vara så att bakgrundsbilden av någon anledning inte visas, och då måste man kunna läsa texten ändå.

Med hjälp av så kallade "stylesheets" kan man ta bort bakgrundsbilden på valda avsnitt.

6. Lek med avgränsare

Som du läste på förra sidan skapas en avgränsare med kommandot <HR>. Jag visade hur du kan manipulera den med kommandona width och height. Men det finns också andra sätt att skapa mer effektfulla avgränsare. Tricket är att använda sig av väldigt små bilder, bara en eller ett par pixels stora, och kopiera in dem för att få färgade, rutiga, prickiga, osv, avgränsare.

I ett ritprogram skapar du en bild med bara en eller ett par pixlar. (Det är inte alla ritprogram som klarar en-pixelbilder.) Linjen ovan är lite större: 1 pixel bred och 15 pixlar hög och ser ut så här:

--> <--

En bild som består av en enda pixel syns bara som en liten punkt - en pixel - på skärmen, så du måste få browsern att kopiera den. Det görs genom att skriva:

X anger bredden i pixels och Y höjden på avgränsaren. Om bilden är svart blir avgränsaren svart. Om du gör en bild med två pixlar, blå överst och svart underst, kan du göra en avgränsare som är blå och svart-randig. Lägger du in sådana avgränsare i tabeller med border=0, kan du göra avgränsare som ser ut som Morse-kod.

Men varför gör man inte en större bild direkt, om man vill ha en viss avgränsare? Därför att det går långsammare när sidan laddas! En liten bild går fortare att ladda än en stor och när den lilla bilden väl är laddad går det mycket fortare att kopiera den för browsern, än att ladda den igen.

Men man anger ju felaktiga mått på bilden och det är ju något som man skall undvika, sade jag nyss! Jovisst, men i och med att bilden går så fort att ladda och den angivna platsen för avgränsaren är större än bilden, uppstår ingen märkbar tidsförlust, när sidan laddas. Snarare går det mycket fortare än om man gjort hela avgränsaren som en enda bild.

7. lowsrc-kommandot

Detta attribut har jag med mest som kuriosa. Det skapades i tidernas begynnelse för Netscape, som då var den enda webläsaren. Man ville med "lowsrc" skapa en möjlighet att ladda hem enkla varianter av bilderna på en sida, för att spara tid och ändå få en acceptabel layout. Numera har vi ju ganska snabba uppkopplingar och behöver inte vänta i evigheter på varje bild. Men det kanske kan vara intressant att veta lite om hur det fungerade?

Man gjorde som så att man sparade en kopia av bilden man ville visa och gjorde den mindre informationsrik genom att använda gråskala, färre färger och sämre upplösning. Kopian blev därmed betydligt mindre, i kilobytes räknat, än originalet, och gick därmed mycket fortare att ladda ner.

I IMG-elementet skrev man sedan något i stil med:

När sedan sidan laddades hämtade browsern först lowsrc-bilden och visade den ihop med texten. När den riktiga bilden hade laddats lades den på själva kopian och ersatte den.

Jag har inte gjort något exempel på denna funktion av olika anledningar. Dels för att det inte ingår i HTML-standarden, men framförallt kanske för att det för det mesta är fullständigt onödigt att lagra två bilder på servern. De flesta har idag tillräckligt snabba uppkopplingar för att göra en sådan tjänst till en björntjänst.

8. Transparenta bilder

GIF är ett komprimerat grafikformat, skapat 1987 av CompuServe. En omarbetad standard såg dagens ljus 1989 och möjliggjorde användandet av bilder med just transparenta skikt. Därav namnet. Denna funktion kan användas för att göra layouten luftigare, t.ex genom att man lägger in "osynliga" bilder som ger fasta mellanrum mellan textavsnitt. Man använder också transparenta delar av bilder för att få fram intressanta effekter. Man kan t.ex trolla bort bakgrunden från bilder:

(normal)

(transparent)

(helt transparent)

Den transparenta (genomskinliga) effekten görs i ett bildbehandlingsprogram. Du markerar vilken färg (kallas ibland alfa-kanal) som skall vara transparent och sparar bilden i GIF89a-format. Tänk bara på att detta fungerar bäst i bilder med få färger. Annars skapas bara ett prickigt mönster, som inte ser särskilt bra ut.