Zelf een WordPress back-up maken

Zelf een WordPress back-up maken

“Hoe kan ik zelf een back-up maken van mijn WordPress website?”

Je hebt het vast al vaak gelezen, dat het heel belangrijk is om regelmatig een back-up te maken van je website. In dit artikel leg ik je uit waarom je dit advies maar beter niet negeert en hoe je zelf een WordPress back-up kan maken. Laten we beginnen!

Waarom zelf een WordPress back-up maken?

Veel mensen gaan er van uit dat het hen niet zal overkomen, maar er kan altijd wat misgaan met je website. Het kan zijn dat er iets misloopt bij het updaten van je site, dat er problemen bij je hostingprovider zijn of dat er op je site ingebroken wordt door een hacker. Op zulke momenten is het handig om een actuele back-up van je WordPress site achter de hand te hebben. 

Als je een goede hostingprovider hebt, dan zorgt deze normaal gezien zelf voor regelmatige back-ups. Het nadeel is echter dat je zelf weinig invloed hebt op wanneer en hoe vaak er een back-up wordt gemaakt. Bovendien wordt er vaak een extra kost aangerekend voor het terugzetten van een back-up. 

Zelf een back-up maken biedt een aantal voordelen. Je weet zeker dat je een recente back-up hebt en je hoeft niet te wachten op je hostingprovider als er iets mis gaat.

Bovendien is het bij het uitvoeren van updates van je website, altijd verstandig om eerst een back-up te maken omdat het altijd een keer fout kan gaan.

Waar moet je een back-up van maken?

Het is van cruciaal belang om zowel een back-up van de WordPress bestanden op de server te maken én een back-up van je WordPress database. In de database vind je de inhoud van je website zoals de berichten en pagina’s, maar ook de instellingen van de website. De afbeeldingen en andere mediabestanden staan niet in de database. Deze staan in de uploads-map op de webserver. Voor het herstellen van de website is daarom een back-up van zowel de database als de bestanden nodig.

Hoe maak je zelf een WordPress back-up?

Je hebt een aantal opties voor het maken van een back-up. Je kunt een gratis of betalende plugin gebruiken of je maakt handmatig een back-up via FTP. Het handmatig uitvoeren van een back-up vereist wat meer technische kennis, vandaar dat we ons in dit artikel focussen op het gebruik van een plugin. 

Een aantal populaire plugins voor het maken van back-ups zijn:

Een WordPress back-up maken met UpdraftPlus

UpdraftPlus is erg populair en laat je back-ups maken van alle bestanden en de database van je WordPress website. Indien nodig kun je de back-ups ook herstellen met behulp van deze plugin.

Het is verder geen enkel probleem om de back-ups op te slaan in de cloud of op de server en je kunt de back-up ook nog naar jezelf mailen. Bovendien is het ook mogelijk om in te stellen wanneer er back-ups gemaakt moeten worden. Dit kan dagelijks, wekelijks, maandelijks of zelfs om de 4 uur zijn.

 

Stap 1: Installeer en activeer UpdraftPlus

Om de plugin te installeren, ga je in WordPress naar Plugins > Nieuwe plugin. Zoek nu naar “UpdraftPlus” en installeer de volgende plugin:

 

Klik op Nu installeren en vervolgens op Activeren om de plugin te activeren.

Lees ook: Hoe installeer je WordPress plugins?

Stap 2: UpdraftPlus instellingen

Klik vervolgens op Press here to start! om naar de instellingen van de plugin te gaan:

 

De instellingen kan je ook bereiken via Instellingen > UpdraftPlus-backups.

Ga als eerste naar het tabblad “Settings“. Hier kun je verschillende zaken instellen, zoals een backup-schema.

Je kan hier kiezen voor een dagelijkse, wekelijkse of maandelijkse back-up voor zowel je bestanden als je database. Daarnaast kun je aangeven hoe veel back-ups je (maximaal)  wilt bewaren. De hoeveelheid opslagruimte die je hebt, speelt hierin natuurlijk een belangrijke rol. 

In dit voorbeeld heb je een back-up van de laatste vier weken.

Verder op deze pagina, kun je aangeven welke bestanden er moeten worden meegenomen in je bestanden-back-up. De standaard instellingen zijn hier prima. Vergeet zeker niet na te kijken of Uploads is aangevinkt. Dit bevat nl. al je bestanden in de mediabibliotheek.

 

Je vindt bij de instellingen ook nog een lijst met alle diensten die je kunt gebruiken voor automatische back-ups. Als je een back-up maakt is het verstandig deze niet bij je website op te slaan. Gaat er iets mis bij je hostingprovider, dan kan het gebeuren dat je ook de back-up kwijt bent. Het is beter de back-up te bewaren op een andere locatie zoals bijvoorbeeld Dropbox of Google Drive. In dit voorbeeld kies ik voor Google Drive.

Wanneer je een gratis Gmail-account hebt, beschik je ook automatisch over 15 GB opslagruimte op Google Drive. Dat is meestal voldoende voor één of meerdere back-ups. Heb je meer opslagruimte nodig, dan kan je tegen betaling je account upgraden.

Klik op het Google Drive-logo, scroll helemaal naar beneden en klik op Save Changes. Een nieuw venster opent zich nu, met daarin een link naar Google Drive. Klik op deze link om naar Google Drive te gaan. Als je meer dan één Google-account hebt selecteer je eerst welk account je wilt gebruiken. Als je nog niet ingelogd bent, dien je dat eerst te doen. Vervolgens zal Google je vragen of je UpdraftPlus toegang wilt geven tot Google Drive. Klik op Toestaan.

Er opent zich nu een nieuw scherm. Klik hier op Complete setup om terug te keren naar je WordPress dashboard. Wanneer je hebt gekozen voor automatische back-ups, zal UpdraftPlus meteen beginnen met het maken van een eerste back-up. Als dit niet het geval is, dan kun je ook handmatig een back-up laten maken door te klikken op Backup Now via Instellingen > UpdraftPlus-backups.

Stap 3: Back-ups terugzetten

Alle back-ups kan je terugvinden op de gekozen opslaglocatie, bv. Google Drive in de map UpdraftPlus en via Instellingen > UpdraftPlus-backups. Je kan hier ook de back-ups downloaden naar je computer. Via de knop Restore kan je de back-up terugzetten indien dit nodig is.

Opgelet: alle aanpassingen gedaan NA de datum van de back-up zullen verloren gaan!

In het slechtste geval, als bv. je site gehackt is, heb je geen toegang meer tot je WordPress dashboard. Gelukkig kan je dan nog altijd een back-up terugzetten, al is dat wel wat omslachtiger. Het komt er op neer dat je je oude bestanden verwijdert en een nieuwe installatie van WordPress doet (in dezelfde versie als die ten tijde van je back-up). Vervolgens zal je de UpdraftPlus plugin opnieuw moeten installeren en deze koppelen aan de gekozen opslaglocatie, zoals Google Drive of Dropbox.

UpdraftPlus scant dan automatisch naar voormalig opgeslagen back-ups. Deze kan je dan terugzetten via de knop RestoreUpdraftPlus gaat nu automatisch voor je aan de slag. Je hoeft verder niets meer te doen, het proces is volledig geautomatiseerd.

 

Conclusie

In dit artikel hebben we het belang beschreven van het maken van regelmatige back-ups en hebben we beschreven hoe je zelf WordPress back-ups kan maken en terugzetten met behulp van de plugin UpdraftPlus.

Bij het maken van een WordPress back-up zijn er twee zaken waar je op moet letten:

  1. Maak een back-up van de WordPress bestanden én de database.
  2. Bewaar de back-up op een externe locatie zoals bv. Google Drive of Dropbox.

Nog vragen?

Heb je bij bovenstaande nog vragen of heb je hulp nodig? Geef me dan een seintje op info@springweb.be! Ik help je graag verder!

Hulp nodig bij het beheer van je website?

Springweb

Ontwikkelt en beheert WordPress websites.

Algemene voorwaarden | Disclaimer | Privacyverklaring

© 2019 Alle rechten voorbehouden. Webdesign Springweb.

CONTACT

Korenbloemlaan 23
2980 Zoersel
België
E-mail: info@springweb.be
Tel: 0474/71.83.01
BE 0678.789.568

Is jouw WordPress website mobielvriendelijk?

Is jouw WordPress website mobielvriendelijk?

“Hoe zorg ik ervoor dat mijn WordPress website mobielvriendelijk is?”

Een mobielvriendelijke WordPress website is tegenwoordig noodzakelijk. Niet alleen wordt het percentage mobiele gebruikers steeds groter, ook voor Google wordt een mobielvriendelijke website steeds belangrijker. Begin 2018 heeft Google mobile-first index uitgerold. Als jouw website niet mobielvriendelijk is, is dat voor Google een reden om hem niet op te nemen bij de zoekresultaten.

Heb je geen idee wat de mobile-first index precies is en weet je niet of je website er klaar voor is? Geen zorgen! In dit artikel bespreken we wat de mobile-first index is, hoe je kan testen of jouw website hier klaar voor is en hoe je je website mobielvriendelijk kan maken, moest dat nog niet het geval zijn. Laten we beginnen!

Wat betekent mobile-first index?

Mobile-first index houdt in dat Google bij het indexeren van webpagina’s voortaan eerst naar de mobiele versie van de website kijkt. Als je website niet mobielvriendelijk is, zal dat betekenen dat je in de zoekresultaten zal dalen en misschien zelfs niet meer gevonden zal worden! 

Maar wat bedoelen we nu juist met mobielvriendelijk? Een mobielvriendelijke website moet een optimale gebruikerservaring bieden, niet alleen op desktops en laptops, maar ook op smartphones en tablets. Dat betekent dat het ontwerp van je website responsive moet zijn. De lay-out van de website past zich dan aan aan het formaat van het scherm waarop de site bekeken wordt. Als de website wordt weergegeven op kleinere schermen, dan schalen afbeeldingen en tekst mee en blokken verschijnen onder elkaar in plaats van naast elkaar. Teksten en afbeeldingen moeten bovendien leesbaar blijven en er moet voldoende witruimte aanwezig zijn.

Het ontwerp moet ook touch-vriendelijk zijn. Knoppen moeten groot genoeg zijn, zodat de gebruiker met zijn vingers niet klikt op het verkeerde element. 

Bovendien hebben we onderweg vaker te maken met een minder snelle internetverbinding. Vandaar dat we moeten zorgen dat de laadtijd van de website geoptimaliseerd wordt.

Test of jouw WordPress website mobielvriendelijk is

Om te testen of jouw website mobielvriendelijk is, biedt Google een mobielvriendelijke test aan. Met deze test kan je checken of elke pagina van je website mobielvriendelijk is . Als dat niet het geval is, dan krijg je advies over wat je moet doen. 

Ga hiervoor naar de volgende webpagina:

https://search.google.com/test/mobile-friendly

In de witte balk geef je de url in van de webpagina die je wenst te testen. Vervolgens klik je op Test uitvoeren

Vervolgens verschijnt er of je pagina geschikt is voor mobiele apparaten of niet en wat de eventuele gevonden fouten zijn:

Tips voor een mobielvriendelijke website

Tip 1: Verbeter de laadtijd van je website

Met deze tip maak je niet zozeer je website mobielvriendelijk, maar het is wel belangrijk om de online vindbaarheid van je website te verbeteren. Google houdt in zijn rankings namelijk rekening met de snelheid waarmee je pagina geladen wordt. Deze kan je oa. testen op:

Manieren om je laadtijd te verbeteren zijn het optimaliseren van je afbeeldingen, gebruik maken van caching, plugins verwijderen die je niet gebruikt,…

Tip 2: Gebruik een responsive thema 

De meeste thema’s die in de laatste paar jaar gemaakt zijn, zijn al responsive. Maar het is niet automatisch altijd het geval. Gebruikt jouw website nog geen responsive thema? Overweeg dan de bouw van een nieuwe website obv een nieuw responsive thema. Bij het zoeken naar een thema moet je er in ieder geval op letten of de term responsive voorkomt in de beschrijving. 

Het thema waar ik zelf het meeste mee werk, het Divi theme, is in ieder geval 100% responsive. Wil je je website omtoveren, dan is een overstap naar Divi zeker aan te raden.

Tip 3: Gebruik een plugin

Als je er nog niet aan toe bent om een nieuwe website te laten bouwen, dan kan een plugin een goede tussenoplossing zijn. Met de  plugin WP Touch kan je je website mobielvriendelijk maken. De plugin herkent of je gebruiker een smartphone, tablet of PC gebruikt en toont dan het juiste thema. 

Conclusie

In dit artikel hebben we het belang beschreven van het hebben van een mobielvriendelijke website, hoe je dit kan testen en wat je kan doen om je website mobielvriendelijk te maken. 

Nog vragen?

Is jouw website momenteel niet mobielvriendelijk? Wil je graag een mobielvriendelijke website laten bouwen? Geef me dan een seintje op info@springweb.be! Ik help je graag verder!

 

Disclaimer: Sommige links zijn affiliate links, dat betekent dat ik een klein bedrag krijg als jij via die link overgaat tot een aankoop.  Jij betaalt hiervoor echter totaal niets extra.

Wil jij ook werk maken van een mobielvriendelijke website?

Springweb

Ontwikkelt en beheert WordPress websites.

Algemene voorwaarden | Disclaimer | Privacyverklaring

© 2019 Alle rechten voorbehouden. Webdesign Springweb.

CONTACT

Korenbloemlaan 23
2980 Zoersel
België
E-mail: info@springweb.be
Tel: 0474/71.83.01
BE 0678.789.568

Een favicon toevoegen aan je WordPress website

Een favicon toevoegen aan je WordPress website

Je hebt ze vast al eens gezien. Favicons, de kleine icoontjes naast de website naam bovenin je adresbalk. Het helpt bezoekers je website eenvoudig te herkennen wanneer er bijvoorbeeld meerdere tabbladen open staan. Het vergroot de herkenbaarheid van je merk en bevordert het vertrouwen bij je doelgroep. Een van de meest gemaakte website fouten is naar mijn mening het niet toevoegen van een favicon. Nochtans is het heel eenvoudig.

In dit artikel laat ik je zien hoe je een favicon kan toevoegen aan je eigen WordPess website.

Wat is een favicon?

Een favicon (“favoriete icoon”), is een klein icoon dat linksboven op het tabblad bovenin je browser wordt weergegeven. Web browsers tonen het naast een webpagina’s titel op een browser tabblad of links naast de URL in de adresbalk.

Favicons zijn oorspronkelijk ontworpen om favoriete bladwijzers in de webbrowser transparanter te maken. Het favicon-bestand wordt geplaatst in de hoofdmap van jouw website. Het aanbevolen formaat van een favicon is tegenwoordig 512×512 pixels. Dit komt omdat het ook als site icon gebruikt wordt op smartphones. Let hier dus goed op bij het maken van je eigen favicon.

Oorspronkelijk waren favicons altijd 16×16 pixels en werd het opgeslagen als een .ico bestand.

Ondertussen ondersteunen alle browsers favicons met een andere extensie. Alleen de hele oude Internet Explorer versies, die bijna niet meer gebruikt worden, herkennen deze nieuwe favicons niet.

Ben je niet zeker of jouw website een favicon heeft? Er zijn allerlei online tools waarmee je kan checken of er een favicon aanwezig is of niet. Een voorbeeld van zo’n favicon checker kan je vinden op https://realfavicongenerator.net.

Hoe maak je een favicon?

Je kan zelf een favicon maken met een beeldverwerkingsprogramma, zoals bv. Photoshop of GIMP. Zorg ervoor dat je afbeelding vierkant is en baseer het bv. op je logo. De beste afmeting is 512×512 pixels. Op alle locaties waar de afbeelding dan wordt weergegeven heeft hij dan het juiste formaat.

Kies bij voorkeur voor een transparante achtergrond. De afbeelding wordt dan het mooiste weergegeven. Als je gebruik maakt van een transparante achtergrond dan moet je de afbeelding als favicon.png opslaan.

In plaats van zelf een favicon te maken, kan je ook online favicon generators gebruiken. Ze zetten een geüploade afbeelding om in een miniatuur pictogram in het juiste formaat. Voorbeelden zijn:

favicon-generator.org
favicomatic.com
realfavicongenerator.net

Hoe een favicon toevoegen aan je WordPress website?

Nu je een logo of icoontje hebt gemaakt met een transparante achtergrond, kun je deze gaan uploaden naar WordPress.  WordPress heeft na haar update naar WordPress 4.3 het toevoegen van een favicon gemakkelijker gemaakt. Via de WordPress Customizer kan je een favicon toevoegen. Dit is de eenvoudigste en aanbevolen manier.

In sommige gevallen kan het zo zijn dat je WordPress-thema óók functionaliteit heeft voor favicons. Mocht dit het geval zijn, dan kun je je favicon meestal uploaden onder het “Theme Options”-menu van je WordPress-thema.

Een andere optie die je kunt uitproberen, is om een plugin te installeren, zoals de plugin Favicon by RealFaviconGenerator. Toch is dit eigenlijk niet nodig, zeker nu WordPress de functionaliteit aan de Customizer heeft toegevoegd.

#1 Via WordPress Customizer (aanbevolen)

De WordPress Customizer open je door in het admin-dashboard van WordPress naar Weergave > Customizer te gaan.

Zodra je in de WordPress Customizer zit, klik je op Site-identiteit. Hier kun je de titel en ondertitel van je website aanpassen én een favicon uploaden. Klik op Afbeelding selecteren en upload vervolgens de favicon die je hebt gemaakt (zie afbeelding linksonder).

Indien je afbeelding het juiste formaat bevat zal er niks gebeuren en kun je het gewoon opslaan. Wanneer je afbeelding te groot is zal je het kunnen bijsnijden.

In de preview zie je als het goed is nu al meteen de favicon verschijnen bovenaan in het tabblad van je browser.

Klik vervolgens bovenaan op de blauwe knop Publiceren om het favicon op te slaan (zie afbeelding rechtsonder).

#2 Via een plugin

Je kan ook altijd een plugin gebruiken om een favicon toe te voegen. Een plugin die ik zelf aanraad is Favicon by RealfaviconGenerator.

Deze plugin zorgt ervoor dat jouw favicon compatibel is met alle browser door het plaatsen van meerdere afbeeldingen in de juiste locaties.

Eerst en vooral moet je de plugin installeren. Vervolgens ga je naar Weergave > Favicon en upload je je afbeelding.  De plugin stuurt je naar de online generator waar je je favicon kan aanpassen voor de verschillende browsers. Na het genereren van de favicons en de code wordt je teruggestuurd naar je website en krijg je een preview van de favicons. Over code hoef je je geen zorgen te maken, dat wordt allemaal voor je geregeld!

#3 Via FTP (WordPress 4.2 en ouder)

In oudere versies van WordPress zal je je favicon manueel moeten uploaden.  Dit kan via een FTP client zoals FileZilla. Volg hiervoor de onderstaande stappen:

  • Log in op je FTP client.
  • Zoek op de server naar de hoofdmap van je actieve WordPress thema (meestal is dit wp-content/themes/). Vervang de favicon die er al staat door jouw custom favicon.
  • Zet de favicon vervolgens ook in de root directory (hoofdmap) van je website. De URL wordt dan jouwwebsite.be/favicon.ico.
  • Log in op je WordPress Dashboard.
  • Ga naar Weergave > Bewerker en zoek naar het header.php bestand (zorg ervoor dat je werkt met een child theme zodat je aanpassingen niet worden overschreven bij een update).
  • Zoek de regel <link rel=”shortcut icon”, eindigend in /favicon.ico”/>
  • Zet in plaats van deze regel de volgende code:

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

(Als de regel niet bestaat, dan moet je het stukje code in de <head> tag zetten).

  • Sla het bestand op.

Zoals je ziet, vereist deze werkwijze toch al enige technische kennis. Als je je hierbij niet comfortabel voelt, vraag dan aan je webdesigner om je te helpen. Waarschijnlijk zal hij je voorstellen om te updaten naar de laatste versie van WordPress, dit lost bovenstaand probleem op en zorgt er voor dat je website veilig en up-to-date is!

Conclusie

De belangrijkste zaken die je dient te onthouden over het toevoegen van een favicon aan je WordPress website zijn de volgende:

  • Maak je favicon minimum 512x512 pixels, vierkant en liefst met een transparante achtergrond.
  • Gebruik bij voorkeur de WordPress Customizer om je favicon toe te voegen.
  • Als je zeker wil zijn dat je favicon op alle juiste locaties is geplaatst en als je wat extra controle wil over de verschillende vertoningen van je favicon, gebruik dan een plugin zoals de realfavicongenerator plugin.

Wanneer je de pagina bezoekt en de nieuwe favicon niet te zien is, probeer dan eens een “hard refresh” (Ctrl + F5). De favicon wordt namelijk vaak gecached door de browser en kan daarom nog de oude afbeelding weergeven.

Nog vragen?

Ik hoop dat bovenstaande uitleg wat meer duidelijkheid schept over waarom en hoe je een favicon toevoegt aan je WordPress website.


Heb je hierna toch nog vragen, geef me dan een seintje op 
info@springweb.be! Ik help je graag verder!

Klaar om samen te werken aan jouw website?

Springweb

Ontwikkelt en beheert WordPress websites.

Algemene voorwaarden | Disclaimer | Privacyverklaring

© 2019 Alle rechten voorbehouden. Webdesign Springweb.

CONTACT

Korenbloemlaan 23
2980 Zoersel
België
E-mail: info@springweb.be
Tel: 0474/71.83.01
BE 0678.789.568

Afbeeldingen optimaliseren voor WordPress websites

Afbeeldingen optimaliseren voor WordPress websites

Iedereen wil een snelle website. Er zijn verschillende manier om de laadsnelheid van je website te optimaliseren, zoals oa. het gebruik maken van caching plugins, maar ook afbeeldingen hebben een grote invloed. Zware afbeeldingen kunnen je WordPress website aanzienlijk trager maken, zonder dat je het door hebt. Je afbeeldingen optimaliseren vooraleer je ze op je site zet, is dus van essentieel belang.  Maar ook tijdens het opladen en zelfs na het opladen is er nog de mogelijkheid om je afbeeldingen verder te optimaliseren. Hieronder laat ik zien hoe je dat best doet en toon ik je met een praktijkvoorbeeld welke winst deze tips je kunnen opleveren!

 

Voor het opladen: verkleinen en comprimeren

Vooraleer je je afbeeldingen gaat opladen naar WordPress is het belangrijk om ze eerst te verkleinen in breedte en lengte. Het heeft niet veel zin om afbeeldingen van 3000 pixels breed te gaan opladen, als ze maar getoond worden in je website met een breedte van 300 pixels. Het is dus zaak om ze vooraf al te gaan verkleinen. Hiervoor heb je verschillende mogelijkheden.

Als je op voorhand weet welke afmetingen de afbeelding zal krijgen op je website, kies je uiteraard deze afmetingen. Als je dat niet weet, dan hanteer je best volgende richtlijn, deze zal je al een grote winst opleveren.

Richtlijn voor het verkleinen van afbeeldingen

  • Als je perfect weet welke afmeting de afbeelding gaat krijgen, dan gebruik je uiteraard deze afmetingen.
  • Afbeeldingen die je op de volledige breedte van je website wilt tonen, kan je verkleinen tot 2000 pixels breed.
  • Voor alle andere afbeeldingen, is een maximum breedte van 1000 pixels meestal meer dan voldoende.

Naast het verkleinen van je afbeeldingen, kan je de bestandsgrootte ook erg verkleinen door de afbeeldingen te comprimeren. Comprimeren betekent dat je het bestand zodanig verkleint dat het minder ruimte zal innemen. Comprimeren doet nauwelijks af van de kwaliteit van de afbeelding, zolang je niet overdrijft.

Voor het verkleinen en comprimeren van je afbeeldingen, kan je allerlei programma’s gebruiken. Je kunt afbeeldingen verkleinen en comprimeren met Adobe Photoshop (betalend), Microsoft Paint (Windows), GIMP (gratis) en vele andere grafische programma’s.

Heb je geen dergelijk programma tot je beschikking? Dan is het zeker de moeite waard om te kijken naar online tools zoals:

 

  • Compressor.io: comprimeren van PNG en JPG afbeeldingen tot een bestandsgrootte van 10MB
  • Tiny PNG: comprimeren van PNG afbeeldingen
  • JPEGmini: comprimeren van JPG afbeeldingen
  • Webresizer: verkleinen en comprimeren van PNG en JPG afbeeldingen tot een bestandsgrootte van 10MB
  • Picresize: enkel voor verkleinen van afbeeldingen

Richtlijn voor het comprimeren van afbeeldingen

  • Zorg dat je afbeelding max. 100-150 kb groot is.

Tijdens het opladen: SEO en plugins

Als je afbeeldingen oplaadt in de mediabibliotheek van WordPress is het een goed moment om ook ineens aan je SEO (zoekmachineoptimalisatie) te denken. Let hierbij zeker op volgende zaken:

 

  • Geef je bestandsnamen een betekenisvolle, relevante bestandsnaam met een paar zoekwoorden erin, dus niet ‘DSC9872.jpg’, maar vb. ‘afbeeldingen-optimaliseren-smush.jpg’. De bestandsnaam wordt door WordPress ineens ook gebruikt als titel.
  • Geef via de alt-tekst altijd een beschrijving aan je afbeeldingen, vb. ‘Afbeeldingen optimaliseren voor WordPress’.

Na het doorlopen van bovenstaande stappen, zijn je afbeeldingen al een heel eind geoptimaliseerd, maar het blijft niettemin zeer nuttig om gebruik te maken van een plugin als WP Smush of EWW Image Optimizer om de afbeeldingen nog verder te comprimeren tijdens het opladen.

Met WP Smush kun je afbeeldingen die al op je website staan in de mediabibliotheek comprimeren. Daarnaast worden afbeeldingen automatisch gecomprimeerd na het opladen vanaf het moment dat je WP Smush activeert. Ook kan je een maximale hoogte en breedte instellen voor het opladen van je afbeeldingen.

WP Smush optimaliseert je afbeeldingen door onder andere alle overbodige gegevens te verwijderen en gebruik te maken van JPG-compressie. De plugin maakt gebruik van zogenaamd lossless comprimeren, zodat er geen verschil in kwaliteit zal zijn.

Wil je meer weten over WP Smush, bekijk dan zeker ook eens onze WP Smush tutorial.

EWWW Image optimizer is net als WP Smush een plugin om afbeeldingen zonder kwaliteitsverlies te optimaliseren. De plugin maakt gebruik van verschillende tools voor het optimaliseren en is een zeer goed alternatief voor Smush.it.

Na het opladen: testen

Ben je benieuwd hoe jouw website presteert? Er zijn online een aantal tests te vinden waarmee je de eventuele knelpunten kan bepalen.

Met GTMetrix.com kan je je website vrij uitgebreid testen.  Er worden een aantal tests uitgevoerd waarbij je een bepaalde score krijgt, uitgedrukt met een letter. Begin bij de scores die een hoge letter uit het alfabet aangeven, bijvoorbeeld een F. Vaak zullen dit de afbeeldingen zijn, die of heel groot zijn, of niet correct gecomprimeerd. De test geeft aan welke afbeeldingen geoptimaliseerd moeten worden en biedt daarnaast de mogelijkheid deze geoptimaliseerde afbeeldingen direct te downloaden.

Je kan je website ook testen met PageSpeed Insights van Google om te controleren of je website goed geoptimaliseerd is voor de zoekmachines. Als er afbeeldingen zijn die niet geoptimaliseerd zijn, dan zal het resultaat van de test dit aangeven en weet je dat je voor deze afbeeldingen best bovenstaande stappen eerst doorloopt en ze dan opnieuw oplaadt.

Hiermee hebben we de belangrijkste stappen voor het optimaliseren van je afbeeldingen doorlopen. Hieronder laat ik je nog met een voorbeeld zien wat dit in de praktijk kan betekenen.

Voor en na:

Via Unsplash.com, een website voor gratis stockfoto’s downloadde ik bovenstaande foto. Initieel was deze foto 7360 px op 4912 px en wel 103,4 MB zwaar! Als ik deze afbeelding op mijn website zou gebruiken, zou dat het laden van mijn webpagina enorm vertragen.

Zie ook:

Ik maakte gebruik van Photoshop* om allereerst de afmetingen van de foto te verkleinen naar 1000 px op 668 px.  Dit leverde een totale bestandsgrootte van 1,91 MB. Een gigantische verbetering, maar nog steeds veel te zwaar voor een webpagina.

Daarna comprimeerde ik de foto zodat ze nog maar 99 KB was. Dit leverde dus een totale winst op van meer dan 102 MB!

Tijdens het opladen in WordPress werd de foto door de plugin WP Smush.it  nog verder gecomprimeerd. De foto zoals die nu op hierboven staat, is nu nog maar 68,1 KB, dus nog een extra winst van bijna 22 KB.

In volgende tabel zie je het resultaat van alle stappen:

Actie Bestandsgrootte
Initieel 103,4 MB
Verkleinen 1,91 MB
Comprimeren 99 KB
WP Smush.it 68,1 KB

*In bovenstaand voorbeeld maakte ik gebruik van Photoshop, maar je kan quasi dezelfde resultaten bekomen door de hierboven besproken tools.

Ik hoop dat ik je hiermee heb kunnen overtuigen van het belang van het optimaliseren van je afbeeldingen en dat je dit zelf ook zal toepassen in de toekomst!

Klaar om samen te werken aan jouw website?

Springweb

Ontwikkelt en beheert WordPress websites.

Algemene voorwaarden | Disclaimer | Privacyverklaring

© 2019 Alle rechten voorbehouden. Webdesign Springweb.

CONTACT

Korenbloemlaan 23
2980 Zoersel
België
E-mail: info@springweb.be
Tel: 0474/71.83.01
BE 0678.789.568

Waar vind je gratis stockfoto’s voor je website?

Waar vind je gratis stockfoto’s voor je website?

Als je start met het bouwen van een website, dan zal je al gauw op zoek gaan naar mooie afbeeldingen om je website te verrijken. Ook als je samenwerkt met een webdesiger, zal deze je vragen om een aantal afbeeldingen aan te leveren. Gratis stockfoto’s kunnen dan een oplossing bieden.

Zie ook: checklist ‘Wat moet je aanleveren voor een nieuwe website’

 

Hoe zit het met auteursrecht?

Je hebt een aantal mogelijkheden om foto’s te vinden voor je website. Je kan een beroepsfotograaf inschakelen, maar daarvoor moet je natuurlijk wel over een bepaald budget beschikken. Je kan er zelf met je camera of smartphone op uit trekken, maar wie heeft daar tegenwoordig nog tijd voor? En smartphone foto’s zijn lang niet altijd van de beste kwaliteit. Dus begin je maar wat rond te surfen bij Google Afbeeldingen en download je daar de eerste de beste foto. Fout dus! Zomaar afbeeldingen plukken van het internet om ze te gebruiken in jouw website is niet toegestaan. Op iedere afbeeldingen rust immers auteursrecht(copyright). Dat wil zeggen dat de auteur van de foto (de fotograaf dus) de eigenaar is van de foto en zelf beslist wat er wel en niet mee mag gebeuren. Als de auteur zijn foto ergens tegenkomt zonder dat hij daarvoor toestemming heeft gegeven, kan je een fikse boete oplopen. Ook als je vermeldt hebt wie de foto gemaakt heeft! Pluk dus zeker nooit zomaar een foto van het internet en wil je toch persé een bepaalde foto gebruiken, vraag dan eerst uitdrukkelijke toestemming aan de fotograaf.

Gratis stockfoto’s

Gelukkig zijn er nog altijd de websites die kwaliteitsvolle stockfoto’s aanbieden. De fotograaf heeft dan zijn auteursrecht afgestaan en geeft de toestemming om zijn foto te gebruiken op websites, drukwerk,… Een aantal van deze sites zijn betalend, zoals Shutterstock of iStock, maar er zijn ook veel websites waar je ze gratis kan downloaden. Let wel op, want soms vraagt de fotograaf nog om een bronvermelding. Hieronder vind je een lijst van 10 websites waar je gratis, kwaliteitsvolle stockfoto’s kan downloaden:

Het vinden van de juiste foto is een kunst op zich. Zeker met het overweldigende aanbod dat grote stockfoto websites te bieden hebben. Meestal kun je zoekresultaten op details zoals kleur, trefwoord, categorie of formaat filteren. Naast foto’s bieden een aantal stockfoto websites ook vector afbeeldingen en icoontjes.

Zie ook:  Eenvoudig grote bestanden versturen via WeTransfer (met stap-voor-stap handleiding)

Veel plezier met het zoeken naar foto’s!

*Alle foto’s gebruikt in dit artikel komen van Unsplash.com.

Klaar om samen te werken aan jouw website?

Springweb

Ontwikkelt en beheert WordPress websites.

Algemene voorwaarden | Disclaimer | Privacyverklaring

© 2019 Alle rechten voorbehouden. Webdesign Springweb.

CONTACT

Korenbloemlaan 23
2980 Zoersel
België
E-mail: info@springweb.be
Tel: 0474/71.83.01
BE 0678.789.568

Wat moet je aanleveren voor je nieuwe website? (+gratis checklist)

Wat moet je aanleveren voor je nieuwe website? (+gratis checklist)

Proficiat! Met behulp van de vragenlijst voor je nieuwe website, ben je samen met je webdesigner tot een overeenkomst gekomen. Je staat waarschijnlijk al te popelen van ongeduld om een eerste versie te kunnen zien, maar vooraleer je webdesigner kan starten, zal je hem het nodige materiaal moeten aanleveren. Wat verwacht je webdesigner van jou en in welke vorm kan je dit alles het beste aanleveren?

Inhoud

  • Menu: Alle pagina’s van je website worden gestructureerd in een hiërarchisch menu, waardoor je bezoekers doorheen je website kunnen surfen. Hoe meer informatie en pagina’s de website gaat bevatten, hoe belangrijker het is om hier goed over na te denken.  Het is dus verstandig dit logisch op te bouwen en goed na te denken over de benaming van deze pagina’s. De eerste heet standaard “Home” en de laatste “Contact”. Bezorg je webdesigner een overzicht van de structuur en de titels van alle gewenste pagina’s.
  • Teksten: Je kan je teksten zelf schrijven of ervoor kiezen om samen te werken met een copywriter. Bezorg je teksten bij voorkeur als een Word-bestand.

Beeldmateriaal

  • Logo: Het webdesign hangt in grote mate af van de kleuren en stijl die in het logo worden gebruikt. Bezorg je logo dus snel en in het juiste formaat, bij voorkeur als een .AI, .EPS of .PSD bestand (vraag dit eventueel aan je grafisch designer).
  • Afbeeldingen: Je website komt tot leven door het gebruik van mooie, toepasselijke afbeeldingen. Zorg ervoor dat ze een goede resolutie hebben, goed belicht en scherp zijn. Heb je zelf geen goede afbeeldingen dan zijn er veel (stock) websites waar je mooie afbeeldingen kunt kopen of zelf gratis kan downloaden. Houd altijd rekening met auteursrechten! Lever je afbeeldingen aan als aparte bestanden, bij voorkeur .JPG of .PNG.

Zie ook:

Technische gegevens

  • Hosting: Als je al een eigen hostingpakket hebt, dan heeft je webdesigner deze nodig om de website te kunnen installeren (inloggegevens, klantenpanel, ftp-gegevens,…). Normaal gezien heb je bij de registratie van je hostingpakket een mail ontvangen met al deze gegevens.
  • Domeinnaam: Heb je nog geen eigen domeinnaam, dan geef je de domeinnaam door die je bij voorkeur wenst, zodat je webdesigner deze kan registreren. Als je al een domeinnaam hebt, dan geef je deze door aan je webdesigner.
  • E-mailadres: Wil je graag een e-mailadres dat gekoppeld is aan je domeinnaam? Geef dan je voorkeur door aan je webdesigner: info@xxxxxx.be  is het meest populair, maar persoonlijke emailadressen zoals claudia@xxxxxx.be zijn ook een goede keuze.

En nu?

Download de gratis checklist en start met het verzamelen van het materiaal dat je nodig hebt. Als je alles afgevinkt hebt, bezorg je deze informatie aan je webdesigner, zodat deze aan de slag kan. Ik wens je alvast veel succes met je nieuwe website. Kom je er zelf niet uit, dan kan je me altijd een mail sturen!

Wat moet je aanleveren voor je nieuwe website?

Gebruik deze handige checklist om alles te verzamelen wat je webdesigner nodig heeft voor het bouwen van jouw website.

Klaar om samen te werken aan jouw website?

Springweb

Ontwikkelt en beheert WordPress websites.

Algemene voorwaarden | Disclaimer | Privacyverklaring

© 2019 Alle rechten voorbehouden. Webdesign Springweb.

CONTACT

Korenbloemlaan 23
2980 Zoersel
België
E-mail: info@springweb.be
Tel: 0474/71.83.01
BE 0678.789.568

Download de gratis vragenlijst

Download en vul de vragenlijst in en neem hem mee in het eerste contact met je webdesigner.

#Maak je doelen helder

#Wees voorbereid

#Kom niet voor verrassingen te staan

Creëer samen een website die voldoet aan al jouw doelen en wensen!

Bedankt!

Download de gratis checklist

Download de gratis checklist, druk hem af en start met het verzamelen van het nodige materiaal.  Als alles afgevinkt is, bezorg je het nodige materiaal aan je webdesigner!

Creëer samen een website die voldoet aan al jouw doelen en wensen!

Bedankt!

Pin It on Pinterest