Foto’s verkleinen en bijsnijden voordat je ze uploadt

Upload nooit foto’s in originele grootte! Een foto op originele grootte is namelijk al snel zo’n 4 MB. Stel dat je 5 foto’s op je homepagina hebt, dan zit je al op zo’n 20 MB. Daar wordt de site ontzettend zwaar en traag van en dat kost je klanten. Daarnaast zal Google je afstraffen, omdat die snelle websites hoog in de resultaten wil tonen. Let er dus op dat je onderstaande richtlijnen gebruikt.

Richtlijnen voor afmetingen

• Logo’s: deze hoeft maar maximaal 150-300 px breed te zijn en +/- 50kb.
• Achtergrondfoto’s: +/- 1600 px breed zijn en max +/- 400kb.
• Normale foto’s: /- 800 px breed/hoog zijn en max +/- 150kb.
• Foto’s in cirkels (zoals bij reviews): zorg dat deze vierkant zijn (dus 1:1 ratio) en +/- 400 px breed + hoog en max +/- 100 kb.

Foto’s verkleinen

Je kunt al je foto’s in één keer verkleinen met een gratis tool zoals Image Resizer.

1. Kies de foto’s die je wil verkleinen (je kunt dus meer foto’s in één keer selecteren).
2. Stel de maximale breedte in a.d.h.v. de richtlijnen hierboven (zorg dat ‘Lock aspect ratio’ aangevinkt staat, dan hoef je de hoogte niet in te vullen)/
3. Optioneel: stel de maximale grootte in kb’s in a.d.h.v. de richtlijnen hierboven. Dit is niet per se nodig, omdat de tool zelf meestal al zorgt dat de bestandsgrootte onder mijn richtlijnen uit komt.
4. Kies als formaat voor foto’s JPG of WebP voor foto’s, géén .png. Die laatste zijn namelijk veel zwaarder qua bestandsgrootte. Voor je logo kunt je .png kiezen zodat je je transparante achtergrond behoudt.

Foto’s bijsnijden/croppen

Kijk goed naar de verhouding van de foto die je gaat vervangen, en zorg dat jouw foto’s ongeveer dezelfde verhoudingen hebben (hoeft niet exact hetzelfde). Bijv staande foto’s voor foto’s naast een tekstblok, en liggende foto’s voor achtergrondfoto’s.

Bij achtergrondfoto’s is het belangrijk dat je vooraf goed kijkt waar je je onderwerp (waar de foto om gaat, bijv een dier, een persoon of een object) wil laten uit komen en waar de tekst moet komen.

Als je weet waar je je onderwerp wil laten uit komen, moet je je foto vooraf op de juiste manier bijsnijden en eventueel spiegelen, op zo’n manier dat het onderwerp op de juiste plek uit komt. Om daar handigheid in te krijgen zul je het misschien een paar keer moeten bijstellen en het gewoon uitproberen.

Gebruik bijvoorbeeld deze gratis online tool om je foto’s bij te snijden.

Voorbeeld 1 – Tekst links, onderwerp rechts
Stel, je wil de tekst links hebben. Zorg dan dat het onderwerp rechts van de foto uit komt. Dus horizontaal rechts, verticaal gecentreerd. Het is niet erg als de bovenkant van een hoofd een beetje wordt afgesneden (in de foto, niet in het echt 😉).

Dan krijg je bijvoorbeeld deze uitsnede:

Voorbeeld 2 – Tekst onder in midden in kader, onderwerp(en) ook in het midden
Als je je tekst op deze manier in een kader wil plaatsen, zorg je dat je onderwerp hoog genoeg boven het tekstvlak uitsteekt, en niet bijv dat het gezicht wegvalt achter het vlak. Je ziet dat het gezicht in de hoogte ongeveer op een derde uit komt. Hetzelfde principe geldt voor een gecentreerde tekst onderin zonder kader.

Dan krijg je bijvoorbeeld deze uitsnede:

Voorbeeld 3 – Onderwerp links, tekst rechts
Zorg ervoor dat het onderwerp verticaal ongeveer op een derde/op de helft uit komt. Als het onderwerp te hoog uit komt, zie je dat hij wordt afgesneden.

Dan krijg je bijvoorbeeld deze uitsnede: