Beelden voor websites: insider tips

Op door Gert Dedeyne

Beelden zijn een ideaal middel om de aandacht te trekken van je bezoeker. Het juiste beeld zorgt ervoor dat je boodschap veel beter overkomt. Maar wat is het juiste beeld? En waar moet je rekening mee houden als je het beeld klaarmaakt voor gebruik? Designer Gert geeft je de nodige achtergrondinformatie, mét bijhorende tips. 

Kies het juiste bestandsformaat

JPEG en PNG zijn de meest gebruikte bestandstypes voor websites. Met het blote oog zie je geen verschil, maar het is wel belangrijk om het juiste type te kiezen voor elke situatie.

Het JPEG-formaat is vooral geschikt voor afbeeldingen met veel kleine details en kleuren zoals foto’s. Om beelden optimaal te kunnen bewaren wordt een compressie toegepast zodat het bestand zo klein mogelijk wordt. Standaard zorgt die compressie voor kwaliteitsverlies, wat niet opvalt in het eindresultaat van de bewaarde foto. Of de compressie niet te hoog is, moet je beeld per beeld evalueren. 

PNG’s hebben een beperkte compressie, waardoor geen kwaliteit verloren gaat. Vooral lijnen en vlakken worden scherp weergegeven, wat optimaal is voor logo’s, illustraties en grafieken. Hou er rekening mee dat een PNG-bestand al snel vier keer groter is dan een JPEG-file.

Afmeting en resolutie

Elk beeld is opgebouwd uit pixels. Een pixel is het kleinste deel van een scherm dat een bepaalde kleur kan aannemen. Vanop een afstand zijn de individuele pixels niet zichtbaar, maar vormen ze één groot beeld. Pixels hebben geen vaste grootte. De resolutie van het scherm waarop je een afbeelding bekijkt, bepaalt de grootte van dat beeld. Beeldschermen met een hoge resolutie (zoals retinaschermen) tonen meer pixels op een kleinere oppervlakte. Dat betekent dat eenzelfde afbeelding op een retinascherm kleiner zal worden weergegeven dan op een gewoon scherm met lagere resolutie. 

Bestandsgrootte

De bestandsgrootte is het ‘gewicht’ van de foto en wordt uitgedrukt in Kb (kilobytes) of Mb (megabytes). De combinatie van afmeting en resolutie bepalen de bestandsgrootte. Op het web is het belangrijk om een goede balans te vinden tussen de afmetingen, resolutie en kwaliteit van een beeld. Enorm grote beelden laden traag in en verlagen de snelheid van een website. Dat is niet alleen vervelend voor bezoekers, maar kan zelfs leiden tot een lagere ranking in zoekmachines. Steeds meer bezoekers gebruiken een mobiel toestel, waardoor snelheid veruit de belangrijkste factor vormt voor deze doelgroep.

Verhoudingen en stijl

Afbeeldingen zijn een deel van het design en bepalen dan ook de sfeer en stijl van de website. Door alle beelden in dezelfde verhoudingen te gieten, creëer je een strak afgelijnde lay-out en het gevoel dat alles een samenhangend geheel vormt. 

De juiste proporties worden tijdens het design bepaald. Dit kan bijvoorbeeld een 16:9 verhouding zijn voor alle grote beelden en een 4:3 verhouding voor alle productshots. Door deze informatie in een duidelijk overzicht te gieten, kan er rekening mee gehouden worden bij het maken van de beelden. 

Hou rekening met SEO

Om het jezelf makkelijk te maken, geef je je afbeelding best een duidelijke (bestands)naam. Zo kan je het beeld snel terugvinden in de mediamanager. Om ook visueel beperkte mensen en zoekmachines toegang te geven tot visuele elementen, is er ook een alt tag nodig. Hierin omschrijf je kort en duidelijk wat er op het beeld te zien is. 

Tips op een rijtje

  1. Gebruik het JPEG-formaat voor foto’s en het PNG-formaat voor logo’s, grafieken of illustraties. 
  2. Zorg voor voldoende grote afbeeldingen, zonder te overdrijven. 
  3. Wees consequent en gebruik vaste verhoudingen en dezelfde stijl.