Selecteer een pagina

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.

  1. Kies het juiste formaat
  2. Comprimeer je afbeelding
  3. Handige bewerkingstools
  4. Geef je afbeeldingen een goede naam
  5. Gebruik het juiste bestandstype
  6. 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 en de andere keer 450×200. 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

 

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.jpg of kapper-almere-buiten-01.jpg

 

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.

resultaat google pagespeed 1

resultaat google pagespeed

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.

 

Wil jij je afbeeldingen laten optimaliseren of een snellere hosting? Norman vertelt je er graag meer over 

Pin It on Pinterest

Share This