#5 - Laad je afbeeldingen sneller laden

Automatisch uitgeschreven uit de audio. Er kunnen kleine fouten in staan.

0:00 De Ideale Website, de podcast waar je inspiratie krijgt en leert hoe ook jij met behulp van online marketing een website kunt maken die voor je werkt. Hey, leuk dat je luistert naar aflevering 5 van De Ideale Website. Mijn naam is Sven Kersten en vandaag gaan we jouw website voor een deel optimaliseren. Kijk, het deel dat we vandaag gaan aanpakken, dat wordt vaak vergeten. Althans, je ziet ze wel, maar ze zijn vaak niet geoptimaliseerd.

0:35 Meestal fysiek te groot en niet op maat gemaakt per beeldschermgrootte. Denk bijvoorbeeld aan een smartphone, een tablet, een laptop of een beeldscherm zoals die op je bureau staat. Dan heb ik het natuurlijk over de afbeeldingen op je eigen website. Laat je bezoeker niet langer wachten tot je pagina klaar is met laden. Duurt het laden van je pagina namelijk langer dan twee seconden, dan haken je bezoekers direct af. Je wilt de foto’s die je hebt laten maken van je eigen onderneming en van jezelf zo snel mogelijk op je website zetten, dat snap ik.

1:10 Je logt in op je website, je upload de foto’s of je stuurt ze naar je webdesigner en vraagt of hij of zij dit voor je wil doen. De foto’s worden op je website geplaatst en je bent klaar. Dit lijkt makkelijk, maar dan ben je er nog niet. Je foto’s die zijn zo groot dat het laden ervan wel zes seconden duurt. Je bezoekers die wachten niet zo lang en die hebben je pagina al weggeklikt voordat deze is geladen. Google geeft je strafpunten en je schuift langzamer naar onder in de zoekresultaten. Je krijgt minder bezoekers, minder klanten en jij vraagt jezelf af wat gaat er nou niet goed.

1:44 Die foto’s die ik heb laten maken, die moeten toch een vertrouwen uitstralen naar mijn bezoekers. Deze afbeeldingen die moet je eerst optimaliseren. Wist je dat je jouw afbeeldingen kunt optimaliseren door de kleuren die het menselijk oog toch niet kunnen zien, dat je die kleuren, dat je die kan verwijderen? En daarnaast bevat jouw afbeelding ook een hele hoop technische data die op het internet helemaal niet nodig is. Denk bijvoorbeeld aan de datum en tijd. Dat je foto is genomen, maar ook wat voor type camera de foto heeft gemaakt en misschien zelfs ook de geografische locatie op onze aardbol.

2:25 Als je deze data dus verwijderd, dan wordt jouw afbeelding kleiner en wordt je afbeelding veel sneller geladen. Er zijn meerdere tools die je kunt gebruiken om dit ook deels te automatiseren. Ga bijvoorbeeld aan de slag met ShortPixel. De eerste 100 afbeeldingen die zijn dan gratis. Je installeert de plugin op je website. Je loopt de instellingen een beetje na. Die staan standaard over het algemeen wel goed. Je kan ook een maximale grote instellen dat de afbeelding moet worden.

2:57 Stel dat jij een hele grote, dikke, vette foto van jouw spiegelreflexcamera of die een fotograaf heeft gemaakt. Stel dat jij die gaat uploaden. Ja, dan is die echt veel te groot. Dan ga je misschien wel over de 6000 pixels heen. Terwijl een gemiddelde monitor 1920 pixels breed is. Full HD. Tegenwoordig heb je natuurlijk ook 4K monitoren. Die zijn allemaal een stukje groter. Maar ik zou zelf even kijken in je eigen Google Analytics, in je resultaten, wat jouw doelgroep nu voor een resolutie gebruikt.

3:28 Je zult zien dat het over het algemeen veel meer smartphones zijn. Misschien een tablet. Maar dat de computers over het algemeen een beetje wegvallen. Wat ik altijd aanraad is om de maximale grootte in te stellen op 1920 pixels. Soms kom je ook weg met 1600. Ietsje kleiner. Je foto wordt dan misschien ietsje vergroot. Maar het menselijk oog ziet dat niet. Heb jij nu een onderneming, zoals een evenementenbureau. Of je bent zelf fotograaf. Of misschien zijn het wel foto’s van gerechten die helemaal gevoetprept zijn.

3:58 En moet die kwaliteiten echt uitspatten. En je wilt hem ook echt beeldschermvullend laten zien. Ja, dan zou ik wel echt zeggen doe minimaal 1920 pixels. Zodat je die full HD kwaliteit ook echt kan laten zien. Als je deze instellingen dus gedaan hebt. Dan kun je vervolgens in één grote bulk al jouw bestaande afbeeldingen in één keer laten optimaliseren. ShortPixel handelt alles voor je af. Die technische data die wordt verwijderd. Kleuren worden verwijderd. En jouw afbeeldingen die zijn geoptimaliseerd.

4:30 Die zijn fysiek kleiner geworden. En over het algemeen kun je daar zeker wel 50% mee besparen. Nou ja, als jouw pagina 60 seconden overduurt. Omdat jouw afbeeldingen echt 6 seconden nodig hebben. Nou, dan zitten we al op 3. Het werkt niet helemaal zo. Maar dan zijn we in ieder geval al een stukje sneller. Wat je ook kunt doen is betalen voor ShortPixel. Want de gratis variant, daar krijg je 100 afbeeldingen per maand gratis. Maar als je ervoor gaat betalen kun je bijvoorbeeld voor 5 dollar per maand 5000 afbeeldingen iedere maand weer automatisch optimaliseren.

5:03 Je kunt ook een eenmalig pakketje aanschaffen. Dat betekent dat je bijvoorbeeld 10.000 afbeeldingen kan optimaliseren. Want als jij niet wekelijks of maandelijks die 5000 afbeeldingen erop zet. Ja, dan waarom zou je dan die 5 dollar per maand gaan betalen? Door die kleuren. Ja, die kleuren die het menselijk oog niet kunnen zien. Die worden dus verwijderd. Nou, daardoor wordt die afbeelding minder groot van formaat. Want wij kunnen ze toch niet zien. Nou, ideaal toch? Oké, al je afbeeldingen zijn nu geoptimaliseerd.

5:37 Jouw website die is nu een stuk sneller en we zijn klaar voor vandaag. Nee, we zijn er nog lang niet. Jouw afbeeldingen op die ene pagina die zijn dan wel geoptimaliseerd. Maar fysiek zijn ze nog veel te groot. Echt, ik bedoel de afmetingen. Dat is nog niet eens de aantal kb’s. Ik hoop zeker geen mb’s. Maar de afmetingen zijn veel te groot. Je opent de afbeelding op je computer en je ziet dat deze schermvullend wordt weergegeven. En je afbeelding die ziet er ook echt prachtig uit. Maar op jouw pagina hoeft het waarschijnlijk maar een hele kleine afbeelding te zijn.

6:08 Naast een stukje begeleidend tekst bijvoorbeeld. Meestal is dat maar 20% van je scherm. Dus dat betekent dat je 80% voor niks op je website hebt staan. Nou, zorg er dus voor dat je je afbeelding fysiek verkleint op je website en niet kleiner gaat schalen. Nou, deze afbeeldingen fysiek verkleinen, dat kun je op meerdere manieren doen. Bijvoorbeeld handmatig in je afbeelding bewerkt pakket. Ik noem er even vier op, misschien vijf. Adobe Photoshop, Adobe Illustrator, Affinity Photo of Affinity Designer.

6:40 Ja, misschien dus wel Paint. Dat laatste, dat hoop ik niet. Ja, WordPress die kent zelf ook zijn trucjes. Zo kun je, als je je standaard formaten voor je ideale website hebt vastgesteld, ook formaten invoeren in WordPress zelf. Ik bedoel, log eens in, op de achterkant van je website. In je WordPress admin. Ga naar instellingen. Nou, dan heb je een knopje media. Klik daarop en je kunt daar drie verschillende soorten formaten opgeven. Je thumbnail. Nou, die wordt gekropt, zoals dat heet.

7:12 Dus dat wil zeggen, de afmetingen die je daar opgeeft, jouw afbeelding wordt echt zodanig bijgesneden dat die precies in die afmetingen past. Maak je hier dus een hele smalle horizontale afmeting van. Bijvoorbeeld 8000 pixels breed bij 200 pixels hoog. Ja, dan zal het betekenen dat aan de bovenkant en onderkant van je foto heel veel wordt weggesneden. Omdat je anders aan de zijkant zwarte balken zou krijgen. Ik hoop dat dat een beetje duidelijk is zo. Twee, je kan ook een gemiddelde afmeting aangeven.

7:43 Dat zijn bijvoorbeeld voor de foto’s die je naast je teksten neerzet. En drie, dat is de grote afbeelding. Nou, dat is eigenlijk de afbeelding die ik zou gebruiken om je afbeelding wat meer, ja, of beeldvullend te zetten. Of in ieder geval zo breed als dat je de rij wilt hebben. Want de vierde optie, die zie je niet. Maar dat is eigenlijk je originele afbeelding. En dat is eigenlijk de maximale grootte. Maar als je die maximale grootte dus heeft ingesteld in jouw shortpixel plugin, dan zal het betekenen dat die noot groter wordt dan dat.

8:13 Nou, je hebt dus eigenlijk op dit moment op deze manier vier maten om mee te werken. Je thumbnail, je gemiddelde afbeelding, je grote afbeelding en je originele afbeelding. Nou, de thumbnail, die gebruik je hoofdzakelijk voor een overzicht van al je blogs bijvoorbeeld, waar je jouw afbeelding in hebt gezet, zodat het duidelijk is waar jouw blog over gaat. Nou, op deze manier kies je het juiste formaat tijdens het invullen van je content in de pagina’s. Ja, en dan heb je dus al een hele grote slag gemaakt.

8:45 Wat ik dan alleen zelf persoonlijk zo jammer vind, is dat het niet altijd de meest ideale oplossing is voor onze tablet en smartphone bezoekers. Deze apparaten worden meestal verticaal vastgehouden. Dus dat betekent dat wanneer je website responsive is, dus dat wil zeggen dat jouw website automatisch wordt aangepast aan verschillende apparaten. Dus op jouw computerbeeldscherm zie je alles naast elkaar. Nou, een website bestaat tegenwoordig uit allemaal blokken. Dat betekent dat als je op jouw telefoon gaat kijken, dat het blokje tekst en een foto, dat je over het algemeen de tekst bovenaan hebt staan en dan de foto eronder.

9:20 Maar dat kan natuurlijk ook andersom, dat hangt een beetje van je webdesigner af. Op deze manier is je content en afbeeldingen, ja, die komen dus onder elkaar. Aan zich is dat niet een probleem. Maar neem nu bijvoorbeeld een iPhone 11 Pro. Ja, die telt horizontaal in de verticale stand. Volg je hem nog, dus als je hem gewoon vasthoudt in één hand, dan heb je dus 1125 pixels breed. En de grotere iPhone versie, die heeft zelfs 1242 pixels breed. Dus heb jij nu een gemiddelde afmeting gekozen met een grote van bijvoorbeeld 600 pixels breed, ja, dan zal de afbeelding op dit soort smartphones kleiner worden weergegeven.

9:59 De helft van het scherm. Terwijl het op jouw monitor die op je bureau staat, het ziet het er goed uit. Maar kijk je dat dus op een telefoon, dan denk je, wat is die klein? Nou, om dit probleem op te lossen, zul je een externe dienst moeten gebruiken. Eén die tussen je website en je bezoekers gaat zitten en je afbeelding per apparaat on the fly aanpast. Dit werkt als volgt. Je bezoeker komt op je website met zijn smartphone. De beeldschermgrootte wordt doorgestuurd naar deze externe dienst. Deze dienst verkleint de afbeelding on the fly naar het beste formaat van de bezoeker en houdt er zelfs rekening mee of het een bezoeker betreft met een zogenoemde retina-resolutie die Apple gebruikt om altijd een goede kwaliteit te laten zien.

10:41 Opent een andere bezoeker jouw website op een laptop, dan wordt de afbeelding weer in een ander formaat aangepast, zodat iedereen op maat wordt bediend zonder dat jij hier meer iets voor hoeft te doen. Ideaal! Het voordeel hiervan is dat je dan ook direct gebruik maakt van een CDN, dat is een Content Delivery Network. Dat betekent dat jouw afbeeldingen, waar dan ook de wereld, supersnel worden geladen. Je krijgt hier ook bonuspunten voor van zoekmachines als Google. Nu bied ik zelf een dienst als dit aan voor mijn klanten, maar je kunt ook terecht bij bijvoorbeeld ShortPixel.

11:16 Met dezelfde credits die je daar aan kunt schaffen, kun je ook gebruik maken van de plugin ShortPixel Adaptive Images. Je installeert deze plugin, je vult je API-code in die je gekregen hebt tijdens het aanschaffen van het abonnement en de rest gaat vanzelf. Kijk, nu heb je echt een snellere website. Je afbeeldingen worden nu automatisch geoptimaliseerd en ook fysiek verkleind voor iedere bezoeker op maat, waardoor je pagina gewoon aanzienlijk sneller laat. Wil je zelf meten of je website nu echt sneller is geworden?

11:47 Meet dan eerst de snelheid van je website via gtmetrics.com voordat je je afbeelding optimaliseert. Ik heb een linkje geplaatst onder deze podcast, zodat je het makkelijk kan vinden. En als je dat vervolgens nog een keer doet, als je je optimalisatie hebt uitgevoerd, dan zul je echt zien dat het verschil maakt. Oké, resumé. Je weet nu dat je niet zomaar je afbeeldingen moet uploaden naar je website. Dat je je afbeeldingen moet optimaliseren door technische data te verwijderen.

12:20 Kleuren die je toch niet kan zien, die kun je eruit filteren. In WordPress kun je verschillende formaten instellen, zodat je afbeeldingen tijdens het uploaden automatisch in meerdere maten wordt verkleind. Dat er ook externe diensten bestaan, die je afbeeldingen per bezoeker automatisch op maat verkleinen. Dit was hem weer, aflevering 5 van de ideale website. Ik hoop dat je nu beseft dat je je afbeeldingen niet zomaar moet uploaden naar je website, maar dat je er ook echt wat mee moet doen. Dat je ze moet optimaliseren, dat je ze moet verkleinen.

12:52 En dat je echt alleen op die manier jouw website sneller kan maken. Bedankt voor het luisteren naar deze aflevering. En ik hoop dat je je website op deze manier hebt kunnen versnellen en hier ook meer conversies hebt kunnen genereren. Ik zie je graag weer terug in een volgende aflevering van De Ideale Website. Onwijs leuk dat je hebt geluisterd naar deze podcast. Ik zou het ook onwijs leuk vinden als je deze podcast zou willen delen op je eigen social media, zodat ook anderen wat hebben aan de kennis die ik net met je heb gedeeld.

13:26 Daarnaast zou ik het ook enorm waarderen als je de tijd en moeite zou willen nemen om een review achter te laten onder deze podcast. Bied jouw app deze mogelijkheid niet? Klik dan op de recensielink onderin de omschrijving van deze podcast en schrijf iets leuks. Voor nu bedankt voor je tijd en je hoort mij weer in de volgende podcast De Ideale Website.