Met mooie, aansprekende foto’s krijgen bezoekers op je website een positieve indruk van je bedrijf, team, product of dienst. In sommige gevallen hebben mooie foto’s echter een negatieve gebruikerservaring tot gevolg, bijvoorbeeld als de afbeeldingen te groot zijn.
Als je veel zware foto’s op je website plaatst, duurt het langer voordat de foto’s geladen worden. Voor bezoekers die met een snelle internetverbinding thuis je website opzoeken, is dit niet zo’n groot probleem, maar voor mensen die geen snel internet hebben, of via een smartphone (met een 3G- of 4G-verbinding) je website bezoeken, kan dit een reden zijn om af te haken. Google en andere zoekmachines worden ook niet blij als je website traag is en kunnen je hierdoor een lagere positie geven in de zoekresultaten.
In deze blog ontdek je welk formaat afbeelding wanneer geschikt is, wat de ideale grootte van een afbeelding op je website is en hoe je eenvoudig tot deze grootte komt.
Voor het opslaan van afbeeldingen worden doorgaans 3 bestandstypes gebruikt: JPG, GIF of PNG. Het bestandstype GIF wordt gebruikt voor animaties en is niet geschikt als een afbeelding veel kleuren bevat. GIF mag je voor je website wel vergeten.
JPG en PNG zijn bestandstypes, die je geregeld nodig zult hebben voor je website. Het verschil tussen JPG en PNG is als volgt: JPG is geschikt voor afbeeldingen met veel kleine details of kleuren, zoals foto’s van je camera; JPG slaat deze details compacter op, zodat je bestand niet enorm zwaar wordt. PNG is geschikt voor logo’s, iconen, afbeeldingen met teksten en tekeningen. Je gebruikt PNG vooral als je een transparante achtergrond nodig hebt en als je niet wilt inleveren op bepaalde details in een afbeelding.
PNG
JPEG
Je weet nu welk bestandstype je kunt gebruiken voor afbeeldingen, maar hoe groot mag een afbeelding zijn? Er is niemand die met een STOP-bord zwaait als je een foto op je website zet die te groot is. Bezoekers worden alleen niet blij als ze 10-20 seconden moeten wachten voordat een pagina geladen is.
De foto’s in de slider (zie de video rechts) van je website springen als eerste in het oog als bezoekers op de voorpagina van je website komen. Om te zorgen dat deze sliderafbeeldingen van goede kwaliteit zijn, maar niet te zwaar zodat een bezoeker moet wachten, adviseren wij om de afbeeldingen niet groter te maken dan 300 kb (0,3 MB).
Voor de overige afbeeldingen op de website kun je deze maximale grootte ook aanhouden. Het liefst zien we dat je ze wat kleiner maakt. Niet elke afbeelding heeft namelijk de functie van blikvanger zoals in de slider.
Weet je hoe je de grootte van een afbeelding kunt bekijken? Klik met de rechtermuisknop op een afbeelding in een map of op het bureaublad van je computer en kies vervolgens voor ‘Eigenschappen’ als je Windows gebruikt en ‘Toon info’ of ‘Get info’ als je een Mac van Apple hebt. Je ziet nu de grootte en het bestandstype van de afbeelding.
Als je een afbeelding wilt verkleinen, is www.picresize.com een handige website. Voeg hier je foto vanaf je computer toe. Bij stap 2 kies je hoeveel procent de afbeelding kleiner moet worden. Aan de rechterkant zie je dat de verhouding verandert. Voor foto’s die niet in de slider staan, kun je een formaat tussen de 400 en 900 pixels aanhouden. Dat is een mooi formaat qua laadtijd en kwaliteit van de foto. Vervolgens kies je het juiste bestandstype en download je je aangepaste foto, die je op je website plaatst. Op je website kun je de foto eventueel nog bewerken. Kijk rechts hoe je dat eenvoudig doet:
Wij hopen dat je met deze blog meer te weten bent gekomen over het juiste gebruik van afbeeldingen en foto’s op je website. Heb je nog vragen? Laat ze achter bij de reacties of stuur mij een mailtje: pieter@startmetplate.nl
