Afbeeldingen optimaliseren – Je website sneller maken

Afbeelding_optimaliseren_CheckitMedia-1600

Afbeeldingen optimaliseren

Je website sneller maken door het optimaliseren (verkleinen van foto’s/screenshots/images)

Ik zie een groot deel van websites ook die gemaakt zijn door bekende webdesign bureau’s die soms nog traag laden. Dit kan komen door meerdere factoren ik zal er een paar opnoemen maar ik ga je uitleggen hoe je afbeeldingen kunt verbeteren zodat je website al een stuk sneller laad.

Factoren:

01)  Zorg voor goede webhosting.

02)  Zorg voor een goed thema (gratis thema’s of hele onbekende thema’s zitten vaak slecht in elkaar en zijn dus sloom en ook niet goed voor je seo)

03)  Optimaliseerd je afbeeldingen (smush,verkleinen naar de grote die je nodig hebt en verkleinen in kbs)

04)  Pak liever een jpg dan een png want jpg zijn vaak al kleiner in kbs, png is handig als de achtergrond transparant moet zijn voor bv een logo.

Bovenstaande zijn een aantal belangrijke punten, zorg je hiervoor dan kom je al een heel eind.

 

Hoe pak je het aan?

Stap 1:

Ten eerste ga je kijken welke grote je echt nodig hebt voor je afbeelding. Wil je een afbeelding op je website plaatsen en stel je hebt genoeg aan 250×250 en je afbeelding is 1920×514 verklein deze dan bijvoorbeeld in photoshop. Vaak kun je niet precies de juiste afmeting krijgen omdat je dan de afbeelding als je het op 250×250 zet uittrekt of inkrimpt en dit ziet er dan niet mooi uit, maar als je er een stuk dichter in de buurt komt dan scheelt dit al een hele hoop.

 

Afbeelding gecropt naar 250×250:

Afbeelding_optimaliseren_CheckitMedia-250

Zoals je ziet niet mooi. Verklein de afbeelding iets zodat het wel wat kleiner wordt in afmeting en vaak kun je met een builder zoals visual composer ook een hele hoop doen zodat je het resultaat krijgt dat je wilt.

 

Stap 2:

Zodra je de afbeelding iets verkleint heb ga je naar:  Tinypng dit wijst zich vanzelf lijkt mij maar om even snel er door heen te lopen je drukt op de knop bovenaan naast de panda (drop your png of jpg files hier) je zoekt de afbeelding op je computer op en dan klik je deze aan. Maximaal een afbeelding van 5 mb groot en maximaal 20 afbeeldingen tegelijk. Als je er meer doet kun je het allemaal tegelijk downloaden het komt dan in een zip file tinyfied genaamd. Maar je kunt ze ook apart downloaden achter de afbeelding staat downloaden.

Je zult zien de kwaliteit en de grote van de afbeelding is hetzelfde gebleven maar de kbs/mbs zijn een stuk minder geworden.

Screenshot - 11-4-2017 , 10_09_59

De afbeelding hierboven heb ik verkleint in de orginele grote van 1920×514 deze is van 962,7 kb naar 273,9 kb verkleint dus een verkleining van 72%!

 

Stap 3:

Laatste stap is WP Smush dit is een plugin voor WordPress die afbeeldingen nog meer verkleint je hoeft deze alleen maar te installeren en dan zullen alle afbeeldingen die je uploadt automatisch worden verkleint zullen we maar zeggen. Voor de meeste mensen is de gratis versie prima, je kunt tot een bepaalde hoeveelheid afbeeldingen tegelijk smushen en daarna moet je het 1 voor 1 doen maar dat zal niet zon probleem zijn neem ik aan. Let wel op dat je het tabblad wel geopend laat anders stopt het programma.

 

Dit zijn eigenlijk de belangrijkste stappen nu is je afbeelding dus verkleint in grote en in kbs/mb dus je website zal een stuk sneller laden. Je ziet dus afbeeldingen optimaliseren loont!

Ik zeg doe er je voordeel mee!