Het ideale formaat foto op een website
Foto’s zeggen meer dan woorden en geven een website beleving. Door relevante foto’s te plaatsen wordt het verhaal duidelijker en leest een pagina prettiger. Bestandsgrootte van de foto’s op de website moeten zo klein mogelijk worden gehouden, zodat dit geen invloed heeft op de laadtijd van de pagina, maar je wil natuurlijk wel een goede kwaliteit foto voor de beste kijkervaring, zowel op de mobiele telefoon als op de desktop of laptop.
Op welk apparaat wordt de website het meest bezocht?
In de statistieken van een website kun je zien welk scherm de bezoekers het meest gebruiken. Dit is je standaardscherm. Kijk vervolgens naar de schermresolutie in het aantal pixels.
Wat is een pixel?
De afmetingen van beeldbestanden worden gemeten in pixels.
Alles wat te zien is op een scherm is opgebouwd uit pixels. Een pixel is één gekleurd puntje op een scherm. Een afbeelding bestaat uit een combinatie van meerdere pixels. Het aantal pixels bepaalt de resolutie van het scherm. Hoe groter de dichtheid van de pixels, hoe scherper het beeld.
Voorbeeld: Onderstaande lijn is 100 pixels breed en 5 pixels hoog:
Bestandsgrootte van de afbeelding
De bestandsgrootte wordt gemeten in Kb ’s of Mb’s.
Op de website wil je de bestandsgrootte zo klein mogelijk houden, maar wel met de beste kwaliteit. Je optimaliseert afbeeldingen voor grote monitoren, en als de website goed is gebouwd zal de browser de foto’s aanpassen aan de resolutie van de kleinere schermen.
Afbeeldingen laten vergroten door de webbrowser wordt niet mooi
Als de foto’s kleiner zijn dan het beeldscherm kan de browser deze niet meer groter maken en kan een beeld pixelachtig en onscherp worden.
Voorbeeld: Een headerbeeld is een foto bovenaan de website. Bij afbeelding op volledige breedte van het scherm zul je bij een scherm van 1920 pixels de foto ook 1920 pixels breed moeten maken. Is de foto kleiner, bijvoorbeeld 1600 pixels, dan zal de browser het beeld op 120% van de resolutie weergeven en wordt deze onscherp.
Vaak zijn foto’s veel te groot.
Bestandsgrootte van foto’s voor een website hoeven niet groter te zijn dan 500kB!
Als je een foto maakt op je telefoon kan deze al snel 2MB of meer zijn. Je zult ze dan dus moeten verkleinen of vragen aan de fotograaf om de afbeelding in het juiste pixelformaat aan te leveren. Doe je dit niet, dan kun je vaak de afbeelding niet toevoegen in het beheersysteem van de website en/of de pagina zal langzaam gaan laden.
Hoe weet je de bestandsgrootte van een afbeelding?
Als je op je computer naar de afbeelding toe gaat, klik je op de rechtermuisknop en dan de optie [eigenschappen]. Achter [Grootte] zie je hoeveel kB/Mb je afbeelding is. Het gaat dan om de bestandsgrootte.
Je kunt de afmeting van de afbeeldingen verkleinen zonder dat je de resolutie aanpast, en de kwaliteit op het beeldscherm verliest. Dit kan in fotoprogramma’s, maar je hebt ook online foto re-sizers waar je de grootte van de afbeelding kunt aanpassen.
Het mooiste wordt het als je de afbeelding verkleint naar het exacte aantal pixels die een afbeelding moet zijn op de website. Een aantal websites met resize tools:
- https://express.adobe.com/nl-NL/tools/image-resize
- https://www.iloveimg.com/
- https://imagecompressor.com/nl/
DPI – Dots Per Inch = resolutie
Voor een beeldscherm is de resolutie 72DPI genoeg voor een afbeelding
DPI betekent Dots Per Inch. Hoe hoger de DPI hoe zwaarder de afbeelding. Wanneer je een afbeelding gaat gebruiken voor drukwerk, heb je minimaal 300DPI nodig.
JPG is de beste keuze voor een afbeelding op de website
Wanneer je een foto van de fotograaf krijgt, kan het zijn dat deze in een RAW-bestand wordt aangeleverd. De website kan dit niet lezen en het bestand is veel te groot. Een afbeelding kun je het beste comprimeren (verkleinen in data), met JPG.
Transparantie of lijnen in een afbeelding? Dan PNG
Als je een afbeelding hebt met tekst, lijnen of een tekening, kun je deze het beste opslaan als PNG, anders kan het zijn dat je kwaliteit verliest en de afbeelding onscherp wordt.
Ook als de afbeelding een transparante achtergrond heeft, zul je de afbeelding als PNG moeten opslaan om de transparantie te behouden. Een PNG is 4x zo groot als een JPG in het aantal bytes, dus voor een website is JPG het beste wanneer dat kan.
