pixel- och vectorgrafik

1. Vad är en digital bild?
Pixelgrafik
Vectorgrafik

2. Inom webbdesign arbetar man
främst med bitmappsbilder.
En bitmappsbild är uppbyggd,
liksom mosaik, av små
kvadratiska delar som kallas
pixlar.
Varje pixel innehåller viktig
information om färg- och
ljushetsvärden som t.ex.
Adobe Photoshop använder
sig av när man redigerar och
bearbetar bilden.
Vektor – Matematiska formler
Bitmap – Array av pixlar

3. Bitmap
• Består av hundratals
rader och kolumner
med pixlar i
• Bilden är förstorad
250%
• Antalet pixlar du skall
använda beror på
användningsområdet
Bitmapbilder benämns också som rastergrafik

4. Lagring av en bitmap
• Information om varje
pixel måste sparas
• I varje ruta beskrivs
färgen på den pixeln
• Tar väldigt stor plats

5. Pixlar
Kom ihåg:
Storleksökning medför
lägre bildkvalitet!

6. Smileyansiktet består av
rastergrafik. När den förstoras
blir varje bildpunkt en stora
fyrkant. Om man förstorar
ytterligare kan de analyseras,
eftersom varje bildpunkt har
värden för de tre nyanserna röd,
grön och blå.

7. Upplösning...
•
Ett mått på antal bildpunkter per ytenhet
•
Är olika för olika mediabärare – utskrift eller bildskärm
•
Anges som dpi – dot per inch – punkter per tum
•
Kvalitetstryck och utskrift av foton – normalt ca 300 dpi
•
Bildskärmar - 96 dpi
… är nått annat än storlek
•
Ett mått på bildens yta – längd x bredd
•
Bildstorlek på ett A4 är 21 x 29,7 cm
•
Passfoto är 4 x 5 cm
•
Bildskärm kan vara 1024 x 769 till 1920 x 1200 bildpunkter
(pixels)
Bilder som siffror
När man anger storlek på
bilder på webben, mäter
man dem i de antal pixlar
de har på bredden och
höjden. En bilds
dimensioner (bredd och
höjd) kan t.ex. sägas vara
”300 x 230 pixlar”.

8. JPEG kompression
Mer kompression
Att komprimera
innebär att
filstorleken minskar,
på bekostnad av att
viss färginformation
går förlorad.

9. • Okomprimerade bilder har
hög kvalitet men tar stor
plats.
• Applikationen styr
storleken, t.ex. webb där
bilder skall laddas ner
föredras små bilder.
Trycksaker -> hög
upplösning

10. JPEG
•
Vanligaste formatet
•
För bitmapbilder (uppbyggda av bildpunkter,
pixlar)
•
”Förstörande” komprimering
•
Spara ALLTID med nytt namn så originalet inte
förstörs
•
Genomskinliga partier blir vita
TIFF
•
För bitmapbilder
•
Mindre ”förstörande” komprimering
Bildformat
PNG
Mycket vanligt format
För både bitmap- (pixlar) och vektorbilder
(uppbyggda av ytor)
Mindre ”förstörande” komprimering av
vektorbilder
Behåller genomskinlighet

12. Vektorgrafik
• Använder matematiska formler för att lagra vilka
figurer som bilden innehåller
• Sparar minimalt med information om figuren
med hjälp av Bezier kurvor

13. Vektorgrafik
• skala vektorgrafik upp
eller ner hur mycket som
helst utan att bilden blir
suddig eller tar större
plats.
• Mindre filstorlekar
• Tunna linjer kan
försvinna när en bil
skalas ner för mycket
• Små fel blir synliga vid
förstoring
I princip alla datorsystem visar rastergrafik på skärmen. En vektorbild konverteras av
grafikkortet till en rasterbild innan den visas på skärmen, och hela skärmen ritas om
många gånger i sekunden.

14. Vad sa jag nu då...
Vad är en bitmapbild?
Fördelar?
JPG- Vad innebär att bilden komprimeras?
PNG
TIFF
Vad är en vectorbild?
Fördelar?