Foto’s opslaan voor online? Dit zijn veelgemaakte fouten

Wanneer je meer met je foto’s wil doen, komt wat technische kennis goed van pas. Foto’s opslaan voor online vraagt bijvoorbeeld om andere aandachtspunten dan foto’s optimaliseren voor drukwerk. Het is dan ook niet gek dat er nog vaak misverstanden zijn en fouten worden gemaakt. Lees snel verder om te kijken of jij deze foutjes ook maakt!

Zoals je misschien weet ben ik afgestudeerd als grafisch ontwerper. Daarnaast heb ik ook 9 jaar als grafisch ontwerper bij een reclamebureau gewerkt. Ik kan dus wel zeggen dat ik behoorlijk wat kennis heb op dit gebied. Maar waar grafisch ontwerp voor een groot gedeelte met drukwerk te maken heeft, is het vormgeven voor online een totaal andere wereld. Van CMYK naar RGB, van centimeters naar pixels en van vaste afmetingen van je pagina tot een responsive design. Het is dus goed om op de hoogte te zijn van de mogelijkheden voor iedere uiting die je maakt. Gelukkig zijn er genoeg goede workshops en cursussen om je grafische skills op bepaalde vlakken te verbreden.

Wanneer je je foto’s wilt opslaan voor verschillende doeleinden komt er een hoop bij kijken. Welk bestandstype gebruik je en waarom? Hoe maak je het aantal kb’s van een foto kleiner zonder kwaliteit te verliezen? Hoe moet je de DPI instellen voor drukwerk? Best ingewikkeld dus! Hieronder vind je drie veelgemaakte fouten wanneer je foto’s gaat opslaan voor online. Doe er dus je voordeel mee!

Foto’s opslaan voor online

Zonder dat je het doorhebt, kun je technische fouten maken bij het plaatsen van foto’s online. Of dat nu voor je website, Facebook- of Instagrampagina is. En het kan gebeuren bij de meeste webplatforms zoals WordPress of Joomla. De gevolgen kunnen bijvoorbeeld zijn: minder scherpe foto’s of foto’s met te weinig kleuren. Maar ook zijn de foto’s qua bestandsomvang vaak te groot waardoor de laadtijd van je webpagina de rode lijn passeert.

Sla foto’s niet op in het PNG-formaat

Fotografen zijn bang voor kwaliteitsverlies door JPEG. Daarom kiezen zij voor het PNG-formaat. Wat de meesten niet weten is dat PNG twee versies heeft en dat beide versies om verschillende redenen niet heel geschikt zijn om foto’s voor het web op te slaan! Bij het PNG-8 formaat wordt het aantal kleuren drastisch verlaagd tot 256. Dat is net zo weinig als het GIF-formaat toelaat. Veel te weinig voor kleurrijke foto’s.

Er bestaat ook een PNG-24 variant. Hiermee kunnen weliswaar veel meer kleuren worden weergegeven, maar ook een keuze voor PNG-24 is niet goed voor foto’s op het web. De bestanden in PNG-24 formaat zijn namelijk veel te omvangrijk (vaak in Megabytes). Dit heeft langzaam ladende pagina’s tot gevolg, zeker als je meer dan één foto in dit formaat op je webpagina plaatst.

Oplossing: sla foto’s als JPEG op en bepaal zelf de kwaliteit ervan. Een foto in hogere kwaliteit JPEG leidt tot een groter bestand (in kilobytes) maar is nog altijd vele malen kleiner (in kilobytes) dan een foto opgeslagen in het PNG-24 formaat. Dus let wel: het gaat hier niet om het aantal pixels, maar om de bestandsgrootte in kilobytes. Vanaf een redelijke kwaliteit JPEG (plusminus kwaliteit 40) zal niemand online het verschil merken. Bij onderstaande foto mag je zelf nagaan of je verschil merkt.

Beeldpixels hebben geen afmetingen

Wat ook vaak fout gaat, is het omrekenen van beeldpixels naar centimeters. Dat is namelijk niet mogelijk omdat beeldpixels zelf geen afmetingen hebben! Dus een foto van 1500 x 1000 pixels kan niet worden vertaald naar bijvoorbeeld 15 bij 10 centimeter. Diezelfde foto van 1500 x 1000 pixels kan 1 cm breed worden geprint of 15 centimeter of 10 meter breed, het maakt niet uit: de foto zal altijd 1500 x 1000 pixels bevatten. Er is hier een duidelijk verschil tussen monitoren en drukwerk.

Het is voor heel veel mensen lastig voor te stellen wat een beeldpixel eigenlijk is, namelijk een vierkant blokje van een bepaalde kleur, maar zonder maat. De maat (in millimeters of centimeters) wordt pas bepaald door het instellen van de resolutie. Dit is het aantal pixels (of dots) per inch (1 inch = 2,54 cm). Bij de voor drukwerk veel gebruikte resolutie van 300 dpi (dots per inch) zullen de dots dus 1/300 inch (± 0,085 mm) zijn. Hoewel 300 dots per inch (de dots in drukwerk) niet exact hetzelfde is als 300 pixels per inch, mag je 300 dpi wel vervangen door 300 ppi (pixels per inch). De eerder genoemde foto van 1500 x 1000 pixels zal bij een resolutie van 300 ppi dus 12,75 cm x 8,5 cm worden afgedrukt.

Er bestaat nog een andere reden waarom beeldpixels worden verward met monitorpixels. Zoals gezegd hebben beeldpixels geen afmeting, maar monitorpixels wèl. En deze afmeting van monitorpixels is afhankelijk van de specifieke monitor. De modernste monitoren bevatten 325 monitorpixels op elke inch, maar vroeger waren de monitoren uitgerust met 72 monitorpixels per inch. Hier komt ook het misverstand vandaan dat foto’s voor het web een resolutie hebben of moeten hebben van 72 ppi. Dat is onjuist. Sla maar eens een foto van 1500 x 1000 pixels op voor het web in twee verschillende resoluties: het resultaat zal precies hetzelfde zijn. Beide versies worden even groot op je webpagina getoond omdat beide versies 1500 x 1000 pixels bevatten. Van de ingestelde resolutie trekt een browser zich niets aan.

Tip: Een bepaalde beeldresolutie is van belang bij drukwerk, niet bij foto’s online.

RGB staat voor Rood, groen en blauw, niet voor rood, geel en blauw

Al in de tijd van Rembrandt mengden kunstenaars rode, gele en blauwe verfsoorten om tot andere kleuren te komen. Vanaf die tijd heerst onder schilders de mening dat rood, geel en blauw de primaire kleuren vormen. En door menging ontstaan dan andere kleuren worden. Ook kleurtheoreticus Itten vond dat de kleuren rood, geel en blauw de psychologisch belangrijkste kleuren waren. In psychologisch opzicht kan dat best kloppen, maar natuurkundig klopt het zeker niet!

Wetenschappers kwamen tot andere conclusies. Zo bleken cyaan, magenta en geel als primaire kleuren veel beter om te mengen (eventueel aangevuld met zwart). Vandaar dat cyaan, magenta, geel en zwart de belangrijkste inkten zijn voor drukkers. Afgedrukte full-color foto’s zijn te herleiden tot deze vier drukkleuren. Neem er maar eens een loep bij.

Maar de wetenschappers ontdekten ook andere natuurkundige wetten met betrekking tot kleuren: Apparaten zoals monitoren, je smartphone of televisie werken ook met drie primaire kleuren, maar dat blijken rood, groen en blauw te zijn! Op oude televisies kun je dat van dichtbij nog met een loep zelf vaststellen. Alle kleuren die je via bovengenoemde apparaten ziet, zijn een menging van de drie kleuren rood, groen en blauw. Zo is wit de menging van vol rood, vol groen en vol blauw.

Tip: Wil je meer weten over werken met rood, groen en blauw en aanpassingen in Photoshop? Download dan het gratis Photoshop-boek van Grafische Cursussen.

Beeldbewerkingsprogramma’s als Photoshop en Lightroom zijn hier op gebaseerd. Dus als je de juiste kennis hebt van de primaire kleuren, wordt het veel makkelijker om kleurcorrecties uit te voeren of te begrijpen wat er bij beeldbewerking gebeurt. Zo bekeken is beeldbewerking en het online plaatsen van foto’s best een technische aangelegenheid. En hoe meer je hiervan weet, hoe beter je eindresultaten zullen zijn.

Deze blogpost is gemaakt in samenwerking met Angelo Spiler (Grafische Cursussen)