Afbeeldingen op je webpagina

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= 250.000 pixels Per pixel 3 bytes (RGB) 250.000 x 3 = 750.000 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 • Resolutie hangt van twee dingen af: • De grootte van het beeldscherm • Het aantalbeeldpunten • Evenveel beeldschermpixels maar groter beeldscherm: vager beeld • Evenveel beeldschermpixels maar kleiner beeldscherm: scherper beeld • Even groot beeldscherm maar meerbeeldschermpixels: scherper beeld • Even groot beeldscherm maar minderbeeldschermpixels: vager beeld

19. Kwaliteit • Kwaliteit van het scherm hangt af van de grootte van de beeldpunten • Grotebeeldschermpixels in een klein beeldscherm: slecht beeld • Kleinebeeldschermpixels 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 700en 800pixels voor je pagina

22. Kleurdiepte

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

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

25. Afbeelding: 200 x 200 pixels • Kleurdiepte 1 bit • = 1/8 byte • 2 kleuren • 40.000 pixels = 5.000 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 Gecomprimeerd 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

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 aantalpixels te verminderen (image sizeaanpassen)

33. ‘Canvas’ kleiner maken (bijsnijden) Niet bijgesneden (500x500) Bijgesneden (ongeveer 400x400) 732vs468 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