WWW kan bara visa bitmappade bilder, alltså rektangulära bilder som byggs upp av små bildelement (pixlar). Bilder från ett vektor baserat ritprogram går alltså inte att använda, såvida du inte kan konvertera bilden till bitmapp.
Problemet med bilder är att de tar upp betydligt mer lagringsutrymme än text. En liten bild kan motsvara tiotusentals bokstäver. Detta gör att det går åt diskutrymme och längre överföringstider. Därför är det viktigt att försöka få bilderna så diskutrymmessnåla som möjligt.
Ett sätt att minska filens storlek är att helt enkelt ta bort de delar av bilden som inte är speciellt viktiga. Om du har en bild med en segelbåt kan du säkert ta bort mängder av himmel och hav utan att det förstör bilden. Det blir snarare tvärtom - betraktaren ser snabbare det relevanta i bilden!
Man kan också förminska bilden, då tar bildfilen mindre plats. Det är kanske inte nödvändigt att visa bilden i full storlek. Om man vill visa många bilder kan det vara en fördel att använda små bilder, förslagsvis tre gånger tre centimeter, som en förhandsvisning. Sidan går då snabbt att läsa in och man kan skapa länkar som läsaren kan klicka på om han eller hon vill se bilden i full storlek. Läsaren är oftast beredd att vänta lite längre på en bild man vill se.
Ett annat smart sätt att minska bildfilens storlek är att minska upplösningen av bilden, d.v.s. göra de minsta bildelementen större och därmed få en mindre detaljrik bild. Bilder som sparas i en dator delas upp i små, små fykanter som kallas bildpunkter eller pixlar och varje fyrkant får en viss färg. Minskar upplösningen gör man med hjälp av ett bildredigeringsprogram. Upplösningen berättar hur små fyrkanterna är. Eftersom bilderna i webbsidor bara är tänkta att ses på en bildskärm, räcker det med vanlig bildskärmsupplösning, 72-75 pubkter per tum (måttenheten kallas ofta dpi, efter engelskans Dots Per Inch&41;. Om man läser in bilder med en bildläsare och inte tänker förstora dem räcker det oftast med att använda 72-75 dpi, även om bildläsaren klarar 600 dpi
Slutligen kan man pröva att minska antalet färger i bilden. Det är nästan onödigt att ha en miljon färger i en bild. Man kan lagra bilderna i olika palettstorlekar. Palettstorleken avgör hur många olika färger som kan finnas i bilden. Varje punkt i bilden har en av färgerna i bildens palett. De tre vanligaste palettstorlekarna är 256, 32 768 och 16 777 216 färger.
Varje bildpunkt tar upp en, två eller fyra byte med de olika palettstorlekarna. Om man minskar palettstorleken hos en bild från mijontals färger till 256 färger krymper bilden till en fjärdedel av sin ursprungliga storlek. Men med ett mindre antal färger minskar också kvalitén för vissa bilder, främst hos fotografier. Eftersom det finns färre färger att välja mellan måste många bildpunkter ritas med en färg som inte riktigt stämmer. Bilderna ser då lite prickiga ut, men det går ändå bra att se vad de föreställer.
En hel del nätsurfare har operativsystem som oftast är inställda på att visa maximalt 256 färger, och då spelar det ingen roll för dem om själva bilden har en miljon olika färger. Därför behöver du oftast inte ha mer än 256 färger i dina web-bilder. Då blir bildfilerna mycket mindre och besökarna gladare. Alla ändringar kan du göra i ett bildredigeringsprogram.
När man har redigerat bilden så att den ser ut som man vill är det dags att spara den i något lämpligt bildformat. Genom att välja rätt format kan du spara fantastiskt mycket utrymme!
Bitmappsbilder som är skapade i t.ex. programmen Paintbrush eller Paint sparar man i BMP-formatet. Problemet med BMP-bilder är att de tar mycket plats på hårddisken och det tar lång tid att skicka sådana bilder på WWW. Därför har man utvecklat några nya format som kan komprimera bilder. Det betyder att samma bilder kräver mycket mindre utrymme, vilket innebär mindre minnesåtgång och snabbare överföringstider på WWW.
World Wide Web använder sig i princip bara av två olika format: GIF och JPEG. Därför måste alla bilder du vill visa konverteras till något av dessa format, och du behöver alltså någon form av bildkonverteringsprogram. Om du kan spara bilderna direkt till något av dessa format från ditt ritprogram behöver du inte något sådant program.
GIF betyder Graphics Interchange Format, och många bilder på World Wide Web är lagrade i detta format. (Bilderna sparas med filtillägget .gif.) GIF-formatet begränsar antalet färger i bilderna till 256, eftersom när det utvecklades kunde datorerna bara visa 256 färger. Moderna datorer kan idag visa många tusen olika färger.
Det finns två versioner av GIF-formatet: GIF87a och GIF89a. I GIF89a är det möjligt att göra delar av bilder genomskinliga och även göra animeringar.
Bilder kan hos GIF lagras i en speciell form som kallas interlaced. Bilden visas då först med mycket låg upplösning, men efterhand som bilden skickas över till mottagaren blir upplösningen bättre tills hela bilden är överförd. Man får då en uppfattning om vad bilden föreställer innan hela bilden är överförd. Interlaced GIF är bättre än den valiga formen, där bilden växer uppifrån och ned.
Om en bild har få färger eller stora fält med exakt samma färgnyans, är det bra att använda GIF, eftersom kompressionen då blir mycket god. För att göra det möjligt för så många som möjligt att se bilderna bör man använda GIF.
En tråkig egenskap med bitmappade bilder är att de alltid är rektangulära. Om man vill visa en stjärna på sin web-sida, måste den alltså ha någon form av bakgrundsfärg. Ett förslag är att låta bildens bakgrundsfärg ha samma färg som web-läsarfönstrets bakgrundsfärg. Men eftersom den kan ändras i web-läsarens inställningar är det inte alls något säkert kort. Lyckligtvis kan man i GIF-formatet ersätta en av de 256 färgerna med "genomskinlig" (eller transparent) färg. På så sätt kan man få bilder som inte ser ut att vara fyrkantiga. För att kunna göra en färg genomskinlig krävs att man har ett speciellt program som kan ersätta en färg med "genomskinlig" färg. Sådana program finns som shareware. Ett annat smidigt program att göra genomskinliga bilder är Microsoft Photo Editor, om du har tillgång till det. I programmet målar man alla punkter som inte ska synas med en färg som inte förekommer någon annanstans i bilden. Därefter anger man att denna färg är den genomskinliga och sparar bilden med ett nytt namn (i formatet GIF89a). Sedan behöver man bara länka in den i en webbsida.
JPEG (som betyder Joint Photographic Experts Group) är ett bra alternativ till GIF-formatet. (JPEG-bilder ska ha filtillägget .jpeg eller .jpg). JPEG använder en typ av kompression, förstörande kompression, för att göra bilder mindre utrymmeskrävande. Man kastar bort information i bilden som det mänskliga ögat har svårt att uppfatta och gör därmed bilden mycket mindre än originalet. Denna metod lämpar sig mycket bra för fotografier, som ofta har miljontals färger.
JPEG lider inte av någon begränsning av färgantalet, och är alltså bäst för bilder som består av många färger, t.ex. fotografier. En nackdel är att skarpa linjer och kontraster blir suddiga med JPEG-kompression.
Man kan själv bestämma hur stor JPEG-kompressionen ska vara. Om man väljer en låg sådan kommer bildkvaliteten att vara mycket hög, men bildfilen blir också större. Väljer man hög kompression blir bildkvaliteten sämre, men filen mindre.
Det gäller alltså att hitta en balans mellan kvalitet och storlek på bildfilen. Oftast går det att komprimera bilder kraftigt utan att de blir speciellt mycket sämre. Ibland kan man dock välja en för hög kompession så att bilden förstörs.
Bilder ska inte läggas in i själva HTML-filen utan ska finnas som vanliga fristående bildfiler. Man talar i HTML-koden istället om att en viss bild ska visas genom att hänvisa till en bildfil. Man ska använda sig av taggen <IMG>, för att klara av detta.
<IMG>(som är en förkortning för image) är en tagg som läggs in i HTML-koden där man vill ha en bild. Eftersom det enda taggen ska göra är att visa en bild, har den inte någon sluttagg.
Det räcker inte enbart med bara <IMG>, för då har man ju inte talat om vilken bild som ska visas...Därför har IMG ett attribut som alltid måste finnas med - SRC (förkortning för source).
Efter SRC skriver man = följt av bildfilens URL inom citattecken. Om bilden ligger i samma katalog som själva HTML-filen den ska användas i, räcker det med att bara skriva bildens filnamn. Det går bra att använda relativa URL:er.
Här stoppas en bild 
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar">in mitt i
texten. I text kan man stoppa in bilder var som helst!
Om det av någon anledning blir något fel när bilden ska stoppas in i web-sidan, t.ex. för att man av misstag raderat bilder hamnar där istället en "trasig bild"-symbol.
Eftersom det tar mycket längre tid att överföra bilder än text på nätet väljer många, som t.ex. har långsamma modem, att göra inställningen att inga bilder automatiskt ska visas i web-läsaren. De kan istället separat överföra de bilder de är intresserade av.
Om man väljer att inte överföra bilder automatiskt, ersätts alla bilder med "trasig bild"-symboler. Här uppstår ett problem: Ofta kan det vara så att bilderna på din web-sida är nödvändiga för att man ska förstå sidans innehåll riktigt. Om man bara ser "trasig bild" - symboler överallt missar man mycket viktig information.
HTML har ett botemedel mot detta. Varje bild kan få ett extra attribut ALT som talar om vilken text som ska visas om bilden inte visas. Detta görs genom att man inuti IMG-taggen skriver ALT="Passande alternativtext".
För att lägga in en bild med alternativtext skriver man:
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar">
Nedan syns det hur det kommer att se ut om bildöverföringen misslyckas.
Det finns ytterligare ett attribut i standard-HTML till <IMG>. Det heter ALIGN och påverkar hur bilden ska placeras i förhållande till texten runt omkring. Det kan ta värdet "BOTTOM", "MIDDLE" eller "TOP". Vidare kan det även anta värdena "LEFT", "RIGHT" och "CENTER".
Netscape har gett attributet ALIGN fler värden: TEXTOP variant av TOP, ABSMIDDLE variant av MIDDLE, BASELINE variant av BOTTOM, ABSBOTTOM variant av BOTTOM. I webbläsare som inte förstår dessa värden tolkas kommer det att tolkas som det förvalda ALIGN=BOTTOM.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=BOTTOM>
För att se hur texten uppför sig i bildens omgivning när ALIGN=BOTTOM
skriver vi en hel del ointressant text här. ALIGN=BOTTOM Gör så att
bildens nederkant kommer i höjd med textens baslinje. Lägg märke till
att första raden i denna text hamnar vid nedre delen av bilden och att
texten sedan fortsätter under bilden.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=BASELINE>
För att se hur texten uppför sig i bildens omgivning när ALIGN=BASELINE
skriver vi en hel del ointressant text här. ALIGN=BASELINE Gör så att
bildens nederkant kommer i höjd med textens baslinje. Texten fortsätter
sedan under bilden.
<gifs/html/IMG SRC="tarning.gif" ALT="tärningar" ALIGN=ABSBOTTOM>
För att se hur texten uppför sig i bildens omgivning när
ALIGN=ABSBOTTOM skriver vi en hel del ointressant text här.
ALIGN=ABSBOTTOM Placerar bilden i nivå med den lägsta punkten på
textraden, t.ex så hamnar ju j, g q under baslinjen..
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=MIDDLE>
För att se hur texten uppför sig i bildens omgivning när ALIGN=MIDDLE
används, skriver vi även här en del ointressant text. Med attributet
ALIGN=MIDDLE centrerar man bilden i förhållande till textens baslinje.
Sedan fortsätter texten under bilden.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=ABSMIDDLE>
För att se hur texten uppför sig i bildens omgivning när ALIGN=ABSMIDDLE
används, skriver vi även här en del ointressant text. Med attributet
ALIGN=ABSMIDDLE Centrerar man bilden till textens mittlinje. Sedan
fortsätter texten under bilden.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALING=TOP>
För att se hur texten uppför sig i bildens omgivning när ALING=TOP
används fortsätter vi att skriva ointressant text... Som väntat hamnar
första textraden längs med bildens topp och sedan fortsätter texten
under bilden.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALING=TEXTTOP>
För att se hur texten uppför sig i bildens omgivning när ALING=TEXTTOP
används fortsätter vi att skriva ointressant text... ALIGN=TEXTTOP
lägger bilden i nivå med med den övre gränsen på den högsta "saken" på
raden, TEXTTOP placerar bildens överkant i höjd med överkanten på den
högsta bokstaven på raden. Sedan fortsätter texten
under bilden.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=RIGHT>
Nu prövar vi hur det hela ser ut när ALIGN=RIGHT används.
Bilden
hamnar som du kan se till höger, men lägg märke till att mer än en rad
kan visas bredvid bilden.<BR CLEAR=RIGHT>
När vi skriver <BR CLEAR=RIGHT> hamnar texten under
bilden därför att där är högermarginalen fri.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=LEFT>
Vi fortsätter med att prova hur det ser ut när ALIGN=LEFT används.
Bilden hamnar nu som du kan se till vänster, men lägg återigen märke
till att mer än en rad kan visas bredvid bilden.
<BR CLEAR=LEFT>
Detta är exempel på hur man kan placera text runt bilder.
Styckestaggen CENTER i utökade HTML kan också ta ett (litet annorlunda) ALIGN-attribut. Det innebär t.ex. att text och bilder kan centreras med hjälp av ALIGN=CENTER:
<P ALIGN=CENTER><IMG SRC="gifs/html/tarning.gif" ALT="tärningar"></P> <P ALIGN=CENTER>Och så här ser vanlig text ut centrerad.</P>
Och så här ser vanlig text ut centrerad.
Det går faktiskt även bra att ange bredden och höjden i förhållande till web-läsarfönstrets storlek, och inte i bildpunkter. Då anger man bredden och höjden i procent. Det är inte bra att ange både bildens höjd och bredd i procent, eftersom då förändras dess proportioner när man förändrar web-läsarfönstrets storlek. Vanligtvis ger man bara bredden ett procentvärde. Då räknas höjden automatiskt ut så att proportionerna bibehålls.
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" ALIGN=RIGHT>
Här visas bilden i full storlek.
<IMG SRC="gifs/html/tarning.gif" WIDTH=10%
ALT="tärningar" ALIGN=,RIGHT>
Här är samma bild fast den visas i 10% av webläsarfönstrets storlek.
Tänk på att WIDTH=30%, inte innebär att bilden kommer att visas i 30% av ursprungsbildens storlek, utan den kommer visa i 30% av webbläsarfönstrets storlek.
Med attributen HSPACE och VSPACE anger man hur mycket tomrum det ska
finnas runt bilden. HSPACE (en sammandragning av horizontal
space, horisiontellt utrymme) bestämmer hur många bildpunkter
som ska vara tomma på sidorna om bilden och VSPACE (vertical
space, vertikalt utrymme) reserverar ett antal tomma
bildpunkter ovanför och under bilden. Här visas bilden med ett utrymme
på HSPACE och VSPACE på 20 bildpunkter. Man skriver helt enkelt:
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar"
ALIGN=LEFT WIDTH=7% HSPACE=20 VSPACE=20>
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999