HTML

Bilder

Nu kanske någon är intresserad av hur Nike ser ut. Snart kommer lite bilder på henne men först lite allmänt om bilder och bildbehandling för nätet.

Bilder som man tar med digitalkameror har i regel stor upplösing. Upplösning betyder ungefär hur fint "ritad" bilden är. Det kan också vara skärmens upplösning som man menar och detta betyder hur fint skärmen kan rita som bäst. Läs gärna mer om bilder på Lars Ekdahls Cyberhome.

Ju fler bildpunkter en bild använder desto större plats tar den på hårddisken eller webbservern. Alla som har använt nätet vet att det är tråkigt att sitta och vänta på att saker ska laddas och det är oftast stora bilder som tar mycket tid. Genom att arbeta om bilder innan de läggs ut på nätet sparar vi tid åt våra användare. Även om överföring går snabbare och snabbare på Internet tycker jag att alla bilder ska hållas under 100 Kb (Kilobytes) stora. Försök att hålla storleken så liten som 20 Kb om det finns flera bilder på sidan.

Det finns många proffsprogram för att redigera bilder men vi kommer inte att titta på några av dessa här. Istället ska vi se hur man på ett någorlunda enkelt sätt kan fixa till sina bilder i programmet Paint som finns i Windows. Ett exempel är bilden tree.jpg som är tagen med en digitalkamera och med upplösingen 3 miljoner bildpunkter. Från början är den 1536x2048 bildpunkter (bredd x höjd) och 814kb på disk. Detta är alldeles för stort för att lägga på nätet och vi öppnar filen i Paint. Utan att göra något mer sparar vi filen till tree2.jpg. Formatet som Paint sparar på blir lite annorlunda och nu är filens storlek nere på 397kb. För blotta ögat syns det ingen skillnad mellan bilderna.

I nästa steg ska vi minska höjd och bredd på bilden. Genom att ha tree2.jpg öppen i Paint och trycka CTRL-w kommer verktyget "Ändra storlek och snedställ" upp. Vi väljer att minska formatet till 25 % av ursprunglig storlek och skriver in 25 i rutorna för Ändra storlek och klickar på OK. Efter att ha sparat detta som tree3.jpg kollar vi på storleken igen. Den är nere i 40kb och kan nu användas på nätet. Det är givetvis en ganska stor bild till bredd och höjd att visa, och storleken på disk minskas ganska mycket om vi minskar ner bildens storlek. En minskning till 50% minskar utrymmet på disk (och därmed nedladdningstiden) till 25%.

Tips

Det finns ett par olika sätt att se hur stor en bild är när det ligger på den egna datorn.

Ett sätt är att helt enkelt föra musen över bildfilen (namnet på filen eller bilden ikon) och en liten ruta med mått, filformat och filens storlek dyker vid muspekaren. Det fungerar t ex i Windows XP.
Filinformation Windows XP

Dessutom går det att klicka (en gång) på en bild och då kommer lite information om bilden/filen upp i vänsterkanten på filhanteraren (Windows XP).
Filinformation Windows XP

Ett annat sätt är att titta i bildfilens egenskaper. Det här görs enklast genom att högerklicka på bildfilen och välja Egenskaper. I Egenskaper finns också information om filformat och filens storlek, men inte om bildens mått i pixlar.
Filinformation Windows XP

Vi lägger in en bild på Nike och detta gör vi med märket IMG (efter det engelska ordet image).

Precis som märket A som vi använde för att lägga in en länk måste vi via attributet SRC, efter engelska source, berätta vilken bild vi vill lägga in. Det kan vara en bild som ligger på den egna datorn eller servern eller en bild ute på Internet. Tänk på att upphovsrätten gäller även på Internet!

Vi ska använda en lokal bild som ligger i katalogen img samma katalog som vi har våra HTML-filer i.

<IMG SRC="../img/nike.jpg" alt="Nike">

För att komma åt bilderna från filen som vi arbetar med (som ligger inne i katalogen htmlfiler) måste vi först gå in i katalogen img och där kommer vi åt filen nike.jpg.

IMG har attributen WIDTH(bredd) och HEIGHT(höjd) som kan sättas för att göra bilden till en viss storlek. Dessutom måste man också ange en alternativ textsträng som visas om bilden inte kan visas. Detta görs med attributet ALT.

Det kan se ut såhär :
<IMG SRC="../img/nike.jpg" WIDTH="300px" HEIGHT="400px" ALT="Nike" >

Sätter man bara ett av attributen för bredd och höjd kommer bildens proportioner att behållas medan man kan ändra proportionerna genom att sätta båda attributen. Att ändra bildens proportioner blir inte alltid så bra. T ex skulle inte bilden på Nike se bra ut med höjden 700 pixlar och bredden 100 pixlar.

Pixlar är en exakt måttenhet som ofta används för att ange storlek på olika HTML-element. En pixel är samma sak på alla olika dataskärmar men vissa skärmar har bredden 600 pixlar och andra 2000 pixlar så det är inte helt lätt att veta hur stora saker man kan lägga in.

Väljer man som i exemplet att inte använda något av dessa attribut får bilden sin naturliga storlek. Resultatet i vårt exempel blir en bild med naturliga proportioner.

Resultat

Resultat

För att testa exemplet behöver du bilden "nike.jpg". Du kan ladda ner bilden och använda den (och alla andra bilder i exemplen) när du arbetar med sidorna. Men kom ihåg att copyright alltid gäller! Högerklicka på länken och välj "Spara som/Save as/Save target as" : Ladda ner. Spara bilden som nike.jpg i en katalog som heter img. Katalogen img ska ligga i den katalog som de filer som du arbetar med ligger i. Om bilden visas när du provar filen bilder.html på din egen dator har du gjort rätt!