Foto of afbeelding kleiner maken (van MB naar KB)?

Wil je een foto verkleinen, maar weet je niet hoe je dat moet doen? In dit artikel leg ik je uit hoe je dit zo eenvoudig mogelijk doet. Afbeeldingen zijn tegenwoordig onmisbaar op websites. Het geeft sfeer, het maakt een artikel leesbaar en het werkt ondersteunend aan wat je wilt vertellen (mits je de juiste foto's kiest). Je kunt door middel van foto's goed je eigen persoonlijkheid of diensten naar voren brengen. Ideaal! Het is superbelangrijk dat je niet uit het oog verliest dat een foto niet te groot mag zijn omdat dit de snelheid van de website in gevaar brengt. Daarom leg ik je in dit artikel uit hoe je supereenvoudig je foto's verkleint.

Let wel: dit artikel is geschreven vanuit de website en SEO-gedachte. Uiteraard kun je met dit artikel ook vooruit wanneer je wilt weten hoe je een afbeelding verkleint om deze bijvoorbeeld door te mailen.

Foto's met veel geheugen

Elke foto is anders. De één neemt meer ruimte in beslag dan de ander. Dit kan om verschillende redenen zijn.

• De kwaliteit van de foto
• Het formaat van de foto

Professionele fotografen werken met fotobestanden bestaande uit veel MB's. Dit is een voordeel omdat ze de foto's goed kunnen nabewerken. Deze foto's wil je echter niet op je site hebben ... Waarom niet? Omdat je site traag wordt van grote fotobestanden. Zorg dus dat je ze kleiner maakt. [caption id="attachment_203847" align="aligncenter" width="1024"] Zorg dat je foto's voor je website zeker onder de 1 MB houdt.[/caption]

Waarom een foto verkleinen?

In alle websitesystemen (WordPress, Magento, Joomla enzovoort) geldt dat je afbeeldingen zeker niet groter mogen zijn dan 1 MB.  Hoe groter het fotobestand hoe trager de webpagina laadt. En een webpagina die langzaam opent kost je bezoekers. Dit geldt zeker voor bezoekers op mobiele telefoons. Stel je voor dat je investeert in mooie content en bezoekers weten je website ook te vinden. Maar ze haken vervolgens af omdat je website zo traag is. Dat is eeuwig zonde.

Google Speedtest

Het is voor veel websitebewerkers nog onduidelijk wat de snelheid van je website betekent. Google gebruikt de snelheid van je website als rankingfactor. Ze hebben zich in de afgelopen jaren sterk gemaakt voor een veilig en snel internet.

Kortom: Naast content zijn veiligheid en snelheid onderdeel geworden van de lijst (met meer dan 200 factoren) die bepalen of je website hoog scoort in Google.

Het einddoel van Google is altijd om het best mogelijke zoekresultaat te geven aan een bezoeker. De reden is simpel: alleen dan blijven bezoekers Google gebruiken als zoekmachine. Een trage website is niet het best mogelijke zoekresultaat. Daarom zal Google snelle websites een hogere ranking geven dan langzame websites. [caption id="attachment_203848" align="aligncenter" width="1024"] Met de Google Speedtest krijg je een indicatie van de snelheid van je website[/caption]

Hoe kan ik het testen?

Je kunt de snelheid van je pagina testen via tools die Google ter beschikking stelt.

• Test my site with Google
• Page Speed Insight

Met Page Speed Insight krijg je een mooi lijstje met statistieken van de desbetreffende pagina. Deze tool test niet heel de website, enkel de pagina die je invoert. Met Test my site with Google krijg je een percentage te zien van het aantal mensen dat tijdens het laden de website heeft verlaten. Een derde site die handige informatie oplevert omtrent de complete snelheid van je website is Pingdom Tools.

Wel heel belangrijk om te beseffen: deze tools zijn ondersteunend. Het is niet per definitie voor 100% de waarheid aangezien er altijd nuances zijn die te maken hebben met je totale website. Je kunt bijvoorbeeld al je foto's wel verkleinen en toch een slechte score hebben. Dit kan komen doordat je site code technisch vervuild is. Trek dus geen voorbarige conclusies.

Hoe verklein je foto's?

Foto's kun je op verschillende manier verkleinen. Bijvoorbeeld via Photoshop of via externe websites zoals TinyPNG.

Photoshop

Ben je handig met Photoshop, dan kun je eenvoudig je afbeeldingen opslaan voor het web. Een foto wordt automatisch opgeslagen in een kleiner formaat.

TinyPNG

Een andere ideale website die ik vaak gebruik, is TinyPNG. In onderstaand stappenplan heb ik voor je beschreven hoe deze site werkt.

Stap 1 - TinyPNG

Ga naar de website van TinyPNG: www.tinypng.com

Stap 2 - Foto toevoegen

Je maakt logischerwijs gebruik van TinyPNG wanneer een afbeeldingsbestand te groot is om te gebruiken op je website. Deze afbeelding wil je immers verkleinen. Je kunt de afbeelding alleen toevoegen als deze 5 MB of kleiner is. Om de afbeelding die te groot is toe te voegen, druk je op 'Drop your .png or .jpg files here!'

Stap 3 - Selecteer je foto

Zoek de foto die je wilt verkleinen en druk op 'openen'. De foto die je als voorbeeld in onderstaande afbeelding ziet had vóórdat ik hem heb verkleind een grootte van 48,5 KB (dat is geen grote afbeelding, maar ik laat je enkel even zien wat de tool voor je doet)

Stap 4 - Je foto wordt verkleind

Je foto wordt nu zoveel mogelijk verkleind door TinyPNG.

Stap 5 - Download de foto

Je ziet het: TinyPng heeft de foto kleiner gemaakt. Dit bespaart mij 9 KB op de foto. Je kunt de foto nu opnieuw downloaden.  

Stap 6 - Je foto is verkleind!

Perfect! Je foto is verkleind. Deze staat hoogstwaarschijnlijk in de map downloads. Nu kun je deze uploaden naar je website.

Bestandsnaam

Voor de optimalisatie binnen Google is het belangrijk dat je foto de juiste bestandsnaam heeft. Dit is de naam die je de foto geeft wanneer je deze opslaat op je computer. Check of het klopt en pas het anders aan door met de rechtermuisknop op de foto te klikken en vervolgens op 'naam wijzigen'.

Alt-Tag

Ben je ook al op hoogte van wat een Alt-Tag is? Dit is namelijk erg van belang wanneer je de foto in je website plaatst! Voor een uitgebreide uitleg over bestandsnamen en Alt-Tags verwijs ik je naar dit artikel: Stappenplan: Zo optimaliseer je afbeeldingen voor Google [caption id="attachment_203849" align="aligncenter" width="1024"] Zorg dat je wel de juiste foto's gebruikt voor je website.[/caption]

Waar haal ik goede foto's vandaan voor mijn website?

Op internet staan duizenden foto's. Deze mag je echter niet allemaal gebruiken voor je website. Op de meeste foto’s zit copyright. Ook al staat een afbeelding op internet, je mag deze niet zomaar gebruiken - tenzij dit expliciet staat aangegeven.

Ik waarschuw je hartgrondig: pluk foto's niet zomaar van internet. Ik ken een aantal voorbeelden van websites die hiermee in de problemen zijn gekomen en hier fikse boetes voor betaald hebben.

Er zijn een aantal websites waar je gratis afbeeldingen vandaan kunt halen. Een foto die vrijgegeven is voor publiek gebruik heeft een zogenaamde CC0 licentie. In het kort is een CC0 licentie een licentie waarmee de maker van een foto, tekst of ander werk aangeeft dat hij of zij toestemming geeft om zijn/haar werk voor iedereen toegankelijk te maken. In feite doen ze afstand van het recht op de foto’s. Een aantal sites waar je gratis afbeeldingen kunt downloaden:

• Unsplash
• Pixabay
• Pexels

Wil je exact weten hoe het zit met auteursrecht en copyright op foto's? Op de site van Charlotte's Law vind je hier alles over.

Superhandige tip

Wil je gezeur omtrent foto’s helemaal uitsluiten en wel foto’s gebruiken van sites als Pexels en Unsplash dan raad ik je aan om van elke foto die je maakt een screenshot te maken van de foto plus de vermelding dat je deze gratis mag downloaden. Dit screenshot ziet eruit zoals hieronder.

Zorg dat je de URL van de pagina in beeld brengt + het deel waarin staat dat je dit vrij mag downloaden. Maak een aparte map op je computer waarin je de screenshots neerzet. Ik weet dat het even extra werk is. Maar het zou je op lange termijn gezeur kunnen besparen.

Stockfoto's

Er bestaan ook website's waar je betaalde foto's vindt. Deze websites hebben een enorme database met foto's. Voordeel is dat je 'andere' foto's op je site krijgt. Foto's van sites als Pexels e.d. zie je overal verschijnen omdat ze immers gratis zijn. Voorbeelden van sites met betaalde stockfoto's zijn: Voorbeelden van websites:

• Shutterstock
• 123RF
• Dreamstime
• Fotalia
• Deposit Foto’s
• iStockphoto
• Getty Images

Nog méér tips

Ik heb een kennisbank vol artikelen over de basis van SEO voor je klaarstaan:

• Links op je website, onmisbaar voor vindbaarheid
• Heading tags en SEO
• Alles over de Google Titel en de Metadescription

Gratis SEO Checklist

Ik heb een gratis SEO Checklist voor je klaarstaan waarmee je je blogs/website van A tot Z optimaliseert. Klik op de afbeelding hieronder of voorgaande link om deze te downloaden.