7. Bilder

Bilder, ack så populära på hemsidor. För att få en hemsida som över huvud taget går att se på att man lär sig hantera bilder korrekt, hålla ned filstorlekarna o.s.v.

Snabbkursen: Du infogar en bild med IMG-kommandot, sen behöver du åtminstone ha en referens till vilken fil som ska laddas, SRC (source?).

Det går att skala bilder i browsern. Dock är detta oftast inte en bra metod. IMG-kommandot har alltså t.ex. två växlar, WIDTH och HEIGHT, båda värdena anges i pixlar. Det bästa är att notera resp. värden för varje bild, och sen använda dem i HMTL-dokumentet. Gör man på det sättet kommer texten på hela sidan laddas innan bilderna, då browsern ju redan vet hur stor plats bilderna kommer att få och har reserverat den.

Anges bara en av växlarna kommer bilden att skalas enligt originalets bredd/höjd-förhållanden. Anges båda kan bilden skalas som man vill. Men kom ihåg, att skala en bild i browsern är oftast inte bra. Det tar lite datakraft (tror jag, min burk har det trångt med Mana...), browsern skalar inte bilder på ett snyggt sätt, och man slösar bandbredd om man skalar ned en bild genom browsern, istället för att ha tagit tag i bilden och skalat ned den i det egna bildbehandlingsprogrammet. Att bilderna är små är speciellt viktigt för folk som sitter och surfar på modem.

Nu gör vi lite exempel:

Pingvinen är 150x150<P>

<IMG SRC="peng.gif" ALT="pingvin #1" WIDTH=150 HEIGHT=150> Pingvinen i dess
rätta skala.<P>

<IMG SRC="peng.gif" ALT="pingvin #1" WIDTH=300 HEIGHT=100> Platt pingvin<P>

<IMG SRC="peng.gif" ALT="pingvin #1" WIDTH=100> Liten quakear-pingvin

Ger resultatet:

Pingvinen är 150x150

pingvin #1 Pingvinen i dess rätta skala.

pingvin #1 Platt pingvin

pingvin #1 Liten quakear-pingvin

Några till växlar för IMG-taggen (som jag kommer på) är BORDER, LOWSRC, NAME och ALT.

Border, som det låter, lägger till eller stänger av en kant runt bilden (används ofta då man inte vill ha en kant runt en bild som är en länk. LOWSRC går att använda för att ladda en "för-bild" av en stor bild, som kanske har färre färger eller något som gör att filen är mindre. NAME används för att sätta ett namn på bilden som t.ex. ett JavaScript kan referera till. ALT är för att sätta en text som visas i textbaserade browsers eller innan bilden är laddad. Ska man inte ha någon speciell text så är det en bra idé att sätta ALT="&nbsp" (=no-break space, se avsnitt 12), då slipper folk som föredrar att använda en textbaserad browser (t.ex. Lynx) att få en massa [INLINE] i sidan.

Det går att få justera texten kring bilderna också. Det gör man med ALIGN, HSPACE och VSPACE. Det går att få texten att flyta omkring en bild, genom att säga åt bilden att placera sig till vänster/höger, och det går också att justera hur bilden ska hamna i förhållande till textraden. HSPACE och VSPACE sätter horisontella och vertikala marginaler runt bilderna (mätes i pixlar). Explorer och Navigator tolkar ALIGN-kommandot lite olika, så man kan ju undvika att använda det i vissa fall, och de två browsrarna (hmm...pluralis) har två olika special-uppsättningar med funktioner typ HSPACE. Jag kommer inte ihåg dem just nu, men använder man bara HSPACE och VSPACE så kommer det att fungera bra.

<IMG SRC="peng2.gif" WIDTH=150 HEIGHT=100 ALT="pingvin #1" ALIGN=LEFT>

Runt bilden till vänster flyter texten.<BR>
Vi kan infoga en bild till: <IMG ALT="här finns ingen bild att visa">.<BR>
Vi testar även med en felaktig bild, men med en LOWSRC: <IMG LOWSRC="peng-low.gif" WIDTH=30 HEIGHT=30><P>

Vi gör här en rad för att se vad olika ALIGN-växlar ger:<BR>
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50 ALIGN=TOP> - TOP
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50 ALIGN=BOTTOM> - BOTTOM
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50 ALIGN=MIDDLE> - MIDDLE
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50 ALIGN=ABSMIDDLE> - ABSMIDDLE
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50 ALIGN=ABSBOTTOM> - ABSBOTTOM
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50 ALIGN=ABSTOP> - ABSTOP
<IMG SRC="peng3.gif" WIDTH=50 HEIGHT=50> - Inget

Ger resultatet:

Runt bilden till vänster flyter texten.
Vi kan infoga en bild till: här finns ingen bild att visa

.
Vi testar även med en felaktig bild, men med en LOWSRC:

Vi gör här en rad för att se vad olika ALIGN-växlar ger:
- TOP - BOTTOM - MIDDLE - ABSMIDDLE - ABSBOTTOM - ABSTOP - Inget

Umm...ärligt talat vet jag inte själv vilka som är korrekta och vad de betyder...go figure. Förresten, MIDDLE verkar justera mitten av bilden till textradens underkant, ABSMIDDLE justerar mitten av bilden till mitten av textraden.

Hur bör du då behandla bilder?
Ser du bara till att hålla bildstorlekarna så små som möjligt och ger browsern WIDTH och HEIGHT (stava inte fel) på alla bilder så brukar det inte vara några problem med att en sida skulle bli för tung att ladda ned.

Små bilder, t.ex. till layouten, brukar funka alldeles utmärkt som gif. Större bilder, foton o.dyl. blir nästan aldrig bra som gif, de bör alltid vara jpg. Lär dig hantera ditt bildprogram. Försök alltid dra ned antalet färger på giffarna så mycket det går, använder du 8 färger istället för 256 (max för gif) så blir filen bara en bråkdel så stor. Välj alltid antal färger n som 2^x där x är ett heltal. JPG använder truecolor (>16 miljoner färger), men en effektiv, "förstörande" komprimering. Akta dig lite för att dra ned på kvaliteten på jpg-bilder, det kan uppkomma konstiga halos då...

Använd s.k. thumbnails flitigt. Det finns inget mer irriterande än stora bilder mitt i sidorna. Ska man se tunga bilder tycker jag att man ska välja det själv. En bra mall sägs vara att en sida får vara max 100 Kb, med få undantagsfall. Försök att återanvända bilderna, t.ex. gör man förstås det om man använder bilder i layouten.

Det här var nog allt jag kommer på just nu om bilder.