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 1. Gebruik Canva 

Canva is een heel fijn programma om je beelden in te bewerken. Het is makkelijk in gebruik en vooral een groot voordeel, het is gratis. Maak een account aan en ga aan de slag.

Stap 2. Maak een ontwerp

afbeelding_foto_voor_website

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. )

afbeelding_foto_website_optimaal

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:

  1. Klik op Uploads
  2. Upload jouw afbeelding
  3. Klik op de afbeelding dan komt deze in je canvas rechts.

optimale foto grootte web

Vervolgens kun je de afbeelding helemaal gaan opmaken.

Stap 5. Geef je afbeelding de juiste bestandsnaam

afbeelding_foto_optimaal_website

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.

afbeelding_foto_fomaat_website_opt

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’.

optimize_for_web_canva

Stap 8. Upload naar je website

Eindelijk kun je je afbeelding uploaden naar je website!

WordPress website + cursus

wordpress_website_amsterdam_cursus

Een WordPress website die je zelf kunt bijhouden doordat je tijdens 2 x 2 uur leert hoe je de belangrijkste aanpassingen moet doen.

Pin It on Pinterest

Share This