Foto’s op je webpagina

17/11/2020 | Tips & tricks webdesign

De primaire functie van foto’s is de boodschap op je website of webshop versterken. Ze moeten bij de klant het gevoel “dit wil ik nu hebben” oproepen.

Denk daarbij aan aantrekkelijke productfoto’s, sfeerfoto’s die aansluiten bij een dienst, een profielfoto van diegene met wie ze in zee willen gaan.

WAAR VIND IK FOTO’S?

  • Klant levert eigen foto’s aan. Let wel op de kwaliteit hiervan!
  • Foto’s laten maken door professionele fotograaf. Er zijn fotografen gespecialiseerd in productfoto’s (van food tot technische producten), portretfoto’s etc.. Vraag rond in je netwerk of zoek op het internet. Ik moet zeggen dat ik zelf in gebreke ben wat betreft mijn eigen profielfoto, die is ooit door mijn man voor me gemaakt, maar ik zou echt eens een professionele portretfotograaf een profielfoto laten maken.
  • Stockfoto’s. Er zijn veel databanken met stockfoto’s die je rechtenvrij kunt gebruiken. Let wel altijd even op of je de bron moet vermelden. Probeer stereotype foto’s te vermijden. Zelf houd ik er ook niet van om mensen in beeld te brengen, als dit geen functie heeft.
    • Betaalde stockfoto’s: Bijvoorbeeld ShutterstockiStock of 123RF. Over het algemeen betaal je voor een abonnement met een vast aantal foto’s.
    • Gratis stockfoto’s. Mijn favoriet is Unsplash, maar er is ook een grote keuze bij Pexels, Burst of Pixabay.

KWALITEIT FOTO’S

Het is het beste als je foto’s in (zeer) hoge resolutie downloadt of aangeleverd krijgt. Je kunt deze nog niet op je site gebruiken, omdat deze foto’s onnodig zwaar zijn, maar als startpunt zijn ze het best. Een kleine foto vergroten, omdat dit op een bepaalde plek nodig is, geeft een wazige foto. En een foto verkleinen lukt bijna altijd zonder noemenswaardig kwaliteitsverlies.

Waarom mogen je foto’s niet te groot zijn op je site?

  • Je site laadt heel traag, waardoor bezoekers eerder afhaken.
  • Trage sites worden door Google afgestraft
  • Als je beperkte ruimte op je webhostingpakket hebt, zit je al snel over je limiet heen.

FORMAAT FOTO’S

  • Probeer een bestandsgrootte van 100-150 Kb aan te houden.
  • Verklein foto’s naar de afmeting (in pixels) die je nodig hebt. Dus ga niet groter of kleiner!
  • Vuistregels formaten, uitgaande van de DIVI rijen:
    • 1 rij: 1080 pixels breed
    • 3/4 rij: 795 pixels breed
    • 2/3 rij: 700 pixels breed
    • 1/2 rij: 510 pixels breed
    • 1/3 rij: 320 pixels breed
    • 1/4 rij: 225 pixels breed
    • Schermvullend: 1280 pixels breed
    • Hoogte van de afbeelding binnen een rij uiteraard gelijk houden, anders wordt het rommelig.
    • Voor productfoto’s kies ik zelf vaak voor het formaat 800×600 pixels. Of als je alles staand wilt: 600×800 pixels. Meng liggende en staande foto’s niet, ook dat geeft een rommelig beeld.
  • Sla de foto’s op in een resolutie van 72 pixels/inch. Scherp genoeg voor je website. Controleer wel of ze nog scherp genoeg zijn!

FORMAAT FOTO’S SOCIAL MEDIA

  • Door middel van de Yoast SEO plugin kun je een afbeelding koppelen aan je site of specifieke pagina’s of berichten. Op het moment dat je de link naar je site/pagina in Facebook (en mijn ervaring is ook in LinkedIn) deelt, wordt de foto die jij wilt getoond (en niet het logo of de uitgebeelde afbeelding van je site). Dat geeft een veel professionelere uitstraling.
  • Het juiste formaar voor deze afbeelding:
    • 1280 breed x 628 pixels hoog
  • Sla de foto’s op in een resolutie van 72 pixels/inch. Scherp genoeg voor je website. Controleer wel of ze nog scherp genoeg zijn!
  • Kijk hier wat je in Yoast moet doen en wat je moet doen om te zorgen dat Facebook geen oude foto toont.

VERKLEINEN BESTANDSGROOTTE FOTO’S

  • Voordat je verkleint: maak een map met alle originele foto’s en een map met dezelfde foto’s die je wilt bewerken. Werk nooit in de map met originele foto’s!
  • Op een MAC is het vrij eenvoudig om de bestandsgrootte aan te passen. Open de afbeelding met Voorvertoning. Ga naar “Extra’s” en klik “Pas grootte..”. In het scherm wat zich opent kun je breedte, hoogte en resolutie aanpassen. Klik daarna op OK en bevestig dat je de afbeelding wilt opslaan.
  • Is de bestandsgrootte van de afbeelding nog te groot? Ik gebruik (gratis) de site TinyPNG om afbeeldingen verder te comprimeren. Overigens gebruik ik bijna altijd het jpeg formaat, omdat dit al minder zwaar is als het png formaat.
  • PDF’s verklein ik via de (gratis) site Smallpdf.
  • Het is ook mogelijk pdf’s op de MAC te verkleinen: Open de pdf in Voorvertoning en kies “Archief”> “Exporteer”. (Kies niet “Exporteer als pdf”.) Klik op het venstermenu “Quartz-filter” en kies “Maak bestand kleiner”.

FOTO’S BEWERKEN

  • Voor fotobewerking zijn er diverse programma’s op de markt. Zelf gebruik ik het (gratis) programma Gimp. Op het internet zijn diverse tutorials te vinden hoe je hiermee kunt werken. Ik gebruik het voornamelijk voor de (door de eigenaar gemaakte) productfoto’s van BPath Energy, deze foto’s zijn gemaakt in een werkplaats, ik isoleer de producten en gebruik een standaard grijze achtergrond. Ik kan ze ook meteen in het juiste formaat opslaan.