Wij bouwen regelmatig websites met een zogenaamd CMS (Content Management System). Bij het beheren van de content spelen naast de tekst ook afbeeldingen een grote rol en het toevoegen van afbeeldingen is niet altijd even simpel als het lijkt. 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.

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.

#0

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.

#0

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 https://www.w3schools.com/browsers/browsers_display.asp 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.

#0

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

Cropping

Anders wordt het als de CMS beheerder ook afbeeldingen kan toevoegen die in een andere ratio worden weergegeven dan ze worden geupload. Denk hierbij bijvoorbeeld aan een grote afbeelding die bovenaan de website over de volle breedte wordt getoond. Deze afbeeldingen hebben vaak een vaste hoogte. Dit is waar cropping ontstaat.

Stel de CMS beheerder upload een afbeelding van 1920x1080 (ratio 16:9) maar de webdeveloper heeft ervoor gekozen de afbeelding maximaal 600 pixels hoog te tonen. Omdat de afbeelding wel 1920 pixels breed blijft maar nu slechts 600 pixels hoog is valt de ratio terug naar 16:5 en dat houdt in dat er in de afbeelding gesneden moet worden. Dit snijden noemen we ook wel croppen. Je snijdt een stuk van de afbeelding af om de ratio te veranderen. In dit geval zal er iets van de hoogte af moeten. Dit kan aan zowel de bovenkant als de onderkant.

#0

Het snijden van een afbeelding heeft een groot nadeel: Het kan zijn dat juist het belangrijkste onderdeel van de afbeelding wordt afgesneden. Een aantal afbeeldingen zijn om die reden voor croppen slecht tot niet geschikt. Voorbeelden hiervan zijn:

  • Afbeeldingen met tekst
  • Diagrammen
  • Infographic
  • Groepsfotos
  • Productfotos
  • Focus cropping

Een gedeeltelijke oplossing voor dit probleem is om de CMS beheerder te laten selecteren waar het onderwerp zich in de afbeelding bevindt. Er wordt dan zoveel mogelijk vanuit het onderwerp gesneden. Dit kan in sommige gevallen de oplossing zijn, maar het is geen magie. Hou hier dus rekening mee bij het kiezen van je afbeelding.

#0

Responsive afbeeldingen

Op een responsive website wordt 1 afbeelding op meerdere apparaten (met elk hun eigen schermresolutie) weergegeven. Bovendien wordt een website op een telefoon vaak in verticale stand (portretstand) bekeken in plaats van horizontaal (landschap). Bij afbeeldingen die een vaste hoogte hebben zal er dan eerder aan de zijkant van de afbeelding gesneden worden in plaats van de bovenkant en/of onderkant. Ook hier biedt focus cropping vaak een uitkomst maar ook hier geldt weer dat het geen magie is.

#0

Tekst op afbeeldingen

In sommige gevallen kan vanuit het CMS tekst op de afbeelding getoond worden. Dit is wat anders dan tekst in de afbeelding. Tekst in de afbeelding maakt onderdeel uit van de afbeelding en zal meeschalen op basis van de afbeelding zelf (of gecropped worden). Tekst op de afbeelding is een eigen element, kan apart geschaald worden en wordt niet gecropped. Maar dezelfde tekst neemt naar verhouding op een desktop veel minder ruimte in beslag dan op een mobiele telefoon. En dat terwijl de afbeelding wel kleiner wordt. In dat geval kan de tekst dus meer ruimte nodig hebben dan de afbeelding te bieden heeft, en zal de tekst uit de afbeelding lopen. Om ervoor te zorgen dat de tekst passend blijft zal de afbeelding daarom meegeschaald worden. Dit zorgt weer voor cropping, maar dat is altijd nog beter dan tekst die eruit loopt. Het is daarom eigenlijk aan de CMS beheerder om zorg te dragen voor de hoeveelheid tekst die op de afbeelding geplaatst wordt.

#0

Samenvatting

Het altijd correct tonen van een afbeelding is dus niet altijd mogelijk, en zelfs niet wenselijk. Denk daarom aan de volgende zaken bij het kiezen van een afbeelding voor je website:

  • Upload afbeeldingen die minimaal zo groot zijn als ze getoond worden
  • Gebruik waar gecropped wordt alleen afbeeldingen die daarvoor geschikt zijn
  • Zet niet teveel tekst op een afbeelding als dat via het CMS mogelijk is

Ook ervaring speelt een rol, en na verloop van tijd zal het veel minder vaak voorkomen dat je onaangenaam verrast wordt door een afbeelding die ongeschikt blijkt voor je website.

Nawoord

Naast mijn werk als front-end webdeveloper ben ik ook hobbyfotograaf. Ik begrijp dus heel goed dat het voor fotografen belangrijk is dat de foto die op de website staat hun visie representeert. De juiste crop en uitlijning van het onderwerp kan enorm belangrijk zijn. Als er dan onverwacht en ongewenst gecropped wordt in een foto kan dat teleurstellend zijn.

Over mij

Ik ben sinds oktober 2005 als front-end developer werkzaam bij de Webmen. Ik heb mij heel erg gespecialiseerd in HTML en CSS maar kom ook uit de voeten met JS. In 2020 heb ik ook een gedeeltelijke rol als Product Owner op mij genomen.