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. En natuurlijk SEO. Een foto van 1 mb laadt namelijk heel langzaam. Stel dat je er 3 upload op 1 pagina, 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, compressie verkleint de bestandsgrootte (filesize) dus. Je moet dus nooit een foto rechtstreeks vanuit je camera of telefoon op je website plaatsen. Ik herhaal, nooit foto’s rechtstreeks vanuit je camera of je telefoon op je website plaatsen. Nooit meer vergeten.
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 of 72 pdi 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, daar gaat ie niet scherper van worden. 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.
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. Oftewel Search Engine Optimization, oftewel hoe hoog je in Google komt te staan. 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 en gebruik er nog een zoekwoord bij waarover de pagina of de post gaat. Bijvoorbeeld: blauwe bloempot raam of windmolen gras duurzaam. Dit is een goede gewoonte om aan te leren.
Nog wat tips:
– JPG voor foto’s gebruiken
– PNG voor logo’s of transparante images gebruiken
– 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. Gebeurt echt, heb ik meegemaakt in mijn directe kring (aka Stefan F.). Geloof me, is niet leuk. En je wilt het werk van anderen ook niet stelen, je wilt vast ook niet dat ze dat bij jouw werk doen.
Gratis stockfotosites:
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.