Als je een website bezoekt dan is vaak het eerste wat je opvalt de foto’s. Zij bepalen voor het grootste deel de uitstraling op de website. Het is dan ook belangrijk dat de foto’s op je website goed zijn. Goed van kwaliteit en goed passend bij het onderwerp van de website. In dit artikel vertel ik je wat meer over:
- Welke plekken op de website belangrijk zijn om foto’s te plaatsen
- Hoe je aan geschikte foto’s komt
- Welke bestandsformaten geschikt zijn
- Hoe je de foto’s goed voorbereid voordat je ze plaatst
Op welke plekken op je website moet je zeker foto’s plaatsen?
- Allereerst natuurlijk op je homepagina, dit is waar de meeste bezoekers hun eerste indruk krijgen van je website. De perfecte plek voor een sprekende foto is de header, die ziet de bezoeker het eerste bij het openen van de pagina.
- Op je aanbodpagina’s, daar laat je je producten en of diensten zien die je aanbiedt.
- Op de ‘over jou’ of ‘over ons’ pagina. Daar krijgt de bezoeker een beeld van met wie ze te doen hebben. Mensen kopen van mensen dus één of meerdere goede foto’s mogen hier zeker niet ontbreken.
- Op alle overige pagina’s werkt het ook zeker krachtig om de teksten te ondersteunen met bijbehorende foto’s.
- In je blogberichten om visuele ondersteuning te geven bij het onderwerp waar je over schrijft. Aan te raden is om ook altijd een uitgelichte afbeelding te gebruiken. Dit ziet er aantrekkelijk uit in je bloggrid en geeft de lezer meteen een idee waar het artikel over gaat.
Natuurlijk hoeven de afbeeldingen niet alleen maar foto’s te zijn, je kunt ook illustraties gebruiken als dit bij het design van je website past. Iconen werken overigens ook prima om wat meer beeld aan je website te geven.
Hoe kom je aan goede foto’s voor op je website?
Wat nog steeds veel mensen doen is even zoeken via Google naar een geschikte foto voor op de website of een social media post. Dit is echter ten strengste af te raden! Op veel van deze foto’s zit copyright en dat betekent dat je ze niet zomaar mag gebruiken. Doe je dat wel dan bestaat de kans dat je er een flinke rekening voor krijgt. Er bestaan zelfs personen die geld verdienen door te speuren naar foto’s die onrechtmatig gebruikt worden. Niet doen dus.
Wat kun je wel doen om aan goede foto’s te komen?
1. Schakel een professionele fotograaf in
Mijn nummer 1 advies hierin is om je foto’s door een professionele fotograaf te laten maken. Zeker de foto’s die je van jezelf plaatst en die van de producten/diensten van je bedrijf krijgen hierdoor een echte professionele uitstraling. Een goed belichte foto met een uitgekiende compositie komt toch veel beter over dan een vakantiekiekje. Wat overigens niet wil zeggen dat je geen foto’s kunt plaatsen uit je eigen archief. Dit kan juist een hele mooie, persoonlijke aanvulling zijn om je verhaal kracht bij te zetten.
Foto door Alexander Dummer via Pexels
2. Maak gebruik van stockfoto’s
Mocht je geen budget hebben voor het inhuren van een professionele fotograaf dan kun je altijd gebruik maken van stockfoto’s, al dan niet gratis. Stockfoto’s zijn overigens ook prima om te gebruiken als (uitgelichte) afbeelding bij je blogberichten. Zelf maak ik daar veel gebruik van.
Waar vind je gratis stockfoto’s?
Er zijn tegenwoordig vele websites waar je gratis stockfoto’s kunt downloaden. Hieronder de drie bekendste:
- Unsplash heeft een enorme hoeveelheid kwalitatief zeer goede, gratis stockfoto’s. Unsplasch is enorm populair en heeft integraties in veel andere bekende software zoals bijvoorbeeld Trello. Je hoeft je niet aan te melden om te kunnen downlaoden maar dat is wel handig omdat je dan je eigen collecties samen kunt stellen. Je kunt dan eerst verzamelen om ze later te downloaden.
- Pixabay is in verschillende talen beschikbaar, waaronder Nederlands, en is van oorsprong een Duits bedrijf. In tegenstellling tot bijvoorbeeld Unsplash kun je hier wel in Nederlandse termen zoeken. Wat handig is, is dat je de foto’s in verschillende formaten kunt downloaden. Aanmelden hoeft niet maar is handig, het voorkomt dat je bij elke download bruggen of stoplichten aan moet klikken om te bewijzen dat je geen robot bent. 🙂
- Bij Pexels vind je honderdduizenden gratis hoge resolutie stockfoto’s en iedere dag worden en nieuwe toegevoegd. Deze worden geupload door eigen gebruikers of zijn afkomstig van websites met gratis afbeeldingen. Ze hebben net weer wat andere foto’s dan de hierboven genoemde websites. Ook hier is aanmelden niet verplicht.
Een nadeel van het gebruiken van gratis stockfoto’s kan zijn dat er een grotere kans is dat je de foto’s ook op andere websites en blogs tegen kan komen.
Wil je nóg meer keuze èn kwalitatief betere foto’s?
Zelf gebruik ik regelmatig de foto’s en illustraties van Depositphotos. Dit is een betaalde stockfoto website met een ruime keuze uit zo’n 1.000.000 (!) foto’s. Ze hebben regelmatig aanbiedingen onder andere via AppSumo. Meestal is dit op Black Friday in november en nog een enkele andere keer per jaar. Je betaald dan $39.00 voor 100 stockfoto’s en dat is echt een koopje. Iets om in de gaten te houden dus.
Welke bestandsformaten van afbeeldingen zijn geschikt op je website?
Er is een heel scala aan bestandsformaten voor afbeeldingen. Daarvan zijn er 3 (+1) die geschikt zijn om op je website te plaatsen:
.jpg of .jpeg (Joint hotographic Experts Group.)
Dit bestand gebruik je eigenlijk altijd voor de foto’s op je website. Het grote voordeel van .jpg is dat je de bestanden kunt comprimeren, lichter maken, wat het heel geschikt maakt voor je website. Het is ook het meest gangbare formaat; de foto’s die je maakt met je toestel worden ook in dit bestandsformaat opgeslagen. Houdt er wel rekening mee dat iedere keer dat je een .jpeg bestand op je computer opent en weer sluit, er wat informatie verloren gaat.
.png (Portable Network Graphics)
Een .png bestand wordt vaak gebruikt voor bijvoorbeeld logo’ s omdat je deze op kunt slaan met een transparante achtergrond. Ook als je ergens een ‘vrijstaand’ beeld nodig hebt dan is .png het formaat wat je moet gebruiken. Het bestandsformaat is zwaarder dan een .jpg afbeelding dus om deze voor gewone foto’s te gebruiken is niet aan te raden.
.gif (Graphics Interchange Format)
De gifs dat zijn die bewegende plaatjes die je waarschijnlijk kent vanuit je social media kanalen. Niet ieder website platform of WordPress thema ondersteunt dit formaat. En moet je het eigenlijk wel willen? In het begin van het internet werd hier veelvuldig gebuik van gemaakt maar dat is inmiddels wel achterhaald. Het leidt enorm af van wat je wil vertellen.
.webp (WebPhotos /WebPictures)
WebP is een bestandsextensie die geintroduceerd is door Google. Met .webp kun je afbeeldingen van hoge kwaliteit weergeven op een website, maar dan in een veel minder zwaar bestand dan PNG en JPEG.
Hoe bereid je je foto’s goed voor voordat je ze op je website plaatst?
Digitale fotografie heeft een enorme ontwikkeling doorgemaakt sinds de introductie. Zo is onder andere het aantal pixels waarmee een foto is opgebouwd enorm toegenomen. Dit heeft zowel gevolgen voor de kwaliteit van de foto (beter) en de ‘zwaarte’ (toegenomen) van de foto’s. Te zware foto’s kunnen het laden van webpagina’s aanzienlijk vertragen en dat is zeker niet aan te raden. Er zijn twee zaken waar je rekening mee moet houden:
Bestandsgrootte
Hoe groot een afbeelding is wordt aangegeven in pixels; blokjes waarmee een digitale foto is opgebouwd en die elk een kleur bevatten. Een foto is dus bijvoorbeeld 800 × 600 (800 pixels breed en 600 pixels hoog). Uit de camera’s van nu komen afbeeldingen die echt enorm zijn, duizenden pixels in de breedte en hoogte. Voor je website heb je echt niet zoveel nodig.
Zelf ga ik uit van 1920 pixels voor het gebruik van de volledige breedte van de pagina, in een header bijvoorbeeld. Als ik een foto plaats die maar op een kwart van de breedte van de pagina hoeft te komen dan hoeft deze foto maar 480 pixels te zijn (1920 px/4).
De makers van het Divi Thema hebben een heel handig artikel geschreven over de afmetingen van afbeeldingen op de website. In principe geschreven voor Divi maar het is handige leidraad om aan te houden voor je website.
Resolutie
De resolutie van een afbeelding zegt iets over de pixeldichtheid, het aantal pixels dat op een oppervlakte zitten (in cm of inch) Hoe meer pixels, hoe scherper de foto is. Voor drukwerk is er een resolutie nodig van 300 dpi (dots per inch) en voor afbeeldingen voor het web is 72 dpi voldoende.
Het is dus belangrijk om je foto’s:
- in het juiste bestandsformaat te plaatsen (meestal .jpg)
- niet groter te gebruiken dan dat ze nodig zijn voor de plaats op de website
- op te slaan met een resolutie van 71 dpi
Tools voor het verkleinen van foto’s
Grafisch vormgevers, webdesigners en fotografen werken over het algemeen met het fotobewerkingsprogramma Photoshop van Adobe. Hiermee kun je heel eenvoudig je foto’s op maat maken en in de juiste resolutie opslaan.
Heb je geen Photoshop dan kun je de gratis online photo editor Pixlr gebruiken, of een website als fotoverkleinen.nl. Via Google zijn er nog veel meer van deze handige tools te vinden.
Behalve het aanpassen van het formaat kun je met deze tools ook zgn. compressie instellen. Daarmee maak je de foto lichter door er informatie uit te halen. De kwaliteit wordt meestal weergegeven van 1-100. Kies bijvoorbeeld bij het opslaan voor 80 of 90. Dan is de foto weer een stukje lichter maar zie je geen duidelijk kwaliteitsverlies.
Dat comprimeren kun je ook doen via tinypng.com. Deze gebruik ik zelf regelmatig om .png gbestanden te comprimeren, maar je kunt dit ook doen met .jpg bestanden.
Conclusie
Het is echt belangrijk om even de tijd te besteden aan het voorbereiden van je foto’s voor plaatsing op de website. Zo voorkom je dat deze volloopt met veel te zware afbeeldingen en daardoor veel trager laadt. Een indicatie: ik probeer onder de 200 kb te blijven met mijn website foto’s. Een headerfoto kan wat zwaarder zijn omdat deze vaak over de volle breedte van de website gaat.
