Afbeeldingen op je website

Hoe groot moet de afbeelding zijn die ik upload?

Hier kunnen we eigenlijk vrij kort over zijn: Dit wordt bepaald door het “grootste” scherm waarmee de website bekeken wordt. Je wil dat een foto op elk scherm scherp is en niet “opgeschaald”. Een opgeschaalde afbeelding is een afbeelding die groter wordt weergeven dan dat deze eigenlijk is. Dit heeft negatieve gevolgen voor de kwaliteit van de afbeelding.

Het draait hierbij overigens niet om de fysieke grootte van het scherm, maar om de schermresolutie. De schermresolutie is de breedte x hoogte van het scherm in pixels. Des te groter/hoger deze is, des te groter de afbeelding moet zijn om scherp weergegeven te worden. In 2020 zijn schermen met een resolutie van 1920x1080 de standaard. Deze worden door 20,3% van de gebruikers gebruikt. Alleen de resolutie van 2560x1440 (Quad HD) is groter en wordt gebruikt door 1,7% van de gebruikers. En dan zijn er nog de enorme maar amper gebruikte 3840x2160 (4K) schermen.

Een responsive website is al jaren de norm, maar dat betekent wel dat een afbeelding niet altijd op hetzelfde formaat (en dezelfde verhouding) wordt weergegeven. Het is immers geen folder die in een vast formaat afgedrukt wordt. De website moet er zowel op een laptop als een mobiele telefoon goed uit zien. In dit artikel proberen we op een duidelijke manier antwoord te geven op 2 vragen die hierover vaak bij CMS beheerders ontstaan.

Mijn advies zou zijn om te kijken naar de hoogste resolutie die enig aandeel van de markt inneemt. Voor 2020 is dat dus de resolutie van 2560x1440. Hoewel dit nog geen 2% van de gebruikers is, wil je wel dat deze gebruikers ook scherpe afbeeldingen te zien krijgen. Je afbeelding moet in het ideale geval dus minimaal aan dit formaat voldoen. Een alternatief is om afbeeldingen van 1920x1080 te gebruiken, hiermee dek je nog steeds 98% van de markt. Maar laat dit dan wel een bewuste keuze zijn. Op w3schools staat een overzicht per jaar van de meest gebruikte scherm resoluties. Klik op “Other high” voor meer hoge resoluties.

Overigens ga ik er steeds van uit dat de afbeelding gebruikt wordt over de volle breedte van de website. Maar dat is al sneller het geval dan je denkt. Veel mobiele telefoons hebben tegenwoordig ook al een hele hoge resolutie, en daarop worden afbeeldingen vaak over de volle breedte getoond. Het is bovendien de taak van de webdeveloper om de afbeelding in de juiste resolutie te tonen. Upload dus gerust afbeeldingen van 2560x1440. De webdeveloper kan immers altijd de afbeelding verkleinen zonder verlies aan scherpte. Andersom is dat niet het geval.

Waarom zijn sommige afbeeldingen afgesneden?

Afbeeldingen kunnen op meerdere manieren afgebeeld worden. Dit wordt bepaald door het design van de website en de plek waar de afbeelding getoond gaat worden. Het meest simpele voorbeeld hiervan is tussen de tekst. Veel CMS'en maken gebruik van een zogenaamde WYSIWYG (What You See Is What You Get) editor. Hierin kan de CMS beheerder tekst en afbeeldingen toevoegen. Dit werkt erg gelijk aan tekstbewerking programma’s zoals Microsoft Word of Google Docs.

Ratio

Een afbeelding die je via de WYSIWYG editor toevoegt wordt in zijn originele verhouding getoond. De verhouding tussen breedte x hoogte wordt ook ratio genoemd. Een afbeelding van 1600x900 heeft een ratio van 16:9. Voor elke 16 pixels breed is de afbeelding 9 pixels hoog. Verklein je de resolutie van de afbeelding dan blijft de ratio gelijk. De afbeelding van 1600x900 is gehalveerd 800x450 maar heeft nog steeds een ratio van 16:9. De ratio kan ook “omgekeerd” zijn. Een afbeelding van 500 pixels breed en 1000 pixels hoog is 1:2. Voor elke 1 pixel breed is de afbeelding 2 pixels hoog.

Afbeeldingen die via deze weg worden toegevoegd worden dus in hun originele ratio weergegeven.