Select Page

Ik ga je leren hoe je het beste foto’s kunt bewerken voordat je ze upload op je website. Waarom is dat belangrijk? Snelheid, snelheid & snelheid. Een foto van 1 mb laadt heeeeeel langzaam, stel dat je er 3 upload op 1 pagina, nou dan moet je heel lang wachten totdat de boel geladen is. En dat wil je niet, want dan haken mensen af. We gaan dus voor snel, snel, snel.

Wat we gaan doen:

  • Foto comprimeren (minder zwaar maken)
  • Afmeting aanpassen
  • DPI aanpassen
  • Alt tags toevoegen voor de SEO

Nee is niet eng en ook niet moeiliijk.

Wat is compressie?

Bij foto compressie wordt alle overbodige informatie uit de de foto gehaald zonder dat de kwaliteit op je beeldscherm naar beneden gehaald wordt. Foto kwaliteit voor drukwerk is nu eenmaal heel anders dan voor web. Dat zijn grote bestanden om zo scherp mogelijk te drukken. Een beeldscherm kan niet scherper beeld laten zien dan het beeldscherm zelf, ookal is de foto heel scherp. Kortom, het verkleint de bestandsgrootte (filesize) dus. Nooit een foto rechtstreeks vanuit je camera of telefoon op je website plaatsen dus.

Hoe check ik de grootte van een foto?

Ga in de map staan waar de foto staat. Ga met je muis op het bestand staan. Klik op de rechtermuisknop en ga naar eigenschappen/properties. Daar zie je bij details de afmetingen van de hoogte en breedte staan in pixels. De filesize in kb of mb en de resolutie in dpi. Ik raad 96 dpi aan als je terug schaalt van bijv 300 dpi. Is je foto al 72 dpi, heeft het geen zin om hem op te schalen naar 96 dpi. Dit kun je bijvoorbeeld doen in Fotor of Photoshop.

Ehhh, dpi?

Dots per inch. De dichtheid van de pixels zullen we maar zeggen, oftewel scherpte. Doorgaans wordt drukwerk gedrukt op 300 dpi of hoger, beeldschermen waren altijd 72 dpi, maar tegenwoordig zijn er zulke goede schermen dat 96 dpi een goede nieuwe standaard is om aan te houden. 72 dpi is dus ook prima als je niet iets anders hebt.

Stappen

Stap 1. Afmeting aanpassen
Een foto van 5000px bij 2000px is veel te groot voor een leuk plaatje bij een blogpost. Deze zal ook wel een paar mb groot zijn. Je gaat het formaat van de foto checken en indien nodig verkleinen in bijvoorbeeld Fotor.

Gratis online fotobewerking tool:
Fotor

Richtlijnen (ongeveer):
Full screen: 2048 px wide, file size 250 – 350 kb (bijv. fullscreen foto’s of alles wat net zo breed als je scherm is)
Kleinere foto’s: 600-1080 px wide, file size 80-150 kb (bijv. bij blogs of andere plekken op pagina’s die niet de hele breedte van de pagina hebben)

Stap 2. Foto compressie
Je hebt nu een foto op het juiste formaat, maar de bestandsgroote (kb/mb) is nog steeds groot. Je gaat je foto uploaden in bijv. TinyPNG en hij spuugt er zo maar een foto uit die kleiner is geworden. Compressie.

Online compressietools:
TinyPNG of Optimizilla

Done! Zou je denken. Bijna.

Stap 3. Foto uploaden en tekst invoegen
Bij het uploaden van de foto zijn er meerdere velden die je kunt invullen. Er zijn 2 belangrijk, titel en alt text. Waarom? Dat is goed voor de seo. Zo kan google in tekst lezen wat er op je foto staat en laat hij je zien in de zoekresultaten. Maar dit is ook belangrijk voor accessibility van je site, bijvoorbeeld voor slechtzienden. Google vindt dit ook leuk om je hoger te ranken als je dit invult. Omschrijf gewoon de foto in 1-3 woorden, geen seo termen invoeren die algemeen zijn. Bijvoorbeeld: blauwe bloempot raam of windmolen gras. Dit is een goede gewoonte om aan te leren.

‚ÄčNog wat tips:
– JPG voor foto’s
– PNG voor logo’s of transparante images
– Compressie in Photoshop: file, save for web, jpg high (quality 60)

Wil je meer weten?
Yoast lezen.

Stockfoto’s

Heb je geen eigen foto’s? Gebruik gratis of betaalde stockfoto’s. Nooit plaatjes van Google halen, dat kan je flinke boetes opleveren. Heb ik meegemaakt in mijn directe kring (aka Stefan F.), niet leuk.

Websites gratis:
Unsplash
Stocksnap
Pexels
Fotolia

Websites betaald:
Stocksy

Nou, nu moet het gaan lukken! Wil je nog overleggen met mij? Je kunt altijd je strippenkaart inzetten voor mijn tips en advies.