Bildbehandling på WWW

Tillbaka till Tips

Läs om:

-Filstorlek
-Imagemaps
-Länkning från bild
-Filformat & Komprimering
-Färgpaletter
-Bakgrundsfärger & Bakgrundsbilder
-Progressiv nerladdning

Filstorlek

Som vi alla vet så kan vissa bilder ta lång tid att ladda färdigt. Detta beror på att bilden är stor kb-mässigt (Kilobytemässigt). Detta behöver inte betyda att bilden är stor så att den tar stor yta på skärmen, utan att den innehåller t.ex. mycket färger, kanske är animerad etc.

För att en hemsida skall ta kort tid att ladda ner bör man inte ha för många stor bilder.

Mitt råd är att använd ytterst få bilder och när det verkligen behövs, ingen imponeras på en hemsida som dyker upp efter 30 sekunder.

Som jag skrev förut ska en bild inte vara stor kb-mässigt, men en sak som är lika viktig är att du anger bildens bredd och höjd, alltså sätter ut WIDTH="xxx" HEIGHT="xxx" i IMG-taggen.

Men det är dock viktigt att veta att bilden tar lika lång tid att ladda ner om man använder dessa taggar, det kan då vara stor ide att minska storleken på bilden i ett bildredigerings-program för att minska kb. Ett bra sätt är att minska storleken på en bild är att komprimera den vilket jag beskriver senare.

-Tillbaka

Imagemaps

Imagemaps på svenska översättas till klickbara bilder. För att specificera de ytor av bilden som ska vara ankare används en karta, som är en lista med ytornas koordinater och länkarnas destinationsadresser. Denna karta kan antigen lagras i en särskild fil på servern eller direkt i html-koden.

Jag tycker att man inte skall använda stora Image Maps. Att göra stora Image Maps med bara en eller två länkar på dem är slöseri med tid & utrymme. Det är mycket irriterande att vänta på en stor Image Map att laddas ner, för att sedan upptäcka att det är två länkar på den. Du kommer troligen att upptäcka att de flesta användare som ser en stor Imagemap laddas, kommer att vara långt borta innan den ens har hunnit laddas halvvägs. Vad som kan vara ännu värre är att det ofta inte är uppenbart vad man kan klicka på och inte. Tro mig när jag säger att klickbara bilder kanske ser bra ut i dina ögon, men det är inte vad dina besökare tycker.

Jag tycker att man istället skall använda små klickbara Bilder (Image Maps). Små bilder laddas snabbt vilket gör att besökarna kan använda dem mycket snabbare för att komma dit de vill. Nedan kan du se på ett exempel jag har gjort på en Image Map, om du använder Dreamweaver så är det väldigt enkelt att skapa en snabbt.

-Tillbaka

Länkning från bild

Antigen från en annan hemsida eller en egen bild som finns på en server. Det är viktigt att alltid komma ihåg att man inte ska se hur lång tid din hemsida tar att ladda från hårddisken, detta beror på att hårddisken är mycket snabbare än ett vanligt modem och en vanlig server, och även om din besökare har ett snabbt modem och du har en snabb server så tar det ändå kortare tid att ladda färdigt allt från hårddisken.

En annan sak du bör tänka på är att en webbläsare "cachar" allt (sparar allt) du tittar på på din hårddisk, så om du vill se hur snabb din sida är på nätet bör du först radera dina cachade filer och sen titta på din hemsida som ligger på någon server på nätet. Även de bilder som du tittar på cachas, både då du kollar från hårddisken eller på nätet.

Om man länkar bild från en annans hemsida är det viktigt att tänka på att om den hemsidan bilden länkas från försvinner så försvinner också din bild från din hemsida.

-Tillbaka

Filformat & Komprimering

Det finns idag tre olika filformat för bilder på WWW. I alla dessa filformat ingår komprimering för att få ner storleken på bilden.

Det ena formatet är GIF som betyder Graphics Interchange Format. När GIF-formatet utvecklades var det mycket ovanligt att datorer kunde visa mer än 256 färger. Därför bestämde man sig för att begränsa antalet färger i en GIF-bild till just 256.

GIF används för tecknade eller datorritade bilder. Formatet kan användas för fotografier, men bilden kan då bli gryning eller flammig.

I GIF-formatet komprimeras bilderna utan förlust av färginformation. Detta betyder att bilden ser exakt likadan ut då en komprimerats upp igen, som efter komprimeringen.

En tråkig egenskap med bitmappade bilder är att de alltid är rektangulära, lyckligtvis kan man i GIF-formatet göra bilden transparent.

Det andra formatet är JPEG (Joint Photographic Experts Group). Det är ett format som använder förstörande kompression för att göra bilderna mindre utrymmeskrävande. Det innebär att man kastar bort information i bilden som det mänskliga ögat har svårt att uppfatta. Denna metod lämpar sig mycket bra för fotografier, som ofta har miljontals färger.

Till skillnad från GIF lider inte JPEG av någon begränsning av färgantalet och fungerar alltså bäst för bilder som består av färger, t.ex. fotografier. Det går även att komprimera bilderna mycket mer i JPEG än i GIF. Man kan själv bestämma hur stor kompressionen ska vara. Ju lägre kompression man väljer, desto högre blir bildkvaliteten, men då blir också filen större.

JPEG är en komprimering med förlust av färginformationen. Bildens färger kan till en viss del förändras för att effektivare kunna komprimera bilden. Detta gör att bilderna inte kan göras transparenta.

Det sista formatet jag tänkte ta upp är PNG (Portable Network Graphics) som är ett relativt nytt format som bevarar all färginformation och den använder en förlustfri komprimeringsmetod. PNG utvecklades som ett alternativ till GIF-formatet och används, liksom GIF för att visa bilder WWW och andra elektroniks tjänster. Det som jag tycker är bra med PNG och för WWW är att de också kan göras transparenta. PNG har färg med upp till 48 bitar per pixel eller gråskala med upp till 16 bitar per pixel. PNG är främst framtaget för att ersätta GIF, mest p.g.a. av det stora färgdjupet.

Man skall dock ha i bakhuvudet att PNG inte stödjer alla sorters webb-läsare och därför är det viktigt att tänka på vilken målgrupp man vänder sig till innan man beslutar sig för att använda PNG-fomatet till sina bilder på sin hemsida.

-Tillbaka

Färgpaletter

Precis som målaren använder olika färger och olika anat färger så används ibland olika paletter i en bild som behandlas i datorn. Det är främst om man vill producera en bild på WWW som man är behov av att bestämma vilken man vill använda så att bilden ser ut som det tänkt även på den dator som bilden ses efter det att den publiceras. Största orsaken till att det behövs en speciell palett är att i PC och Mac-miljö används lite olika paletter. Nu är det så förnuligt att det finns en speciell palett framtagen specifikt för WWW. Photoshop har en funktion där man kan ändra paletten till Webb-paletten, det finns även i andra bildredigeringsprogram.

En färgpalett med ett färre antal färger kan användas, för att göra bilden mindre och därmed snabbare att ladda hem över nätet. Använd då helst en delmängd ur webb-paletten.

-Tillbaka

Bakgrundsbilder & Bakgrundsfärger

En viktig sak att ha på minnet när man gör/väljer bakgrund är att bakgrunden inte ska vara störande, alltså inte ha många olika färger i olika nyanser, inte vara animerad etc.

Det är viktigt att komma ihåg att kanterna ska matcha, alltså så ska den vänstra och högra sidan vara likadana och att toppen och botten vara likadana, annars blir bakgrunden som helhel störande, eftersom den hela tiden upprepar sig.

Om din bakgrund är så att det är en väldigt kort men väldigt bred bild (t.ex. om det är en bakgrund med en färgad rand till vänster så måste bilden vara väldigt bred, eftersom vissa skärmar har en upplösning på t.ex. 1280*1024. Detta skulle få till följd att bilden upprepade sig, trots att det ser bra ut på din dator. Bakgrunden skulle bli väldigt ful om det var en till rand i mitten av skärmen.

Om du har en bildbakgrund så se till att du har en färgbakgrund som är i ungefär samma nyans. Detta är viktigt då du har en bakgrund som tar lång tid att ladda, för medan besökaren väntar på att bakgrunden ska bli färdig så bör den vanliga bakgrunden vara någorlunda matchande mot texten på sidan så att man kan läsa texten som finns på sidan medan bakgrunden laddar alternativt om besökaren tryckt på stop så att bakgrunden inte kommer att laddas in. Det finns inget tråkigare när man är inne på en hemsida som har en svart bakgrundsbild som tar lång tid att ladda ner att sidan har t.ex. ljusgrön text som man knappt kan läsa.

En annan sak som är bra att använda när man använder bakgrundsbilder är att göra den vattenstämplad. Om en bakgrundsbild är vattenstämplad ligger bakgrundsbilden stilla, medan sidans innehåll rullar över bakgrunden.

-Tillbaka

Progressiv nerladdning

Med progressiv nerladdning menas bilden laddas ner i omgångar vilket jag tycker är ett väldigt bra sätt att visa sina bilder på WWW.

Med GIF-formatet kallas detta för interlaced GIF och det används då för att få bilden att "växa fram"/"tona fram", vilket gör att man snabbare kan får en uppfattning av hela bilden vid långsam överföring och stora bildfiler.

Det går även att göra detta med JPEG och det gör man genom att markera Baslinje (optimerad). Du sparar dokumentet som fyrfärgs-JPEG och man markerar Progressiv. Nu med detta alternativ visas bilden som jag beskrev innan gradvis efterhand som den läses in från WWW-browsern, med hjälp av flera inläsningar kommer man se en mer och mer detaljer av bilden. Fyrfärgs-JPEG kräver dock mer minne för att visas och man skall ha i baktanken att detta inte stöds av alla WWW-läsare.

Det går även att spara en bild i PNG som progressiv.

-Tillbaka

Senast Uppdaterad 00-09-10 © Conrad Carlsson