Lektion 4, Bilder

Ännu så länge har vi bara pratat om hur texten ska formateras. Nu kommer något lika viktigt och dessutom mycket roligare. Som alla vet säger en bild mer är tusen ord. Men den tar också ungefär tusen gånger så mycket plats i en dator. Det betyder att det kan ta lång tid att ladda hem bilder från internet. De flesta av oss har väl redan gjort den erfarenheten.

Om man arbetar med bilder måste man ha ett bildredigeringsprogram. Det finns flera att välja på, i olika prisklasser. Några av de vanligaste programmen är Photoshop och Paint Shop Pro.

Det finns i huvudsak tre bildformat som är aktuella på nätet. JPEG (eller JPG) (Joint Photographic Experts Group), PNG (Portable Network Graphics) och GIF (Graphics Interchange Format). JPEG är det bästa formatet för fotografier. Logotyper, dataritade bilder m.m. med färre färger bör sparas i PNG-formatet. Generellt kan man säga att små bilder med få färger ger små bildfiler.

Hur gör man då för att infoga en bild på din websida? Låt säga att du har en bild som heter mitthus.gif som du vill visa på din sida. Då ser koden ut så här:
<IMG SRC="mitthus.gif">
SRC (från eng. source(källa)) är taggen <IMG>(från eng. image(bild)) viktigaste attribut som bestämmer vilken bild som ska visas. Detta är det enda attribut som är obligatoriskt för IMG-taggen. Här följer alla attributen:

ATTRIBUT TILL TAGGEN <IMG>
Attribut	Möjliga värden:	Förklaring och ev. exempel
ALIGN	TOP:	I denna bild har attributet align värdet top. Texten kommer nu att börja vid bildens överkant. Koden ser ut så här:<IMG SRC="bclinton.gif ALIGN="top">
	MIDDLE:	I denna bild har attributet align värdet middle. Texten kommer nu at börja vid bildens mitten. Koden ser ut så här:<IMG SRC="bclinton.gif ALIGN="middle">
	BOTTOM (Standardvärdet):	I denna bild har attributet align värdet bottom. Texten kommer nu att börja vid bildens nederkant. Koden ser ut så här:<IMG SRC="bclinton.gif ALIGN="bottom">
	RIGHT:	I denna bild har attributet align värdet right. Bilden kommer nu att placeras till höger med text flödande på vänster sida. Koden ser ut så här:<IMG SRC="bclinton.gif ALIGN="right">
	LEFT:	I denna bild har attributet align värdet left. Bilden kommer nu att lägga sig till vänster med text flödande till höger. Koden ser ut så här:<IMG SRC="bclinton.gif ALIGN="left">
ALT	Valfri text	Alternativ text som visas i webläsare inställda på att inte visa bilder. Många användare av långsamma uppkopplingar ställer sin webläsare på denna funktion. Det är därför viktigt att använda detta attribut på ett bra sätt för att även ge dessa användare en chans. Texten visas även i Internet Explorer när pekaren hålls över bilden.
WIDTH	Positivt heltal	Redigerar bildens bredd/höjd. Bredden/höjden anges i pixels (en punkt på skärmen). Om inte attributet finns visas bilden i sin naturliga storlek. Därför är det ofta bättre att ändra bildens naturliga storlek i stället för att använda width/height. Särskilt om du har en stor bild som du vill ha mindre. Då tjänar du massor av plats eftersom en liten bild tar mindre plats än en stor. Det som ar bra med width/height-attributet är att webläsaren inte behöver ladda hem hela bilden innan den kalkylerar bildens storlek och börjar skriva ut sidan. Därför rekommenderar många att alltid använda dessa attributen. Exempel: Orginal storlek:Kod: <IMG SRC="bclinton.gif> Minskad storlek:Kod:<IMG SRC="bclinton.gif" WIDTH=40 HEIGHT=55>
HEIGHT
BORDER	Positivt heltal	Ger en ram runt bilden. Bredden anges i pixels. Färgen på ramen är den samma som textens. Exempel:Kod:<IMG SRC="bclinton.gif" BORDER=3>
VSPACE	Positivt heltal	Bestämmer hur stort område runt bilden som ska lämnas. VSPACE(Vertikalt utrymme) och HSPACE(Horisontellt utrymme) anges i pixels. Exempel:Kod:<IMG SRC="bclinton.gif" HSPACE=15 VSPACE=15>
HSPACE
LOWSRC	Filnamn	Gör det möjligt att visa en bild med dålig kvalité först. När sedan hela sidan är utskriven byts bilden ut mot en bättre. Exempel:Kod:<IMG SRC="bclinton.gif" LOWSRC="badbill.jpg"> Nu kommer först bilden badbill.jpg laddas in och när hela sida är utskriven laddas bclinton.gif in. Attributet fungerar enbart i Netscape Navigator. De webläsare som inte förstår LOWSRC laddar helt enkelt bclinton.gif direkt.

Genomskinliga bilder

Enbart GIF-bilder går att göra genomskinliga. När du sparar en bild i ett bildredigeringsprogram (t ex Paint Shop Pro) kan du välja om och i så fall vilken färg som ska vara genomskinlig. Färgerna i din bild är numrerade och det är färgens nummer du anger. Det finns ett verktyg som visar färgernas nummer i de flesta program.
I Paint Shop Pro liknar verktyget en pippet. Välj denna och klicka på den färg du vill ha genomskinlig. Färgpaletten visar nu vilket nummer färgen har. På bilden har den gråa färgen nummer 8. Detta nummer anges sedan när bilden ska sparas.