Gebruik van afbeeldingen
Gebruik afbeeldingen om teksten te verduidelijken en de website op te fleuren. We hebben er niet voor niets een gezegde voor: Een foto zegt meer dan 1.000 woorden. Maar maak het niet te bont. Een plaatje moet functioneel zijn en net als te veel tekst kunnen ook te veel plaatjes schaden.
Omvang
De bestandsgrootte (in Mb, niet in pixels) van een afbeelding beïnvloedt de snelheid waarmee de pagina wordt geladen. Zorg er daarom voor dat de grootte van de afbeelding beperkt blijft.
Een foto van een moderne digitale camera is al snel 5-10Mb groot wat neer komt op 8-16 seconden wachten (afhankelijk van de internetverbinding). Bedenk dat een gemiddelde gebruiker niet langer dan 2-4 seconden wil wachten en verder zal gaan naar een andere website.
Bedenk ook dat uw browser de foto al in zijn (cache-)geheugen heeft staan en het laden dus (zeer) snel gaat op uw eigen computer.
Ongemerkt denkt u dus dat het allemaal soepel loopt maar voor een nieuwe bezoeker is dat niet het geval!
Tips:
- Verklein de foto's die u gaat gebruiken op uw website vooraf op uw eigen computer voor u ze upload of verklein ze in het cms via 'Afbeelding bewerken'.
- Voeg geen grote foto's in en maak ze kleiner door het formaat op 50% of 25% van het origineel te zetten of door ze kleiner te 'slepen': de weergave wordt dan wel kleiner, maar de foto blijft in omvang onveranderd!
- Stel bij Afbeeldingen > Instellingen gewenste formaten in voor gebruik op de website. Het cms zal dan elke foto automatisch verkleinen tot die formaten die u vervolgens kunt gaan invoegen.
Het origineel blijft daarbij beschikbaar en kan alsnog worden gebruikt: bijvoorbeeld om te tonen als de bezoeker op een thumbnail van de afbeelding klikt. - Laat het cms uw afbeeldingen optimaliseren voor het web. Zet bij Afbeeldingen > Instellingen de optie 'Optimaliseer afbeeldingen (gif, jpg en png)' op 'Ja' en het cms zal afbeeldingen automatisch nog verder in omvang verkleinen, zonder kwaliteitsverlies! (Soms tot wel 40%.)
NB: heeft u al veel afbeeldingen (>100)? Het optimaliseren van afbeeldingen kan bij een bestaande website met veel afbeeldingen er lang duren. Geef in dat geval even door dat u van de instelling gebruik wenst te maken en wij verzorgen het initieel optimaliseren op de achtergrond. Afbeeldingen die u later zelf toevoegt worden dan automatisch geoptimaliseerd.
Juiste type afbeelding
Er bestaan verschillende bestandsformaten voor afbeeldingen. Elk formaat heeft specifieke eigenschappen waardoor afbeeldingen kwalitatief (beeld) en kwantitatief (omvang) het beste kunnen worden ingezet.
Gebruik voor foto's het JPG-formaat. JPG comprimeert foto's erg goed zonder dat de kwaliteit van de foto's zichtbaar achteruit gaat.
Gebruik voor logo's, grafieken, tekeningen, etc. het PNG- of GIF-formaat. Deze formaten comprimeren de afbeelding ook, net als JPG, maar zijn beter geschikt voor afbeeldingen met grote, egale vlakken. Daarnaast kunnen PNG en GIF (gedeeltelijk) transparant zijn.
Uniformiteit
Zorg er voor dat de plaatjes er uniform uitzien. Dat wil niet zeggen dat ze allemaal dezelfde grootte en beeldopbouw moeten hebben, maar wel dat ze duidelijk bij elkaar horen. Gebruik bijvoorbeeld voor verschillende grafieken dezelfde kleuren en maak verschillende pasfoto’s op een pagina even groot. Gebruik dezelfde randen om de plaatjes.
Tips:
- Stel bij Afbeeldingen > Instellingen gewenste formaten in voor gebruik op de website. Het cms zal dan elke foto automatisch verkleinen tot die formaten (het origineel blijft daarbij beschikbaar).