Een afbeelding of foto maakt een pagina of website een stuk mooier. Ook de leesbaarheid van de pagina verbetert. Dit alles is super voor de bezoeker en daarom voor jou en zelfs voor Google. Want hoe meer bezoekers van jouw website houden, hoe meer je website wordt gewaardeerd door Google. Afbeeldingen ofwel mooi foto’s en graphics zijn dus een erg goed idee.
De keerzijde van foto’s op je pagina is dat ze de laadtijd van een pagina vertragen. Dit is wel nadelig voor de waardering van je pagina/website door Google en de bezoeker. Daarom is het belangrijk dat je je foto of afbeelding zo licht mogelijk maakt maar nog wel kwalitatief goed.
Nu kan ik je vertellen dat dit makkelijk te doen is met Photoshop en dan ‘Save for web & devices’ / ‘Opslaan voor het web’. Echter is Photoshop niet voor iedereen te betalen want dit is een vrij geavanceerd programma. Als je niet alle functies nodig hebt, is dit natuurlijk zonde. Daarom zal ik je hier laten zien hoe je makkelijk foto’s kunt optimaliseren voor het web zodat ze lekker licht blijven maar wel de juiste kwaliteit hebben.
Stap 2. Maak een ontwerp
Klik linksboven op ‘Create a design’. Je kunt ook kiezen tussen bestaande formats maar voor je website heb je meestal een bepaald formaat dat je wilt gebruiken.
Stap 3. Je formaat invoegen (custom dimensions)
Als je rechts klikt op ‘Custom dimensions’, dan kun je zelf je afmeting invoegen.
Het web werkt met pixels. Hieronder gebruik ik qua breedte 1080px. Dat is de breedte van een redelijk standaard website.
(Dit is niet een fullwidth / volle breedte afmeting. )
Als jouw afbeelding dus 3000px is, dan is dit al veel te groot en onnodig. Achterhaal hoe groot je afbeelding moet zijn en vul hier de dimensies in. Je kunt voor jezelf dan even een opzetje maken van hele website breedte is 1080, halve is bijv 550 en 1/3 is 320px. Dat is een makkelijke stelregel voor jezelf.
Stap 4. Begin je design
Volg de stappen in Canva:
- Klik op Uploads
- Upload jouw afbeelding
- Klik op de afbeelding dan komt deze in je canvas rechts.
Vervolgens kun je de afbeelding helemaal gaan opmaken.
Stap 5. Geef je afbeelding de juiste bestandsnaam
Het is wel handig als je vanaf hier al je foto de juiste bestandsnaam geeft zodat als je deze upload naar je website, hier al goede woorden (keywords) inzitten die passen bij de pagina. Dit doe je door bovenaan te klikken en de design title te veranderen.
Stap 6. Download PNG en JPG en vergelijk
Het beste is om de PNG en JPG versie te downloaden en dan te bekijken wel versie het kleinste is.
Meestal bij een foto is JPG het beste formaat (kleinste). Bij een logo of een design met tekst kan je soms beter af zijn met PNG.
Stap 7. Comprimeer met optimizilla.com
Nu kun je het kleinste beeld uploaden naar je website. Echter is het nog niet helemaal optimaal en kan het nog beter. Namelijk onder de 100kb. Dat kun je doen door het beeld te optimaliseren door het te uploaden bij optimizilla.com. Daarna even het .zip bestand uitpakken en dan komt het beeld erbij te staan bij je ‘downloads’.
Stap 8. Upload naar je website
Eindelijk kun je je afbeelding uploaden naar je website!