Grafik - Introduktion

Inledning

Det vanligaste för en personlig hemsida är kanske att man vill dela med sig av sina fotografier. Då måste man först och främst få in dem i sin dator - spara dem på hårddisken - till exempel genom att läsa in dem med en scanner. Numera kan man också när man framkallar sin film få bilderna på CD utan att det kostar alltför mycket extra! Eller du kanske har digitalkamera?

Vill man pigga upp sin sida med Clipart-bilder eller snygga till designen med pilar och sånt kan man hitta en hel del gratis på nätet. Men se upp! Många bilder är Copyright-skyddade! Man kan också tillverka såna här bilder själv i ett bildbehandlingsprogram. Det är bara ganska svårt...

---

Bildformat

För att en bild ska passa för webben måste den ha ett visst format. Format? Vad är nu det? Jo, formatet anges i filändelsen, d.v.s. de bokstäver som kommer efter punkten i filnamnet...

Till exempel är txt och doc vanliga filändelser på textdokument.

Bildformat för Websidor

För bilder på webben gäller främst två format: jpg och gif. Men även formatet png är anpassat för att användas på websidor.

JPEG  (JPG)
Används i första hand för fotografier. JPEG stöder bilder med 24-bitars färg (24-bit - true color).

GIF
Används till bilder som inte har så många färger, typ ClipArt, eftersom gffar kan ha max 256 färger. För att få en bild med transparent (genomskinlig) bakgrund måste man använda en gif-bild. Giffar kan också animeras. Så att de snurrar, hoppar och blinkar och så...

PNG
PNG ( Portable Network Graphics) stöder - precis som GIF - transparens och är ett relativt nytt format för webben, som skapades på grund av att ett bra alternativ till GIF efterfrågades.

GIF-formatet använder nämligen en komprimeringsmetod som är skyddad av upphovsrättslagen och det är företaget "Unisys" som innehar patentet. Därför måste de grafikprogram som vill inkludera funktion för GIF-bilder betala licens. Det kostar antagligen en slant - och det är grunden till att gratis grafikprogram mer sällan klarar av att hantera giffar.

Till skillnad från GIF stöder formatet PNG 24-bitars färg och gråskala - precis som JPEG. PNG använder också "alpha kanaler" för att skapa "gradvis" transperens vilket inte är möjligt med GIF.

Observera att eftersom PNG är ett relativt nytt format visas det inte i riktigt gamla webläsare.

PNG i Internet Explorer

En png-bild med transparens kommer inte att fungera i Internet Explorer före version 7.

Det finns en del lösningar på webben - javascript m.m. - för att få transperensen att visas även i IE 5 och 6. Själv har jag har aldrig fått någon av dem att fungera tillräckligt bra. Sök i ngn sökmotor på: "internet explorer + png" så hittar du några olika metoder.

Ett annat känt problem i Internet Explorer är att PNG-bilder visas med "korrigerade färger" även på webben vilket andra webbläsare inte gör. Det kan få resultatet att en bilds färger inte visas som de ska jämfört med t.ex. färgen på sidans bakgrund.

Lösningen är att spara dina PNG-bilder utan "gamma correction". Om det inte fungerar i ditt grafikprogram finns ett användbart gratisprogram ( där du kan ta bort färgkorrektionen ) för Windows: TweakPNG.

Byt Bildformat

Kanske har du bilder sparade på din dator i andra filformat än dem som är avsedda för webben. Kanske bmp, tif eller wmf? Vill du använda dem på din hemsida bör du byta filformat. Vad du än har för grafikprogram går det till på ungefär samma sätt.

• Starta ditt grafikprogram och öppna din bild: Arkiv / Öppna (File / Open).
• Välj sedan att spara filen: Arkiv / Spara som (File / Save as).
• Namnge filen och välj ett lämpligt filformat (se ovan). Klicka OK!

Har du inte något grafikprogram? Eller har du upptäckt att det du har inte hanterar rätt filtyper? Kika under rubriken: GRAFIK / Grafikprogram. Där finns programtips!

OBS!
Kan du inte se filtilläggen på din dator? Har du Windows?
• Öppna en mapp - vilken som helst.
• Klicka på "Verktyg" högst upp och välj "Mappalternativ".
• I det nya fönstret som öppnas väljer du fliken: Visning.
• Antagligen ser du en bock framför alternativet:
  "Dölj filnamnstilägg för kända filtyper" nästan högst upp i listan.
• Klicka i rutan så försvinner bocken.
• Klicka OK längst ner. Klart!

---

Bildens Storlek & Upplösning

Det är viktigt att att bilder på en websida inte tar så mycket "utrymme" i anspråk. En bild med bra kvalitet d.v.s hög upplösning tar längre tid att ladda för webläsaren än en med låg upplösning. Om du har prövat att maila en bild du scannat in, vet du kanske vad det rör sig om...

Det du ser på din datorskärm är i själva verket uppbyggt av små punkter: pixlar. En bilds storlek mäts i just pixlar och den här rutan är 10 x 10 pixlar : Ju större bilden är ju tyngre blir den förstås att ladda.

På webben styr alltså skärmen hur "tydlig" bilden blir så att säga. Upplösningen på en bild mäts i DPI - "dots per inch", "punkter per tum" - och det är inte någon större idé att ha högre värde än 96 på en webbild, för skillnaden kommer ändå inte att synas på skärmen. Normalt brukar 72 DPI anses räcka.

Hög upplösning gör bilden tung att ladda för webläsaren. Själva "tyngden" mäts i kilobyte. En bild du läst in i din scanner kanske har en upplösning på 200 DPI och tyngden skulle kunna vara nåt i stil med 99 kb. Om du gör bilden lite mindre i storlek och sänker upplösningen till 72 DPI skulle den kanske inte bli tyngre än 20 kb vilket förstås är mycket bättre!

Ändra Bildens Storlek och Upplösning

För att inte din sida ska bli seg att ladda för besökarnas webläsare måste du alltså fixa till dina bilder. Om du har en scanner har du säkert också ett enklare grafikprogram. Där kan du ändra bildens storlek och upplösning. Annars kan du kika under rubriken: GRAFIK / Grafikprogram. Där finns programtips!

Så här ungefär går det till i de flesta grafikprogram:

• Börja med att göra en kopia av din bild ifall något skulle gå på tok.

• Öppna bilden i ditt grafikprogram.

• Eventuellt kanske du vill beskära bilden innan du ändrar storleken. Det gör man i de flesta grafikprogram genom att markera det område i bilden man vill ha KVAR för att sedan välja "Beskär" eller "Crop".

• Se också till att ditt program visar bilden i egentlig storlek. Det görs oftast genom att man anger zoomen till 100%. Eventuellt kan det finnas ett kommando i stil med "Visa verklig storlek" eller "Show actual size".

• Välj sedan alternativet "storlek", "size", "resize" eller liknande så öppnas rutan för att ändra storlek och upplösning.

• Om du vill behålla bildens proportioner (vilket man ju oftast vill) ska en ruta med det alternativet vara ikryssad. Ändra sedan höjden eller bredden på bilden.

• Ändra värdet på upplösningen till förslagsvis 72 dpi. Klicka OK!

OBS!
Det finns program som är speciellt avsedda för att optimera bilder för webben. Där kan du se direkt hur många kb du tjänar på att sänka bildens kvalitet och styra mer exakt hur du vill ha det.