Afbeeldingen zijn belangrijk om je verhaal te versterken en tegelijkertijd de belangrijkste oorzaak van een langzame website. En daar rekent niet alleen Google, maar ook je bezoeker op af. We worden steeds ongeduldiger en ook jouw bezoeker heeft geen rust meer om te wachten tot jouw site eindelijk goed toont. Hij is vertrokken voor je het weet.
De vormgever wil grote beelden. Maar als de banner je hele scherm beslaat dan ziet je bezoeker de boodschap niet boven de vouw. Hij moet dus eerst scrollen om te weten wat jij te bieden hebt. En daar gaan je kostbare seconden.
Als communicatiespecialist en vormgever discussiëren wij regelmatig over de bezoekerservaring in relatie tot visuele effecten. Je kunt zelf veel doen aan het verbeteren van je afbeeldingen. In dit artikel geven we een paar praktische tips.
- Kies het juiste formaat
- Comprimeer je afbeelding
- Handige bewerkingstools
- Geef je afbeeldingen een goede naam
- Gebruik het juiste bestandstype
- Check je sitesnelheid
1. Het juiste formaat gebruiken
Het formaat van een afbeelding wordt uitgedrukt in pixels. Hoe meer pixels, hoe zwaarder de afbeelding. Je kunt dit compenseren met een hoge compressie waardoor de ‘omvang’ meevalt (zie punt 2). Online kun je met veel kleinere afbeeldingen toe dan voor drukwerk.
Zorg ervoor dat je altijd dezelfde formaten gebruik; dan zijn je foto’s altijd even hoog. Dus niet de ene keer 750×500 pixels en de andere keer 450×200 pixels. Snijd de afbeelding uit in het gewenste formaat en laad het daarna in de website. Goed om te weten: in bewerkingstools wordt vaak de term ‘croppen’ gebruikt voor snijden.
Advies formaat afbeelding:
- Grote afbeelding: 1920 pixels breed (geschikt voor je banner)
- Gemiddelde afbeelding: 750 of 500 breed, afhankelijk van vorm en plaats
- Kleine afbeelding (zgn. thumbnail) 150×150 pixels
2. Comprimeer afbeeldingen
Zodra je afbeeldingen in je site hebt die zwaarder zijn dan pakweg 300 Kb, moet je echt in actie komen.We zien regelmatig sites met liefst 6 Mb per afbeelding en dat is echt funest voor je site. Om je een idee te geven, een thumbnail zit rond de 20 Kb, oplopend tot 300 Kb voor een banner afbeelding.
Het aantal Mb’s verkleinen wordt ‘comprimeren’ genoemd. Dit is een techniek waarbij het beeld wordt ingepakt. De kwaliteit blijft goed, maar de bestandsgrootte wordt stukken kleiner en dat is belangrijk voor je laadsnelheid.
3. Handige tools voor aanpassen afbeeldingen
Vormgevers beschikken over professionele fotobewerkingsprogramma’s zoals Photoshop. Heb je dat niet, gebruik dan een online tool zoals fotoverkleinen.nl, GIMP en pixlr.com. Er bestaan ook plugins in WordPress waarmee je afbeeldingen automatisch gecomprimeerd worden, maar ons advies is om het zekere voor het onzekere te nemen en meteen het juiste formaat te uploaden.
4. Geef de juiste naam
Namen van afbeeldingen zijn echt een ondergeschoven kindje, terwijl ze zo belangrijk zijn. Voor je vindbaarheid maar ook voor de snelheid. Geef de afbeelding zoektermen mee. Trefwoorden waar mensen op zoeken (geen hele waslijst). Als je meerdere foto’s hebt met dezelfde trefwoorden voeg je een vervolgcijfer toe. Bijvoorbeeld: makelaar-amsterdam-01 of kapper-almere-buiten-01
5. Juiste bestandstype
Geef de afbeelding de juiste extensie:
- JPEG voor normale foto’s
- PNG voor afbeeldingen met een transparante achtergrond, logo’s of illustraties
- GIF voor animaties
Gebruik alleen het PNG formaat bij transparantie. Heb je geen transparantie nodig, kies dan voor JPEG, want een PNG comprimeert niet zo goed.
6. Testen
Controleer je sitesnelheid. Met Google pagespeed zie je precies welk aspect van je afbeeldingen je kunt verbeteren. Voer in ieder geval na het verbeteren (ook) een test uit, zodat je weet of jouw site nu écht optimaal is wat snelheid betreft. Naast Google kun je ook Pingdom of GPMetrix gebruiken.
Je ziet hierboven dat de website van Coconut Communicatie goed scoort op snelheid, al valt er nog wel wat te verbeteren. Er kan 3Kb bespaard worden op 1 afbeelding, wat verwaarloosbaar is. Maar als je 10 van die afbeeldingen hebt dan tikt het toch aardig aan. Het loont dus de moeite om hier aandacht aan te besteden.
