Foto’s aanpassen om op je website te plaatsen

Een website heeft beeld nodig. Door de tekst op je site te combineren met beeld wordt deze leesbaarder. Ook Google hecht daar waarde aan. Maar naast de keuze welk beeld je gaat gebruiken moet je beeld ook aanpassen, zodat het de laadtijd van je website niet trager maakt. 

Beeldformaat aanpassen

Als je beeld koopt op een stock site, laat maken of zelf maakt, is het beeld vaak groot van formaat. Nadat je het beeld hebt uitgekozen, moet deze dus op het juiste formaat gemaakt worden. 

Hoe je het beeld gaat gebruiken op je site geeft aan welk formaat goed is.

Full width

Wordt het beeld full width (zo breed als het browserscherm) weergegeven, dan is een afmeting van 1920 px breed goed. Is het beeld smaller, dan zal deze op grote schermen uitgerekt en van mindere kwaliteit worden. 

In content met lightbox

Gebruik je het beeld in de content (de tekst op een pagina of bericht) en wil je het vergroten met een lightbox dan maak je het 1000 of 1200 px. Je kan zelf testen welk formaat je goed vind werken. 

1200 px
1000 px

In content zonder vergroting

Gebruik je het beeld in de tekst en hoeft het niet te vergroten? Dan is 800 px breed voldoende.

Waarom 800px? Voor de laadtijd is het het beste het beeld zo groot te maken als dat het getoond wordt op de site. Maar omdat de site responsive is, is dat vaak niet overal hetzelfde. 

De content van de site is vaak opgebouwd uit kolommen. Als het browserscherm kleiner wordt komen deze kolommen onder elkaar te staan. Dat gebeurt meestal rond 768 px breed. De kolom wordt dan 100% breed weergegeven en de content daarin dus ook.

Het beeld hierboven zal dan ook op schermen kleiner dan 768 px  100% breed worden weergegeven. Is het beeld maar 400 px breed, dan zal deze uitgerekt en vaag worden. Vandaar het advies om beelden minstens 800 px breed te maken. 

Afbeeldingsgrootte aanpassen

Naast dat het beeld qua formaat aangepast moet worden, moet ook de grootte van het bestand verkleind worden. Dit betekent dat je het procentueel moet opslaan om het gewicht zo klein mogelijk te maken. Dit kan met photoshop of de gratis online variant pixlr.com. Hieronder een uitleg hoe je een beeld aanpast in pixlr.

Handleiding afbeeldingsgrootte aanpassen met Pixlr

Open https://pixlr.com/editor/ in je browser. Om het programma te kunnen gebruiken moet flash geïnstalleerd zijn. 

open de afbeelding die je op je website wilt gebruiken door op Open afbeelding van computer of linksboven op  Bestand > Open afbeelding te klikken.

Om de afmeting van het beeld aan te passen klik je op Beeld > afbeeldingsgrootte. In het venster dat opent, kun je de juiste breedtemaat invoeren. De hoogte wordt in verhouding aangepast. 

Beeld uitsnijden

Het is ook mogelijk een beeld op het juiste formaat bij te snijden. Dit doe je door op het icoontje Uitsnij gereedschap te klikken. 

In de balk bovenaan komen de eigenschappen van dat gereedschap te staan. Kies Outputgrootte om de juiste verhouding in te voeren. Met je muis maak je de selectie op het beeld. Klik op de afbeelding om de selectie te bevestigen. 

Beeld verkleind opslaan

Klik op Bestand > Bewaren om het beeld op te slaan. 

Boven de blauwe knop zie je de grootte van het bestand staan. Voor beeld in de content moet dit max 100 kb zijn. Is het een achtergrondbeeld of een full-width beeld dan kan je tot 300 kb gaan. 

Dit pas je aan door de kwaliteit te verminderen. Ga niet te laag en kijk goed hoe het beeld eruit ziet. 

Geef je beeld goede naam

Als je het beeld opslaat, geef het dan meteen een goede naam. Soms zie je de naam van een afbeelding (als tooltip als je met je muis eroverheen gaat). Fijn als daar het onderwerp van het beeld staat, en niet IMG_9808_1.jpg. 

Maar ook Google hecht waarde aan de naam van het beeld. Geef het dus een relevante naam met het liefst een zoekwoord erin. 

Verder:

  • verander spaties in koppeltekens –
  • gebruik geen underscores, hoofdletters, onnodige tekens of speciale tekens zoals é. 
  • gebruik maximaal 3 of 4 woorden.

Nu kan je het beeld uploaden en invoegen op de website. Zo blijft je website snel en goed voor Google. 

Benieuwd of we wat voor je kunnen betekenen?

Misschien ook interessant

Cookies en de AVG

De AVG wet is bijna in werking en een onderdeel daarvan is het vermelden van de cookies die je website plaatst. Omdat dit de privacy aan kan tasten van een persoon moet je eerst akkoord krijgen voordat je bepaalde cookies mag plaatsten.

Lees meer »

Is je website klaar voor de AVG?

Hoe ga jij om met persoonlijke gegevens van je klanten? Vanaf 25 mei 2018 is de nieuwe Europese privacywet de Algemene Verordening Gegevensbescherming (AVG) van toepassing waar dit soort zaken in geregeld worden.

Lees meer »