Basisbegrippen fotogebruik op je website

Om je afbeeldingen netjes op een pagina te krijgen, moet je rekening houden met enkele basisbegrippen.

Basisbegrippen afbeeldingen en illustraties

• Beeldverhouding
  De verhouding tussen de hoogte en breedte van je scherm. De meeste schermen zijn 16:9 of 4:3. Je afbeeldingen in Divi ook.
• Bestandsgrootte
  Het gewicht van een foto, uitgedrukt in kilobytes (Kb) of megabytes (Mb). Een afbeelding met een bepaalde hoogte en breedte weegt een bepaald aantal Kb.
• Pixel
  Een digitale afbeelding wordt ‘gemaakt’ door een hoeveelheid stippen, ookwel beeldpunten of pixels genoemd. Een pixel is een punt in een bepaalde kleur. Alle pixels bij elkaar en je ziet je afbeelding.
  Hoe groter de dichtheid van de pixels, hoe scherper de afbeelding.
• Resolutie
  Resolutie verwijst naar de details in een afbeelding. Het wordt uitgedrukt in dpi (dots per inch, aantal stippen per inch), of beter ppi: aantal pixels per inch. Hoe meer pixels er in een inch zitten, hoe hoger de resolutie. En, meestal, hoe meer resolutie hoe scherper het beeld, en hoe zwaarder de afbeelding. Verander je de resolutie, dan wijzigen ook de breedte en de hoogte van de afbeelding
• Beeldafmetingen
  Een afbeelding heeft een hoogte en en een breedte. Die wordt meestal ook in pixels uitgedrukt. Een afbeelding kan bijvoorbeeld de afmetingen 800x600px hebben bij een resolutie van 72ppi.

Bestandsformaten

Vervolgens is het belangrijk iets te weten over de bestandsformaten. Een afbeelding of illustratie kan in een eigen formaat zijn gemaakt. De meest bekende bestandsformaten zijn:

• JPG of JPEG
  Staat voor ‘Joint Photographic Experts Group’.
  Dit is een gecomprimeerd formaat, geschikt voor kleurenfoto’s en achtergrondfoto’s. Als 300ppi vaak nog wel geschikt voor drukwerk, en als 72ppi vaak gebruikt op websites.
• GIF
  Staat voor Graphics Interchange Format
  Formaat dat vaak wordt gebruikt voor logo’s, animaties of lijntekeningen, maar niet voor foto’s op websites. GIF-afbeeldingen hebben maximaal 256 kleuren en kennen geen dataverlies. Een enkele keer kun je een GIF voor kleine foto’s met beperkte kleuren gebruiken.
• PNG
  Staat voor Portable Network Graphic
  Verbeterde versie van de GIF, die je kunt gebruiken voor afbeeldingen met veel kleuren, een transparantie of afbeeldingen waarbij de grootte geen issue is. PNG gebruik je vooral online, maar niet voor drukwerk. PNG’s zijn ideaal voor kleinere afbeeldingen met veel details. PNG ondersteunt transparantie, zodat je dit bestandsformaat ook kunt gebruiken voor logo’s of grafische elementen.

 

Eerst je afbeelding optimaliseren, dan pas uploaden!

Hoewel WordPress de mogelijkheid heeft om afbeeldingen te bewerken, is het altijd het beste om je afbeeldingen te verkleinen, comprimeren, bijsnijden of wat dan ook voordat je ze naar je website uploadt. Waarom? Simpel: WordPress is geen fotobewerkingsprogramma. Om je afbeeldingen te bewerken, kun je het beste Photoshop gebruiken, of – als je dat te duur vindt – GIMP of Pixlr https://pixlr.com/ of exPhoto http://www.ne.jp/asahi/mighty/knight/exphoto.html

Probeer ook om alle afbeeldingsformaten maximaal 250-300 Kb groot te houden. Dan blijft je website lekker snel.