Afbeeldingen op je webpagina

Presentatie over: "Afbeeldingen op je webpagina"— 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 <img /> 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 5x vergroot: 1px van de tekening neemt 25 pixels van het beeldscherm in 10x vergroot: 1px = 100 beeldschermpixels

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

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

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

11 Hoe minder pixels hoe kleiner
Qua beeldgrootte (op hetzelfde medium) Qua bestandsgrootte (er hoeft minder informatie opgeslagen te worden De beeldgrootte hangt af van het medium: 32 x 24 pixels is groot als de pixels weergegeven worden door kantoorramen 32 x 24 pixels is klein als de pixels weergegeven worden door beeldschermpuntjes 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 KB 100 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 1024 500 px 1280 px

15 Beeldscherm van 800 x 600 500 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 1990
800 pixels in 12 inch 800/12 = 67 pixels per inch Ofwel: Een ppi van 67

18 Resolutie De grootte van het beeldscherm Het aantal beeldpunten
Resolutie hangt van twee dingen af: De grootte van het beeldscherm 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 Je kunt het bestand kleiner maken door de kleurdiepte te verminderen

27 Compressie 200 x 200 24 bits BMP 200 x 200 24 bits JPG Ongecomprimeerd
117 KB 16 KB

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 JPG GIF PNG BMP TIFF Formaat Animatie Compressie
Transparantie Doel JPG Nee Ja, met verlies Foto’s GIF Ja Ja, geen verlies Tekeningen PNG Soms Als Gif BMP Windows TIFF Kan, geen verlies Grafisch werk

30 Tweede conclusie Je kunt het bestand kleiner maken door de kleurdiepte te verminderen 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 KB 100 x 100 pixels = 30 KB

32 Derde conclusie Je kunt het bestand kleiner maken door de kleurdiepte te verminderen Je kunt het bestand kleiner maken door een formaat te kiezen dat het bestand comprimeert 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 Je kunt het bestand kleiner maken door de kleurdiepte te verminderen Je kunt het bestand kleiner maken door een formaat te kiezen dat het bestand comprimeert Je kunt het bestand kleiner maken door het aantal pixels te verminderen (image size aanpassen) 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