<IMG SRC="bildfil.gif" WIDTH="50" HEIGHT="50"> <BR> Det här är bildens verkliga storlek. <P> <IMG SRC="bildfil.gif" WIDTH="100" HEIGHT="50"> <BR> Såhär ska bilden inte se ut.
Det här är bildens verkliga storlek.
Såhär ska bilden inte se ut.
| <<< Förra avsnittet | Innehåll | Nästa avsnitt >>> |
Undvik för många och för stora bilder på dina webbsidor. Det tar tid att hämta hem dem över nätet och kräver stor kapacitet hos klienten. Om du har väldigt många bilder på en sida, och webbläsaren inte har minne nog för att visa alla läggs en standard-ikon ut istället för bilden vilket kan ge ett underligt intryck av sidan.
Du kan i och för sig länka till bilder i vilket filformat som helst (se ovan), men kan webbläsaren inte hantera det kommer den inte lägga ut nåt på skärmen utan istället ropa på ett hjälpprogram. Om användaren har ett program som kan hantera det bildformatet kommer bilden visas i det programmets fönster, och alltså inte på själva webbsidan.
För att göra egna bilder behöver du ett bildbehandlingsprogram, helst ett som kan konvertera bilder från andra filformat. Exempel på ett bra bildbehandlingsprogram är Adobe Photoshop (finns för Windows, Macintosh och en del Unix-dialekter) som är ett stort, kommersiellt program med många funktioner. Enklare ritprogram och konverteringsprogram finns att hämta från nätet som freeware och shareware. Du kan också använda bilder från clip art-samlingar. Se bara till att bilden är i GIF- eller JPEG-format.
Ett annat tips är att om du är ute och surfar och hittar en bild du vill ha, klicka med högra musknappen (Windows) eller håll musknappen nere (Macintosh) på bilden. Välj "Save This Image as..." så får du hem bilden och kan använda den själv. Tänk dock på att bilden kan vara skyddad av upphovsrätt. Använd inte bilder som du inte har tillstånd till att använda.
Exempel:
<IMG SRC="bildfil.gif">Flera av attributen nedan kan kombineras, då lägger man mellanslag mellan. Exempel:
<IMG SRC="bildfil.gif" LOWSRC="bild.jpeg" ALT="Ett rött hjärta" BORDER="2" WIDTH="40" HEIGHT="20" ALIGN="LEFT">
Exempel:
<IMG SRC="bildfil.gif" ALT="Ett rött hjärta">Observera att ALT-texten inte ska vara en beskrivning av bilden, utan ett alternativ för dem som inte ser bilden. Om du till exempel använder en liten grön cirkel som en markering, skriv då inte ALT="Liten grön cirkel", utan hellre ALT=" * ". Stjärnan gör samma "jobb" i en textbaserad läsare som den gröna cirkeln gör i en grafisk. Bilder som enbart är till för dekorering kan mycket väl ha ALT="".
Som alternativ text till en firmalogotyp kan man skriva firmanamnet inte ALT="Logotyp". Som alternativ text till bilder som illustrerar en artikel kan man skriva sånt som normalt skulle ha stått i en bildtext, ifall bilden fanns i en bok. Istället för ALT="En bild på Bohus fästning" kan man skriva ALT="Bohus fästning byggdes på 1300-talet och är idag delvis raserad".
Exempel:
<IMG SRC="bildfil.gif" HEIGHT="45" WIDTH="90">Man kan också använda WIDTH och HEIGHT för att ändra storleken på en bild genom att ange andra värden än vad bilden egentligen har. Detta rekommenderas inte, annat än för enfärgade dekorränder och liknande.
Man kan även ange storleken i procent av sidans storlek. Detta kan användas om man till exempel har en enfärgad dekorlinje som man vill ska gå över hela sidan. Med WIDTH="100%" kommer linjen alltid fylla hela bredden, oberoende av hur brett användarens fönster är.
| Kod | Visas som |
|---|---|
<IMG SRC="bildfil.gif" WIDTH="50" HEIGHT="50"> <BR> Det här är bildens verkliga storlek. <P> <IMG SRC="bildfil.gif" WIDTH="100" HEIGHT="50"> <BR> Såhär ska bilden inte se ut. |
Det här är bildens verkliga storlek.
|
När resten av sidan väl är laddad hämtas den riktiga versionen av bilden (som du har angivit som SRC). Besökaren får alltså en bra förhandsvisning av den riktiga bilden. Bilderna ska vara lika stora i pixlar räknat. Om de inte är det så kommer den bilden som anges som SRC skalas om till samma storlek som LOWSRC-bilden. Det går också bra att ange HEIGHT och WIDTH som då påverkar bägge bilderna.
LOWSRC accepteras bara av vissa webbläsare; i andra ger den ingen effekt.
ALIGN="BOTTOM" lägger bildens nederkant i nivå med textens baslinje. ALIGN="MIDDLE" centrerar bilden vertikalt till textens baslinje. ALIGN="TOP" lägger bildens överkant i nivå med toppen på den högsta tecknet på raden.
Om du har text figursatt runt om en bild, och vill börja på en ny rad, under bilden, använder du attributet CLEAR till koden <BR>. Den nya raden kommer att börja precis nedanför bildens undre kant.
<BR CLEAR="RIGHT"> Flyttar efterföljande text till närmaste lediga högra marginal.
<BR CLEAR="LEFT"> Flyttar efterföljande text till närmaste lediga vänstra marginal.
<BR CLEAR="ALL"> Flyttar efterföljande text till den närmaste rad där både höger och vänster marginal är ledig. Detta kan användas när du har bilder på båda sidorna om texten och inte vet vilken av bilderna som är störst.
| Kod | Visas som |
|---|---|
Vanligtvis hamnar en bild <IMG SRC="bildfil.gif"> mitt i texten, på samma baslinje. <P> <IMG SRC="bildfil.gif" ALIGN="LEFT"> Om man anger ALIGN så blir texten figursatt runt om bilden. I detta fall ligger bilden mot sidans vänstra kant, och texten flödar runt om. <BR CLEAR="ALL"> För att flytta ner efterföljande text till en fri marginal kan man använda CLEAR. |
Vanligtvis hamnar en bild
mitt
i texten, på samma baslinje.
|
<A HREF="allan.html"><IMG SRC="bild.gif"></A>Användaren följer länken genom att klicka någonstans på bilden. Ett vanligt användningsområde är knappar som ibland kan ge ett trevligare intryck än vanliga text som länkar.
I de flesta webbläsare kommer bilden att få en blå ram för att markera att det är en länk (ramen blir röd eller lila när länken är följd, precis som för vanliga textlänkar).
Vill du inte ha en ram använder du BORDER="0":
<A HREF="allan.html"><IMG SRC="bild.gif" BORDER="0"></A>Tänk bara på att utforma bilden och den omgivande texten så att man tydligt ser att bilden verkligen är en länk.
Observera att du inte bör ha något mellanrum eller radbrytning mellan koderna. Låt alltså större än- och mindre än-tecknen mötas. Gör du inte det kan du få små, blåa, oönskade streck i närheten av bilden, eftersom även mellanslagen räknas som en del av länktexten, och därför blir understrukna. Det är också extra viktigt att ange ALT-text för bilder som fungerar som länkar, annars blir sidan helt oanvändbar i textbaserade webbläsare.
Man kan också låta olika delar av bilden länka till olika sidor. Detta görs med en s.k. imagemap (se detta avsnitt).
GIF-bilder lämpar sig i första hand för grafik med få färger och stora enfärgade ytor, till exempel knappar, ritningar, textplattor, dekorlinjer etc. GIF är ett s.k. dekorfärgsformat. När bilden skapas bestäms en färgpalett med alla de färger som bilden innehåller. Ju fler olika färger desto mer plats tar filen (i kilobyte räknat). Maximalt antal olika färger i en GIF-bild är 256 (8 bitar per pixel), men ofta försöker man hålla sig under 30.
En GIF-bild kan ha transparent bakgrund. Man definierar en av färgerna i färgpaletten som transparent, och då kommer webbsidans bakgrundsfärg synas igenom.
En GIF-bild kan vara "interlaced". Vanligtvis sparas bildinformationen linje för linje uppifrån och ner, och under tiden som bilden laddas in ritas den också upp så. Om man istället sparar bilden som "interlaced" så sparas linjerna i bilden i en annan ordning vilket gör att bilden ser ut att smälta in (upplösningen blir gradvis bättre och bättre). Den färdiga bilden ser likadan ut på webbsidan, skillnaden är hur den ser ut medan inladdningen fortfarande pågår.
GIF-standarden medger också animering. En följd av flera gif-bilder kan slås samman till en fil och visas en efter en, ungefär som en blädderboksfilm. Läs mer om animerade GIF-bilder här
JPEG står för Joint Photographic Expert Group. JPEG-bilder är också ett ganska vanligt bildformat på webbsidor. De flesta webbläsare som kan visa bilder kan visa JPEG-bilder.
JPEG lämpar sig i första hand för fotografier och andra bilder som innehåller många olika färger i kontinuerliga toner, till exempel hudfärg, en himmel som innehåller flera tusen olika blå nyanser etc. JPEG-formatet är ett RGB-färgsformat (d.v.s. varje färg är uppbyggd av rött, grönt och blått), och en bild kan innehålla upp till 16,7 miljoner olika färger (24 bitar per pixel).
Bilderna komprimeras med en förstörande algoritm, det innebär att den information som ögat har svårast att uppfatta slängs bort. När man sparar bilden kan man välja hur hårt denna komprimering ska ske. Vid höga komprimeringar kan klara, distinkta linjer i bilden bli suddiga. JPEG stöder inte transparenta bakgrunder, interlacing eller animering.
PNG är ett nytt format som introducerats för att vara bättre än GIF, men det är ännu inte så många webbläsare som kan visa PNG-bilder. PNG står för Portable Network Graphics. PNG kan även uttydas Png is Not Gif.
XBM står för X-Windows Bitmap, och är ett enbitars-bildformat (d.v.s. bilderna är svart/vita utan gråskalor) som används i vissa Unix-tillämpningar. XBM-bilder kan visas av Netscape, men få andra webbläsare.
| <<< Förra avsnittet | Innehåll | Nästa avsnitt >>> |