Welke resolutie moeten foto’s hebben op jouw website?

In dit blog borduur ik verder op mijn blog 'Een beeldbank in 6 stappen'. In dat blog leg ik uit hoe je een beeldbank opzet voor jouw bedrijf. Een onderdeel van het opzetten van een beeldbank is het opslaan van foto's die je krijgt aangeleverd door de fotograaf. Handig is het dan om te weten welke resolutie deze foto's moeten hebben voor het doel van de foto's. Welke resolutie moet een foto bijvoorbeeld hebben die je op je website gebruikt, zonder dat je inlevert op kwaliteit (niet zoals de foto hierboven)?

Wat is resolutie?

Voordat we verder gaan met dit blogartikel, lijkt het me handig om uit te leggen wat resolutie is. De resolutie van een afbeelding wordt vaak uitgedrukt in PPI, wat staat voor Pixels per Inch. Zoals je wellicht al vermoedt: dit gaat over het aantal pixels dat in een inch zitten. Een pixel is een vierkant blokje waar jouw beeldscherm mee is opgebouwd. Hoe meer pixels er in een inch zitten, hoe scherper de foto wordt. Een nadeel is alleen dat hoe meer pixels je in jouw foto stopt, hoe groter de bestandsgrootte wordt.

Laadtijd van jouw website

Een te groot bestand kan op een website problemen geven. Wanneer jij een website bezoekt, wordt de pagina in veel gevallen pas helemaal weergegeven wanneer alle onderdelen van de website geladen zijn. Je kunt je voorstellen dat wanneer jij een foto met een hoge resolutie wilt laden, dit even kan duren. Resultaat: de website wordt traag, want net zoals bij veel dingen ben je zo traag als je zwakste schakel. Dit is iets dat je moet voorkomen, want bezoekers van jouw website zijn ongeduldig (wat een nare mensen zijn het, vind je niet?). Als ze te lang moeten wachten op een pagina, klikken ze weg. Vaak blijven ze vervolgens weg. Zonde als ze nét op die pagina waardevolle content kunnen vinden.

Welke afmeting heb je nodig?

Dus, je hebt foto's laten maken en wilt deze opslaan in jouw beeldbank. Om te bepalen in welke resolutie je de foto's wilt hebben, is het handig om te weten waar je de foto's voor gaat gebruiken. Je hebt hiervoor twee opties: drukwerk of digitaal. Drukwerk heeft namelijk een hogere resolutie nodig dan een beeldscherm. Voor drukwerk wordt overigens niet alleen gesproken over PPI (dat gaat over pixels), maar over DPI (staat voor Dots per Inch). Het idee is hetzelfde, maar dan staat een 'dot' voor een druppel inkt dat op het drukwerk wordt gedrukt. Ik raad altijd aan om foto's op te slaan in de hoogste resolutie, zodat je deze zonder moeite kunt gebruiken voor drukwerk. Deze foto's kun je altijd nog verkleinen zodat je deze ook kunt gebruiken op jouw website. Van groot naar klein is beter dan van klein (lage resolutie) naar groot. Als je een foto gaat vergroten van 72 PPI naar 300 PPI, dan zal je snel merken dat de foto onscherp wordt en dat je blokjes (de pixels) kunt tellen.

Bestandsgrootte vs. scherpte

Als je wilt weten welke afmeting de foto's op jouw website moeten hebben, moet je ook weer kijken waar deze komen op jouw website. Een foto die maar klein naast een tekst wordt afgebeeld hoeft minder 'zwaar' te zijn dan een foto die gebruikt wordt als header bovenaan de pagina. Bij een headerfoto houd ik vaak 1920 pixels aan voor de breedte en zorg dat deze niet meer dan 500 kb is. Voor overige foto's 1200 pixels en maximaal 300 kb. Door de meeste internetverbindingen is dit prima te laden en lever je zo weinig mogelijk in op de scherpte van jouw foto's.

JPEG of PNG?

Als je weet hoe groot de afbeelding moet zijn, is het ook nog handig om te weten welk bestandsformaat je moet gebruiken. Ook dit hangt weer af van het doel van de foto. Over het algemeen is JPEG een 'lichter' bestand als je dit vergelijkt met PNG. Daarom kies ik altijd voor JPEG, met een paar uitzonderingen. Het kan namelijk zijn dat het gaat om een vrijstaande afbeelding. Dit betekent dat de achtergrond transparant moet zijn. Denk daarbij aan productfotografie. Bij productfotografie wordt het product dan 'uitgeknipt' zodat je het eenvoudig over een andere achtergrond kunt plaatsen. Een transparante achtergrond is alleen mogelijk bij een PNG, want bij een JPEG wordt de achtergrond altijd gevuld als je deze opslaat. In een paar andere gevallen is (door bijvoorbeeld software die gebruikt wordt) PNG vereist, omdat deze beter schaalbaar is.

Hoe wil jij de foto's aangeleverd krijgen?

Omdat de ene website de andere niet is, is het handig om bij mij aan te geven welke afmeting jouw foto's moeten hebben als je die bij mij laat maken. Ik lever vaak de foto's aan in een zo hoog mogelijke resolutie, maar lever ze ook aan in lagere resolutie. Deze foto's hebben dan de afmeting 1920x1280. Wil je een ander formaat? Geen probleem. Dit is voor mij vaak één druk op de knop en scheelt jou werk!


Neem contact met mij op