Hoe bestanden en afbeeldingen overschrijven in WordPress

Hoe bestanden en afbeeldingen overschrijven in WordPress

“Hoe kan ik een bestand of een foto vervangen op mijn WordPress website?”

Stel: je wenst een foto of een bestand op je website aan te passen. Dan zit er helaas niets anders op dan de nieuwe versie van de foto of het bestand opnieuw op te laden en vervolgens de links aan te passen. 

WordPress staat immers standaard niet toe om mediabestanden te overschrijven. Om reeds opgeladen mediabestanden toch te vervangen door een nieuwere versie, heb je een plugin nodig. 

In dit artikel toon ik je, hoe je met behulp van de Enable Media Replace plugin, makkelijk een bestand of een afbeelding kan overschrijven. Hiervoor hoef je slechts vier eenvoudige stappen te volgen. Klaar? Dan gaan we vlug van start!

Stap 1: Installeer de Enable Media Replace plugin

Eerst en vooral ga je de Enable Media Replace plugin installeren en activeren.

Lees ook: Hoe installeer je een WordPress plugin

In je WordPress dashboard ga je naar Plugins > Nieuwe plugin. Vervolgens zoek je op Enable Media Replace:

Stap 2: Zet de mediabibliotheek op lijstweergave

Ga naar de mediabibliotheek via Media > Bibliotheek.

Standaard worden alle mediabestanden in een raster weergegeven. Verander dit naar lijstweergave:

Stap 3: Klik op de Replace media optie bij de bestandsnaam

Ga naar het bestand of de afbeelding die je wenst te vervangen. Beweeg met je muis over de titel en de optie Replace media zal verschijnen. Klik op Replace media:

Stap 4: Upload de nieuwe versie

Klik nu op Bestand kiezen en blader op je computer naar het nieuwe bestand dat je wilt opladen:

Je zal twee opties zien. Je kan enkel het bestand vervangen of je kan het bestand vervangen, een nieuwe bestandsnaam gebruiken en alle links aanpassen. 

Kies de gewenste optie en klik vervolgens op Upload. Het bestand wordt nu voor je vervangen.

Conclusie

Ik hoop dat dit artikel je geholpen heeft om in de toekomst op een eenvoudige manier bestanden en afbeeldingen op je WordPress website te vervangen. 

Heb je nog vragen? Neem dan contact op en ik help je graag verder.

 

Afbeeldingen maken voor social media met Canva

Afbeeldingen maken voor social media met Canva

“Hoe maak ik zelf geweldige afbeeldingen om te gebruiken op social media?”

Wanneer je je online aanwezigheid aan het uitbouwen bent, dan zal het creëren van merkbekendheid steeds belangrijker worden. De wijze waarop je je berichten ontwerpt, de stijl van je afbeeldingen, de kleuren die je gebruikt, je logo,… al deze factoren spelen een belangrijke rol in online merkbekendheid en zullen je helpen om op te vallen en herkend te worden door je volgers.  Maar hoe maak je nu zelf zo’n afbeeldingen als je geen kennis hebt van ontwerpen, laat staan van Photoshop?

Hieronder zie je een voorbeeld van een afbeelding die ik gemaakt heb voor mijn Instagram-pagina. Deze afbeelding is helemaal online gemaakt, zonder Photoshop. Als je wilt weten hoe ik dat gedaan heb, lees dan verder!

Hoewel ik best wel overweg kan met Photoshop, maak ik tegenwoordig al mijn afbeeldingen die ik gebruik op mijn social media kanalen met behulp van Canva.

Canva.com is een online grafisch ontwerptool speciaal gericht op mensen die geen verstand  hebben van grafisch ontwerpen.  Je voegt eigen beeld toe, je logo en je eigen teksten, downloaden en klaar. Met een simpel drag-and-drop systeem pas je bestaande templates aan naar je eigen wensen. Je voegt eigen afbeeldingen toe, je logo, je past de teksten aan… Als alles naar wens is, kan je de afbeelding downloaden en gebruiken op je social media. Er zijn ontzettend veel templates beschikbaar voor Facebook headers, Instagram posts, blogafbeeldingen en advertenties. Maar ook documenten, posters, flyers en uitnodigingen maak je met Canva. Een groot deel van deze templates is bovendien gratis.

Als je benieuwd bent hoe je zelf je afbeeldingen kan maken om te gebruiken op jouw social media kanalen, dan kan je zelf aan de slag met deze handige stap-voor-stap handleiding! Ready, set, go!

Stap 1: maak een account aan op Canva.com

Ga naar Canva.com en duid aan waarvoor je Canva gaat gebruiken: 

Vervolgens kan je dan een eigen account aanmaken:

Stap 2: kies een ontwerp en een template

Nadat je account is aangemaakt en je bent ingelogd, kan je aan de slag. Allereerst kies je een ontwerp, zoals bv. een Facebook-omslag. Klik op Meer om meerdere ontwerpen te zien. Wat ontzettend handig is, is dat Canva zelf de optimale afmetingen gebruikt voor de verschillende social media kanalen. Indien je dat wenst, kan je ook zelf de afmetingen opgeven voor je afbeelding.

Nadat je een ontwerp hebt gekozen, kan je kiezen uit een aantal templates van waaruit je wilt vertrekken. Klik op een template om te zien hoe je afbeelding er uit zal zien. 

Een groot aantal templates zijn gratis, maar er zijn ook templates waarvoor je moet betalen. Om de voorwaarden te zien, klik je op het i-tekentje in de linkeronderhoek van het template:

Stap 3: maak je afbeelding

Als je een template gekozen hebt, kan je dat volledig aanpassen naar jouw smaak, door afbeeldingen, kleuren en tekst aan te  passen. Je kan klikken op de verschillende elementen om deze aan te passen.

Je kan de grootte aanpassen, door dmv de zwarte bolletjes in de hoeken te verslepen. Je kan de positie van het element aanpassen door het element te verslepen.

Afhankelijk van het element verschijnen er een aantal opties bovenaan de afbeelding.

De kleuren kan je aanpassen links bovenaan de afbeelding. Klik op een kleur om die aan te passen. 

Rechts bovenaan vind je volgende opties terug:

Met de optie Kprn kan je een element kopiëren. De optie Ordenen laat je toe om elementen naar de voor- of achtergrond te verplaatsen. Vervolgens kan je ook de Transparantie van het element bepalen. Als je de transparantie van een element op minder dan 100% zet, wordt het element lichter en zal je onderliggende elementen erdoor kunnen zien. Met een transparantie van 0% is je element niet meer zichtbaar. De voorlaatste optie laat toe om een link toe te voegen. En met het vuilbakje kan je een element verwijderen.

Naast het aanpassen van de bestaande elementen, kan je zelf ook nog elementen en tekst toevoegen aan je afbeelding.

 

Elementen toevoegen

In het tabblad Elementen kan je een zelf elementen toevoegen aan je afbeelding, zoals foto’s, vormen, pictogrammen, lijnen,…

Kies een element dat je wilt toevoegen en sleep het vervolgens naar je afbeelding. Voor een aantal elementen zal je moeten betalen, deze elementen kosten $1 en kan je gebruiken voor één afbeelding.

 

Tekst toevoegen

Via het tabblad Tekst kan je zelf nog tekst toevoegen:

Je kan zelf een titel, bubtitel of platte tekst toevoegen of iets kiezen uit de voorgedefinieerde tekstelementen. Sleep het gewenste element op je afbeelding en klik in de tekst zelf om deze aan te passen. Bovenaan de afbeelding heb je nog een aantal opties om je tekst aan te passen, zoals het lettertype, de lettergrootte, de kleur,…:

Achtergronden toevoegen 

Het tabblad Achtergronden laat  je toe om een achtergrond toe te voegen aan je afbeelding. Dit kan een kleur zijn of een afbeelding:

Uploads 

Tenslotte kan je in het tabblad Uploads ook zelf afbeeldingen opladen om te gebruiken. Bij een gratis account van Canva is er een uploadlimiet van 1 GB voorzien. Heb je zelf geen afbeeldingen, dan kan je online altijd op zoek gaan naar gratis stockfoto’s.

Stap 4: download je afbeelding

Als je afbeelding klaar is kun je deze downloaden als jpg, png of pdf. Een jpg of png is geschikt voor je website, png gebruik je als je afbeelding transparant is. De pdf kun je naar wens downloaden voor print. Je kunt hier Bijsnijdmarkeringen en afloop aanvinken. Dan krijg je snijlijnen en extra snijruimte, wat de afbeelding geschikt maakt voor print.

Tip: let er bij downloaden op dat je de afbeelding een goede naam hebt gegeven en voeg indien gewenst je website toe tussen haakjes. Zo werk je ook aan de SEO van je website.

Stap 5: deel je afbeelding op social media

Als je je afbeelding hebt gedownload, is het tijd om deze te delen op je social media kanalen. Het is belangrijk dat je consistent bent bij het gebruik van afbeeldingen zodat jouw stijl herkenbaar is. Daarom is het handig om je afbeeldingen te herbruiken.

Als je een afbeelding in Canva maakt, wordt deze bewaard en getoond bij je ontwerpen. Zo heb je eigenlijk een template van waaruit je telkens opnieuw kan vertrekken om zo een consistente look te creëren. Je kan bijvoorbeeld oor elk blogbericht dat je maakt een aangepaste afbeelding maken en deze delen op Facebook of je kan een template maken om quotes te delen op Instagram,…

Canva for Work

Hoewel je met een gratis account bij Canva al heel ver komt, kan je ook upgraden naar een betalend account, nl. Canva for Work. Hiervoor betaal je $12,95  per maand. Dit biedt een aantal voordelen. Zo heb je ongelimiteerde opslagruimte en kan je zoveel folders aanmaken als je wilt. Je kan ook werken met een team en verschillende rollen toekennen aan je teamleden. Verder kan je ook werken met templates om consistentie in je afbeeldingen te bekomen.

Het grootste voordeel van Canva for Work is de mogelijkheid om de grootte van je afbeelding automatisch aan te passen voor meerdere platforms. De afbeelding wordt herschaald rekening houdend met de vereiste dimensies van het gekozen platform. Als je bijvoorbeeld een afbeelding voor Facebook maakt, maar deze ook wilt gebruiken op je Instagram account, dan kan je deze afbeelding makkelijk herschalen met behulp van het Magic Resize tool.  

Conclusie

In deze tutorial hebben we gezien hoe je in 6 stappen een mooie afbeelding kan maken om te delen op je social media. Hopelijk vond je deze tutorial voor Canva interessant. Je kan ook altijd inspiratie opdoen op hun ideeënpagina of een aantal van hun tutorials volgen. 

Nog vragen?

Hulp nodig bij Canva of je sociale media? Heb je naar aanleiding van dit artikel nog vragen, geef me dan een seintje op info@springweb.be! Ik help je graag verder!

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!

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.

Pin It on Pinterest