3 manieren om foto’s op jouw website te verkleinen! (Pure Video)

Te grote afbeeldingen zijn vaak de reden voor een een trage website. Het verkleinen van foto’s op jouw website kan zorgen voor een snellere website wat weer kan zorgen voor een betere vindbaarheid. In onderstaande video leg ik 3 manieren uit om de bestandsgrootte van foto’s op jouw website te verkleinen. Lees je liever? Onder de video is een transcriptie van de video te vinden.

Transcriptie video

Afbeeldingen qua bestandsgrootte zijn een veel voorkomende oorzaak van een te trage website en juist die snelheid is nu zo’n belangrijke factor voor de vindbaarheid van je website. Hoi, ik ben Ewoud en in deze video laat ik je drie manieren zien om afbeeldingen voor op je website qua bestandsgrootte te verkleinen. Dit met als doel om de snelheid van je website te verbeteren wat weer goed is voor de vindbaarheid van je website.

Foto’s in bestandsgrootte verkleinen

Om te beginnen wil ik je sowieso adviseren om vanaf nu elke afbeelding die je gaat toevoegen aan je website te comprimeren. Voor grote afbeeldingen het liefst onder de 100 kb en voor de kleine afbeeldingen tussen de 1 en 50 kb.

Vergeet ook niet om de bestaande afbeeldingen op je website na te lopen en deze waar nodig te verkleinen. Aan het eind van deze video wil ik je nog een bonus tip meegeven met een handige methode om deze afbeeldingen op je website op te sporen.

Manier 1: Online tools

Manier 1, dat zijn de online tools. Het voordeel van online tools om je afbeeldingen te verkleinen is dat je dus niks op je eigen computer hoeft te installeren. Goede voorbeelden van online tools om je afbeeldingen te verkleinen zijn bijvoorbeeld ImageCompressor.com waarbij je dus handig afbeeldingen naartoe kunt slepen waarna deze verkleind worden. En mijn favoriet, TinyPNG.

Online tools om foto’s mee te comprimeren:

1. TinyPNG
2. ImageCompressor

Om je voorbeeldje te geven hoe zo’n online tool werkt en laat je even zien hoe je afbeeldingen verkleint met TinyPNG. Op mijn computer heb ik een aantal afbeeldingen staan die ik bijvoorbeeld graag in mijn blog zou willen gebruiken en deze hoef ik slechts alleen maar te selecteren en naar de browser met TinyPNG te slepen. Op het moment dat deze ge-upload zijn worden deze meteen gecomprimeerd en dan kan ik ze in een keer als ik wil allemaal downloaden.

Deze manier is natuurlijk heel handig maar een nadeel kan zijn is dat je bijvoorbeeld niet voldoende instelmogelijkheden hebt om bijvoorbeeld compressie verder te verhogen om je afbeelding dus nog kleiner te maken.

Manier 2: Software op je computer

Manier 2, het verkleinen van afbeeldingen met lokale software op je computer. Het grote voordeel hiervan is dat je met lokale software vaak meer instelmogelijkheden hebt om je afbeelding te verkleinen. Denk maar eens aan het instellen van de compressietechniek of de mate van compressie maar soms kun je ook andere hulp bewerkingen toepassen zoals het verkleinen of croppen van je afbeeldingen.

Het meest bekende pakket om je afbeelding te verkleinen met lokale software is natuurlijk Photoshop. Hier heb je een groot scala aan instelmogelijkheden en met name de ‘safe for web’ optie is een heel handige functie binnen Photoshop. Er is natuurlijk ook gratis software om afbeeldingen op je computer te verkleinen. Een goed voorbeeld voor Windows is bijvoorbeeld Faststone Image Viewer. Als je daar naar de website gaat dan lijkt het al een beetje gedateerd maar het is zeker weten nog een tool die veel wordt geüpdatet en ontzettend handig werkt om afbeeldingen – ook meerdere tegelijk – te verkleinen en aan te passen naar wens.

Een andere gratis tool is ImageOptim. Deze is geschikt voor zowel Mac als Windows en zelfs voor Linux is er ook versie beschikbaar en dit is wel onze favoriete tool om de gewenste verkleining te doen. ImageOptim werkt bijvoorbeeld heel makkelijk door simpelweg de afbeelding die je wilt verkleinen op je bureaublad naar het programma te slepen en deze worden meteen verkleint. Bovendien heeft ook dit programma genoeg mogelijkheden om de compressie naar wens in te stellen.

Software om foto’s mee te comprimeren:

1. Photoshop
2. ImageOptim
3. Faststone

Manier 3: Een plugin voor je CMS (WordPress / Magento)

Manier 3, een plugin voor je cms. Wil je niet altijd hoeven nadenken over het comprimeren van je afbeeldingen terwijl je lekker bezig bent met het aanvullen van je website dan is een plugin misschien wel wat voor jou want deze zorgt ervoor dat de afbeeldingen automatisch worden verkleind terwijl je ze uploadt naar je website. Nadeel is wel dat je dan wéér een plugin aan je website moet toevoegen wat natuurlijk ook weer vertragend werkt en een ander nadeel is dat natuurlijk niet elk cms de mogelijkheid heeft om dit soort plugins te installeren.

Voorbeelden van handige plugins voor WordPress zijn bijvoorbeeld de Short Pixel Image Optimizer, Optimole voor WordPress en de Tiny Compress Images plugin en voor Magento heb je bijvoorbeeld van Apptrian de Image Optimizer.

WordPress / Magento plugins om foto’s automatisch te verkleinen:

1. ShortPixel
2. Optimole WP
3. Tiny Compress
4. Apptrian Image Optimizer

Bonustip

En dan nu de bonus tip, hoe vind je nu afbeeldingen op je huidige website die te groot zijn? Om té grote afbeeldingen op je website op te sporen kun je hiervoor perfect Screaming Frog gebruiken. Deze is ook gratis beschikbaar, of in ieder geval een gratis versie is er van beschikbaar en werkt op zowel Windows als Mac.

Als je in Screaming Frog je website crawlt, en mijn collega Thijs heeft er een hele handige video over Screaming Frog gemaakt, dan kun je dus ook heel makkelijk inzicht krijgen in welke afbeeldingen er op je website te groot zijn. Wanneer je website gecrawld is ga je in Screaming Frog naar het tabblad images en deze kun je bovendien sorteren op de afbeeldingsgrootte en zo heb je heel snel inzage in welke afbeeldingen te groot zijn.

Check daarnaast ook je website met Google Pagespeed. Hiermee kun individuele pagina’s controleren en snel adviezen krijgen over welke element je qua snelheid zou moeten verbeteren en dus ook afbeeldingen.

Ik hoop in ieder geval dat je wat hebt gehad aan de drie manieren om deze afbeeldingen voor je website verkleinen en natuurlijk ook de bonus tip. Hieronder in de beschrijving vind je de links naar de besproken tools en als je vragen hebt stel ze gerust hieronder in de comments en laat ook natuurlijk weten als je zelf goede tips hebt.

Vergeet natuurlijk niet deze video weer te liken, te delen en volg ook onze video kanaal. In ieder geval hartstikke bedankt voor het kijken en tot volgende keer, doei!