Afbeeldingen op je webpagina Formaten, kleurdiepte, resolutie

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

Afbeeldingen bestaan uit pixels Pixel: beeldpunt met kleurinformatie

Kerstboom (1)

Kerstboom (2) 32 x 24 pixels

Kerstboom (3) 32 x 24 = 768 pixels

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

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

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

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

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

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

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)

Beeldscherm van 1280 x 1024 500 px 1280 px

Beeldscherm van 800 x 600 500 px 800 px

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

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

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

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

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

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

Kleurdiepte

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%

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

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

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

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

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!)

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

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

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

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)

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

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)

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

Dit was een presentatie van pc-coach