Bakgrund och färg Beskär bilder

Bilder på hemsidan - filformat och filstorlek

Självklart vill du ha bilder på hemsidan. Men vet du vilka bildformat som kan användas och hur en bild bör vara för att fungera på Internet? Det kommer du att lära dig i det här avsnittet, liksom hur du gör för att bilden skall visas där du vill ha den.

Bilder i flera delar

Eftersom det här avsnittet kräver att jag använder bilder har jag delat upp det i flera - sidan skulle annars ta för lång tid att ladda. Du kan bläddra fram och tillbaka mellan delarna här och längst ned på varje sida. Övningsuppgifter och kunskapstest finns bara till den första och den sista delen.

Filformatet

De filformat som framför allt används på webbsidor är *.gif och *.jpg - även kallade "giffar" och "JPEG:ar". Vilket format man väljer beror på vilken typ av bild det gäller.

GIF

Enkla bilder, streckteckningar och liknande bilder blir vanligen bäst i GIF-format. GIF-formatet använder 256 färger (8 bitar), vilket gör att bildfilerna blir små. Använd inte GIF-format till färgfotografier eller bilder med färgtoningar.

JPG eller JPEG

JPG-formatet använder miljontals färger (24 bitar), vilket gör formatet lämpligt för färgfotografier men samtidigt gör bildfilen stor. I Paint Shop Pro kan du minska filens storlek genom att försämra kvaliteten när du sparar bilden. Det gör ofta ingen större skillnad när bilden visas på webbsidan, men du bör ändå pröva dig fram så att resultatet inte blir trist suddigt.

Upplösning

Bildens upplösning mäts i pixlar (punkterna som skapar bilden) på höjden och bredden. Standardupplösningen för bilder på webbsidor är 72 dpi (dots per inch, eller punkter per tum) och du bör se till att alla bilder du skall använda på webbsidan har den upplösningen. Upplösningen kan också anges som till exempel 90X120, vilket betyder en bild som är 90 punkter bred och 120 punkter hög.

Det är dock inte upplösningen som är viktigast för filstorleken och tiden det tar att ladda en bild. Alla bilder på webben lagras och överförs i en komprimerad form, där stora ytor med samma färg eller upprepade mönster kan komprimeras mer när bilden skall lagras. En bild med en enda färg går därför mycket fortare att ladda än en bild med många färger i komplicerade mönster.

Även om bilden överförs i komprimerad form, har den fått tillbaka sitt normala utseende när den visas på webbsidan.

Undersök skillnaden

Undersök skillnaden mellan GIF och JPG, olika antal färger och olika kompressioner med småbilderna nedan. När du pekar på någon av de små bilderna visas texten som talar om vilket format bilden har och hur stor den är. Klicka på bilden så visas den i det över fönstret, så att du kan jämföra kvaliteten.
A B C D
E F G H
Som du ser kan skillnaderna vara stora.
  • Bilden av såpbubblan utan kompression (A) är en stor fil som med 50% kompression (B) blir väsentligt mindre utan att förlora för mycket i kvalitet. Den höga kompressionen i C gör bilden omöjlig, utan att krympa filstorleken särskilt mycket ytterligare. Som GIF-bild med 256 färger (D) blir filen till och med större än som okomprimerad JPG, samtidigt som bilden förlorar en del i kvalitet. Bland annat försvinner en del av såpbubblans glans.
  • Från E till F försvinner mycket av färgerna i originalet. I en barnteckning är det antagligen just färgglädjen man vill framhålla, och då får man stå ut med den större filstorleken. Däremot finns det ingen anledning att göra en stor JPG-fil av den här bilden - det vinner den ingenting på.
  • Man får vara bra skarpögd för att se skillnaden mellan G och H. GIF-filen är avsevärt mindre än JPG-filen. Ännu mindre blir den om antalet färger minskas till 2 - se nedan.
Antalet färger

I GIF-bilder kan du minska filstorleken genom att minska antalet färger. GIF-bilden sparas normalt med 256 färger. Bland annat i PaintShop Pro kan du ändra inställningen så att en svartvit bild visas i bara två färger.

Scannad barnteckning i blyerts

Eftersom GIF-formatet använder "förlustfri komprimering" kan man ofta minska antalet färger utan att bilden blir sämre. Till vänster är samma bild sparad med olika antal färger. Från vänster till höger: 

256 färger, 2917 byte
16 färger, 1772 byte
2 färger, 431 byte

Den minsta bildfilen blir alltså bäst!
Storleken är viktig

En stor bild tar lång tid att ladda och risken finns att din besökare tröttnar på att vänta. De som fortfarande sitter med modemanslutning - det vill säga majoriteten av alla surfare - fortsätter till en annan adress om din sida inte är laddad och läsbar efter högst kanske 20 sekunder.

En normal webbsida bör - inklusive bilder - inte vara större än omkring 45 kB. Om det är en riktigt intressant sida, där det finns annat som lockar medan bilderna laddas, kan den dock få bli litet större.

I avsnittet om Genomskinliga och sammanflätade bilder kan du läsa om hur du i Paint Shop Pro på ett enkelt sätt kontrollerar vilket resultat komprimeringen ger, och hur lång laddningstiden blir.

Knycka bilder

Det är inte tillåtet att hur som helst ladda ned bilder från Internet för att använda dem på sina egna hemsidor. Däremot finns det många webbadresser där du kan hämta bilder gratis och där du uttryckligen har tillåtelse att använda dem på din egen hemsida.

Avstå inte från bilder

Det här innebär inte att du måsta avstå från att ha bilder på sidan, eller att du måste krympa bilderna så att de alldeles förlorar sitt innehåll. Det finns många lösningar:

  • Den främsta och mest förbisedda metoden är att beskära bilden för att ta fram det väsentliga i den. Att kameran levererar en bild i storleken 10x15 cm, betyder inte att bilden måste ha det formatet på webbsidan. För de flesta av oss amatörfotografer innehåller varenda bild en mängd oväsentlig information eller detaljer som till och med skämmer själva motivet. I nästa del av bildavsnittet skall vi titta på hur man kan beskära för att göra bilden bättre och samtidigt få mindre bildfiler.
  • Genom att göra bilden "sammanflätad" eller "progressiv" får du bilden att först laddas som otydlig och sedan hela tiden bli tydligare. Det frestar mindre på tålamodet än en bild som långsamt glider ned från överkanten. I avsnittet om Genomskinliga och sammanflätade bilder visar jag hur du gör.
  • Med JavaScript kan du göra en bildvisning med små bilder, som besökaren klickar på för att få se den stora bilden. Ett sådant skript ligger bakom den första bildvisningen på den här sidan. Du kommer att lära dig hur man gör.
  • I avsnittet om JavaScript kommer du också att lära dig att visa en text i stället för bilden; först när besökaren klickar på texten och aktivt väljer att se din bild visas den.
  • När du väljer att visa en text i stället för bilden, kan du dessutom se till att bilderna laddas till cache-minnet så snart sidan för övrigt är färdigladdad. Det gör att de finns färdiga att visa när besökaren klickar på texten. Även detta skall du lära dig.

Men nu är det dags för Övningsuppgifter och Kunskapstest

Övningsuppgifter - Filformat och filstorlek
Kunskapstest - Filformat och filstorlek

Bakgrund och färg Beskär bilder

© SupportData.Net