De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

AFBEELDINGEN OP JE WEBPAGINA Formaten, kleurdiepte, resolutie.

Verwante presentaties


Presentatie over: "AFBEELDINGEN OP JE WEBPAGINA Formaten, kleurdiepte, resolutie."— Transcript van de presentatie:

1 AFBEELDINGEN OP JE WEBPAGINA Formaten, kleurdiepte, resolutie

2 Afbeeldingen zijn afbeeldingen  Een webpagina bevat geen afbeeldingen  Een webpagina bevat verwijzingen naar afbeeldingen  De verwijzingen werken via de tag  De afbeeldingen worden door de browser apart opgehaald  Afbeeldingen horen zo klein mogelijk te zijn wat aantal bytes betreft

3 Afbeeldingen bestaan uit pixels  Pixel: beeldpunt met kleurinformatie

4 Kerstboom (1)

5 Kerstboom (2) 32 x 24 pixels

6 Kerstboom (3) 32 x 24 = 768 pixels

7 Kerstboom (4) Op beeldscherm: Ware grootte (32 x 24) 1 pixel van de tekening neemt 1 pixel van het beeldscherm in 10x vergroot: 1px = 100 beeldschermpixels 5x vergroot: 1px van de tekening neemt 25 pixels van het beeldscherm in

8 Op ‘ware’ grootte 500 x 500 pixels100 x 100 pixels

9 In- en uitzoomen (vergroten/verkleinen) 100 x 100 vergroot tot 500 x x 500 verkleind tot 100 x 100

10 Vervormen 500 x 500 wordt 500 x x 500 wordt 150 x 500

11 Hoe minder pixels hoe kleiner 1. Qua beeldgrootte (op hetzelfde medium) 2. Qua bestandsgrootte (er hoeft minder informatie opgeslagen te worden 3. De beeldgrootte hangt af van het medium: x 24 pixels is groot als de pixels weergegeven worden door kantoorramen x 24 pixels is klein als de pixels weergegeven worden door beeldschermpuntjes 3. En nog veel kleiner als de pixels worden weergegeven door inkjet-printer inktpuntjes

12 Hoe minder pixels hoe kleiner qua bestandsgrootte 500 x 500 BMP : 732 KB100 x 100 BMP : 30 KB 500 x 500= pixels Per pixel 3 bytes (RGB) x 3 = bytes En dat is 732 KB

13 Pixels?  Een informatie-eenheid van 1-en en 0-en in een (raster)afbeelding, zoals foto (hebben geen fysieke grootte)  Beeldpunten (transistors) op een beeldscherm (hebben een fysieke grootte)  Beeldpunten in de sensor van je digitale camera (hebben een fysieke grootte)

14 Beeldscherm van 1280 x px 1280 px

15 Beeldscherm van 800 x px 800 px

16 Resolutie van een 17” monitor 1280 pixels in 13,4 inch 1280/13,4 = 95 pixels per inch Ofwel: Een ppi van 95

17 Resolutie van 15” monitor uit pixels in 12 inch 800/12 = 67 pixels per inch Ofwel: Een ppi van 67

18 Resolutie  Resolutie hangt van twee dingen af: 1. De grootte van het beeldscherm 2. Het aantal beeldpunten  Evenveel beeldschermpixels maar groter beeldscherm: vager beeld  Evenveel beeldschermpixels maar kleiner beeldscherm: scherper beeld  Even groot beeldscherm maar meer beeldschermpixels: scherper beeld  Even groot beeldscherm maar minder beeldschermpixels: vager beeld

19 Kwaliteit  Kwaliteit van het scherm hangt af van de grootte van de beeldpunten  Grote beeldschermpixels in een klein beeldscherm: slecht beeld  Kleine beeldschermpixels in een groot beeldscherm: subliem beeld

20 Pixels en dots (uitweiding)  Dots zijn beeldpunten die een printer maakt  Printers kunnen 1 (foto) pixel soms in meer of minder dan één dot weergeven.  Bij printers spreek je van dpi (dots per inch)  Een printer die een afbeelding van 500 x 500 pixels afdruk met 600dpi, maakt een afbeelding van ongeveer 2 x 2cm.  Dat is dus een stuk kleiner dan op het scherm

21 Het beeldscherm van je bezoeker  Grootte en resolutie weet je niet.  Er gaat ruimte af voor schuifbalken en favorietenbalk  Venster staat niet helemaal open  Er is misschien voor een groter lettertype gekozen Vuistregel: ga uit van een werkbare breedte tussen 700 en 800 pixels voor je pagina

22 Kleurdiepte

23 Afbeelding: 200 x 200 pixels  Kleurdiepte 24 bits  = 3 bytes (RGB)  1,6 miljoen kleuren  pixels = bytes = 117 KB Vergroot 300%

24 Afbeelding: 200 x 200 pixels  Kleurdiepte 4 bits  = halve byte  16 kleuren  pixels = bytes = 19,6 KB Vergroot 300%

25 Afbeelding: 200 x 200 pixels  Kleurdiepte 1 bit  = 1/8 byte  2 kleuren  pixels = bytes = 4,9 KB

26 Eerste conclusie 1. Je kunt het bestand kleiner maken door de kleurdiepte te verminderen

27 Compressie 200 x bits BMP200 x bits JPG 117 KB16 KB OngecomprimeerdGecomprimeerd

28 Compressie is kwaliteitsverlies  Maar is niet echt zichtbaar op webpagina  Wel zichtbaar als je afdrukt  Je kunt de mate van kwaliteitsverlies instellen  Het oorspronkelijk aantal pixels wordt als het ware terugberekend (de kleurdiepte verandert niet!)

29 Afbeeldingsformaten FormaatAnimatieCompressieTransparantieDoel JPG NeeJa, met verliesNeeFoto’s GIF JaJa, geen verliesJaTekeningen PNG NeeJa, geen verliesSomsAls Gif BMP Nee Windows TIFF NeeKan, geen verliesNeeGrafisch werk

30 Tweede conclusie 1. Je kunt het bestand kleiner maken door de kleurdiepte te verminderen 2. Je kunt het bestand kleiner maken door een formaat te kiezen dat het bestand comprimeert

31 Nogmaals op ware grootte 500 x 500 pixels = 732 KB100 x 100 pixels = 30 KB

32 Derde conclusie 1. Je kunt het bestand kleiner maken door de kleurdiepte te verminderen 2. Je kunt het bestand kleiner maken door een formaat te kiezen dat het bestand comprimeert 3. Je kunt het bestand kleiner maken door het aantal pixels te verminderen (image size aanpassen)

33 ‘Canvas’ kleiner maken (bijsnijden) Niet bijgesneden (500x500)Bijgesneden (ongeveer 400x400) 732 vs 468 KB

34 Vierde conclusie 1. Je kunt het bestand kleiner maken door de kleurdiepte te verminderen 2. Je kunt het bestand kleiner maken door een formaat te kiezen dat het bestand comprimeert 3. Je kunt het bestand kleiner maken door het aantal pixels te verminderen (image size aanpassen) 4. Je kunt het bestand kleiner maken door bij te snijden (canvas kleiner maken / crop)

35 Aanbevelingen  Stel het juiste aantal pixels in  Snij bij: gebruik close-ups  Zet kleine afbeeldingen in de tekst  Bij tekeningen is 16 kleuren vaak genoeg  Gebruik nooit grotere kleurdiepte dan 24 bits  Stel JPG-kwaliteit zuinig in (experimenteer)  Gebruik de combinatie van bovenstaande technieken  Maak illustraties niet groter dan 100KB

36 Dit was een presentatie van pc-coach


Download ppt "AFBEELDINGEN OP JE WEBPAGINA Formaten, kleurdiepte, resolutie."

Verwante presentaties


Ads door Google