Stappenplan: Maak je afbeeldingen gereed voor je WordPress website
Maak afbeeldingen gereed voor je WordPress website via deze eenvoudige stappenplan!
Wil jij tijd besparen, efficiënt & snel afbeeldingen plaatsen in je WordPress website?
In deze blog geef ik je een fijne stappenplan die jou ook echt kan helpen met het maken, plaatsen en bewerken van jouw afbeeldingen!
More...
Want.. even een website bouwen doe je niet zo maar even of wel dan?
Geen idee of je jouw eigen website zelf beheerd of dat je dit door iemand anders laat doen?
Ik vind het wel fijn om zelf aanpassingen te kunnen doen en weten waar ik dingen kan vinden en hoe het werkt. Zo ook achter het maken van mijn eigen website. Er komt toch altijd zoveel bij kijken.
Sharing is caring!
Wil je dat je website een visitekaartje is
of dat deze ook potentiële klanten aantrekt?
Ja ik wil het laatste en dat gun ik jou ook. Dus het hebben van een goed plan en een team die je hierin helpen is dan wel zo fijn.
Achter de schermen heb ik een team van kanjers die me op alle wijze helpen, zo ook o.a. met mijn website.
Toen we dus een tijdje geleden aan mijn website aan het werken waren en ik dus echt in een proces zit waar ik leer uit te besteden, merk je toch dat je als team toch andere gedachtes kan hebben over bepaalde dingen.
Kleine discussie
Zo had ik een kleine discussie met één van mijn teamkanjers. Tijdens een '2-daagse funnel marketing event', die ik eind november 2018 heb gehad, was het onder andere de bedoeling mijn website te vullen.
Denk zoal aan: het vullen met templates, lay-outs, teksten en natuurlijk (veel) afbeeldingen.
Zo ook de reden dat ik deze blog schrijf. Ik ben er zelf tegen aangelopen en deze stappen had ik graag van te voren geweten, dus let op ik ga het met je delen!
Weet jij de juiste stappen te nemen als het gaat om een afbeelding plaatsen op je website?
Hier bedoel ik mee, vanaf het moment dat je dus eigenlijk een foto maakt, bewerkt of gewoon denkt, hè die moet op mijn website?
Juist! Daar zijn onbewust wel wat stapjes voor kan ik je vertellen. Natuurlijk wist ik al héél veel maar toch...
Samen met één van de team-mannen waar ik mee zat, begonnen we dus mijn webpagina’s door te lopen en dingen te vullen doe nog ingevuld moesten worden.
Hij had al een paar foto’s van mijn oude website gehaald, MH Business Support, en Facebook voor een paar andere afbeeldingen.
Die stonden al in mijn mediabibliotheek van WordPress.
De afbeeldingen even snel een naam geven, opslaan op de computer en vervolgens uploaden in WordPress.
Echter opgeslagen onder bijvoorbeeld: mariskah.png. Uhmzz, niet echt handig dacht ik nog.
Ik vroeg waarom hij dit op deze manier had gedaan. De discussie ging over het feit dat het veel tijd en lang kan duren als je alle afbeeldingen van te voren goed opslaat en dus de juist alt-naam geeft.
Ook in het kader van tijd en efficiënt werken, kan je de foto's ook later nog bewerken.
Hij was het zeker wel met mij eens, maar hij zei dat dit nu tijd kost en als wij nu de website gewoon willen vullen dat het sneller en efficiënter is dit even te laten.
Uhmzzzzz, nee! Daar was ik het deels wel mee eens.. nu doorpakken en gewoon gas geven maar aan de andere kant.. moet ik na 1 of 2 maanden weer mijn hele website langs!
Tja, ik blijf toch graag bij mijn eigen gevoel om te zeggen: Doe het in één keer goed voordat je begint, dat scheelt je toch een heleboel tijd!
Als jij weet welke afbeeldingen je allemaal tegelijk op jouw website wil hebben raad ik je aan om de volgende stappen te volgen zodat je het jezelf een stuk gemakkelijk maakt!
Om al die afbeeldingen eerst ergens op mijn computer op te zoeken, ja dan moet je Mariska heten, maar ik weet soms echt niet meer waar ik alles heb opgeslagen.
Heb zo veel mappen en vergeet weleens of ik het onder één van deze mappen heb gezet: Blog, Social Media, Website of bv. Foto's.
Herkenbaar?
En… dan niet te vergeten dat je na een tijdje al je webpagina’s (weer) langs kan gaan, elke afzonderlijke afbeelding op moet zoeken op je computer en dan de juiste stappenplan volgen (hieronder te vinden).
Tuurlijk moet je wel je afbeeldingen voorzien van de juiste stappen, de juiste naam en het een alt-naam meegeven. Waarom? Lees verder en dan vertel ik het je!
Ik ging mee in de waanzin om maar te helpen vullen, maar achteraf toch een tikkeltje spijt natuurlijk.
Daarom deel ik hieronder wat ik heb gedaan en uit eigen ervaring kan ik je vertellen dat het veel efficiënter is als je voorruit en eigenlijk in massa productie werkt.
Zoals bijvoorbeeld bulk afbeeldingen wilt plaatsen op je website of in 1 keer sneller de afbeeldingen netjes en goed wil krijgen.
Voor jou een stuk gemakkelijker maken
Goed we gaan beginnen...
Stel je nou eens voor dat jij nu inderdaad de eerste tactiek toegepast:
Wat bedoel ik met het woord: Indexeren?
Indexeren, oftewel ook wel indexatie genoemd, is het registeren van al jouw pagina’s op je website voor de database van zoekmachines, zoals Google dus!
Dit gebeurd niet elke dag, dus het kan goed voorkomen dat je niet meteen je nieuwe blog of een nieuwe pagina in Google hoeft tegen te komen.
Het indexeren van een website is natuurlijk belangrijk, want zonder een indexatie komt een website niet tevoorschijn in de zoekresultaten van de zoekmachines
Zelf hoef je hier niks mee te doen, je pagina letterlijk ‘publiceren’ is dat je hem openstelt voor dus de zoekmachine Google.
Als deze weer een indexatie toepast zal hij de nieuwe updates van je website meenemen.
Als Google dus jouw website teksten, maar ook je afbeeldingen, zonder de juiste naam indexeert, is dat niet fijn en handig en dien je naderhand weer updates doen of de juiste plug-ins over je website heen gooien. Zonde van je tijd!
Ik wil het eigenlijk voor jou een stuk gemakkelijker maken dan de stuggle waar ik in heb gezeten.
Ik ben ervan overtuigd dat als je namelijk weet welke afbeeldingen je allemaal op je website wil hebben dat je hier een logische stappenplan voor kan volgen.
Zodat het je echt tijd gaat opleveren, want niets is vervelender dan dat je zoveel tijd kwijt bent aan het updaten van je foto's.
Vandaar dat ik een stappenplan voor je heb gemaakt, zodat je in één keer klaar bent.
Zorg er dan voor dat je vanaf heden elke keer als je één of meerdere foto’s wilt uploaden in je mediabibliotheek in je WordPress, je deze stappen volgt!
Goed, nu ga ik echt beginnen! Dit stappenplan is voor alle afbeeldingen geschikt maar hier een kleine opsomming:
- Referentie afbeeldingen
- Eigen afbeeldingen
- Foto’s die je bij je blog(s) wilt toevoegen
- Header foto’s etc.
Stap #1: Gebruik dezelfde afmetingen
Sla jij bijvoorbeeld afbeeldingen op vanuit Facebook, maak je een print screen of gebruik je een knipprogramma?
Elke afbeelding heeft andere afmetingen en is qua grootte verschillend. (bestand grootte uitgedrukt in kB’s = kilobytes)
Zorg er daarom voor dat als je gewone of afbeeldingen voor referenties wilt gebruiken, altijd dat je dezelfde afmetingen inzet.
Zorg bijvoorbeeld voor afmetingen 300x300px of 400x400px of 450x450px. Net wat jij wenst.
Stap #2: Gebruik Canva of Photoshop
Om stap #1 te kunnen doen, raad ik je aan om te beginnen met een lege lay-out van dus bijvoorbeeld 300x300px (referentie afbeeldingen) in de mooie gratis grafische tool Canva of Photoshop als je dat liever hebt.
In deze blogpost ga ik de stappen uitleggen met het gebruik van Canva i.p.v. Photoshop.
- Als je Canva hebt geopend dan kan je bovenaan je eigen afmetingen toevoegen. Je vult hier dan de afmetingen in
die jij wenst. - Het beste wat je kan doen is een ‘fotoachtergrond’ toevoegen. Deze kan je vinden als je in het linkermenu van Canva naar >elementen gaat. Dan zie je de middelste van de bovenste rij >rasters.
- De eerste die je links ziet, sleep je naar je witte werkveld. Het grote voordeel van dit is, dat als je namelijk jouw foto erin wil zetten dat hij altijd aangepast wordt naar de afmeting van deze template of lay-out.
Dit betekent: snel en efficiënt! Ik neem nu even een vierkant als voorbeeld, maar je kan ook kiezen voor andere vormen. Dat is aan jou. - Zorg ervoor dat je de foto's die je wilt hebben al in je Canva uploads hebt staan of via uploaden toevoegen.
- Sleep de foto’s dan in het foto lay-out en klaar is het.
- Maak een eigen bestandsmap aan op jouw pc of je bureaublad, voor even ‘de snelle touch’.
- Vanuit Canva nummert hij de afbeeldingen zoals de volgorde, 1,2,3,4 etc. Sla deze afbeelding(en) gewoon zo op
deze manier op je computer. - Heb je alle afbeeldingen gehad? Ga dan naar je map toe en ga elke foto de juiste naam geven. – Afbeelding selecteren, Rechtermuis knop, >Naam veranderen. Door >tab te klikken verspringt de selectie naar de eerst volgende afbeelding en geef deze ook een naam.
- Hier ga je jouw plaatje letterlijk overal alvast de juiste benaming geven. Doe het nu, niet achteraf!
Heb je de online Canva Training al gezien?
De Canva training bestaat uit 8 modules waarin je leert hoe dit programma werkt en wat je er allemaal mee kan.
Het belangrijkste is natuurlijk hoe je jouw eigen visuele Look & Feel OVERAL kan toepassen wat zorgt voor die vertrouwensband en merkherkenning.
Maak je eigen logo tot Social Media post tot eigen e-book in jouw professionele stijl! Je leert om dit allemaal als één lijn door te voeren zodat jij werkt aan je online consistente uitstraling.
Stap #3: De juiste naam geven
Hoe geef je jouw plaatjes nou de juiste naam? Je begint eigenlijk altijd wat je bijvoorbeeld op deze afbeelding ziet.
Stel dat je met een referentie afbeelding bezig bent, wat ik vaak altijd doe is het volgende:
1. naam van de persoon
2. plus bedrijfsnaam van de persoon
3. met daarbij het woord ‘referentie’
4. afsluiten met je eigen bedrijfsnaam
Voorbeeld:
Mariska Huijnen van TopGemerkt – referentie _TopGemerkt
of (fictief voorbeeld)
Monica Laters van Virtual Assistent Monica – referentie _TopGemerkt
Zo weet Google tenminste wie er op de foto staat. Als je de afbeelding willekeurig zou opslaan zoals bv 1.png of 2.png of image2080.png weet google echt niet wie en wat er op de foto te vinden is of waarom deze foto bedoeld is.
Stap #4: Foto's verkleinen
Open vervolgens ‘TinyPng’.
Dit is een tool die je helpt je foto’s, plaatjes en afbeeldingen te verkleinen en dit is goed voor de snelheid (laadtijd) van je website, zo hoeft je bezoeker niet eeuwig te wachten voordat je plaatjes zijn geladen.
Google overigens waardeert snelle websites, dus win-win situatie
- Sleep al jou afbeeldingen in TinyPng en hij zal ze voor je verkleinen.
- Als je dit hebt gedaan download je ze allemaal. (Download All)
- Open die ene map, waarbij je ze al had staan maar nog niet verkleind. Via CTRL+C,
kopieer je de afbeeldingen en met CTRL+V plak je ze letterlijk in dezelfde map. - Je krijgt de vraag of je ze er overheen wilt opslaan aan uiteraard klik je: ja
Als je nu naar de bestand grootte kijkt.. zijn ze zeker met de helft verkleind!
En dat.. is precies de bedoeling!
Stap #5: Tegelijk uploaden in WordPress
Hiermee kan je ze allemaal tegelijk uploaden in je WordPress website in je mediabibliotheek.
Stap #6: ALT-code meegeven
Je bent er nog niet helemaal! Wat een stappen hè? Maar dit zijn wel de laatste stappen…
Als je in je mediabibliotheek bent (Dashboard >Media) zie je alle afbeeldingen nu staan.
Rechts zie je dan ook nog een klein werkveld. Hier vind je dan de URL-naam.
Dit is dus de naam hoe je hem opgeslagen hebt vanuit je computer en in welke map hij staat. Als je iemand deze URL-link geeft, komt diegene een losse websitepagina tegen met alleen die ene foto.
Test maar met deze:
http://topgemerkt.nl/wp-content/uploads/2018/11/100pluscontentideeen.png
Kijk maar eens naar oude afbeeldingen, en loop je URL-links maar na, valt je iets op? Heb je het al goed gedaan? Of.. kan je nog wel het één en ander aanpassen?
Vervolgens zie je daaronder ook de ALT-code. Met de ALT-code geef je dus letterlijk aan wat, wie en waarom deze afbeelding er is. Stel de foto wil niet laden, maar de tekst staat er wel, weet de bezoeker wel wat er op die afbeelding zou moeten staan. Maar ook wat je hebt geleerd: Google weet ook wat er op die afbeelding staat.
Want Google is slim, maar je moet hem wel een beetje helpen. Google ‘ziet’ niet wat er op de afbeelding staat. Nee, Google ‘leest’ wat jij als naam hebt gegeven ‘aan’ je afbeelding!
Even een voorbeeld:
Stel je hebt een afbeelding met een chocolade mok vol met marshmallows. Je kan de afbeelding meerdere namen geven natuurlijk:
1. image123.png
2. 5.png
3. choco.png
of
4. Warme chocolade mok met marshmallows en chocoladesaus _TopGemerkt
Welke van de 4 zou Google beter kunnen inlezen en snappen wat er écht op die afbeelding staat? (zie de afbeelding van Stap#3)
TIP:
Als je elke afbeelding op deze manier bekijkt, ze direct deze naam geeft
bij het OPSLAAN OP JE COMPUTER -IN DIE DESBETREFFENDE MAP
of dé map waar je die afbeeldingen wilt hebben.
Ben je meteen goed bezig. Leer het je meteen aan om het op deze manier te doen, ook al heb je haast.
Kopieer de Titel naar de ALT-code, eventueel ook nog bij de omschrijving en tada! Ready to go!
TIP2:
Met de benaming -titel- wordt bedoeld dat je de titel van de afbeelding een naam kan geven.
Scrol maar eens met je muis over één van mijn afbeeldingen. Dat is de naam van de titel. Die kan je dus ook anders aanpassen dan de alt-code.
Keertje sparren over jouw
situatie en groeiambities?
Plan je vrijblijvende matchcall
Wil je weten of ik de juiste persoon ben om je verder te helpen? Plan dan vrijblijvend je gratis matchcall in (per Zoom). Je zit nergens aan vast.
Tijdens de matchcall
- Leren we elkaar beter kennen
- Duiken we in jouw situatie, doelstellingen en groeiambitie
- Bespreken we waar jij tegenaan loopt met je bedrijf
- Bespreken we waar verbeterpunten voor je liggen
- Geef ik je 2 concrete tips om direct door te pakken
We kijken dus of er een klik is en of we samen een TOP-TEAM zijn.
Het kan best zijn dat ik niet de juiste persoon ben om je verder te helpen, dan verwijs ik je graag naar een ander die dat wél kan -- eerlijk is eerlijk: mijn coachtrajecten zijn niet voor iedereen 😉
- 100% vrijblijvend én geheel gratis
- Het kost je slechts 30 minuten van je tijd, maar in return een hoop inzichten
- Makkelijk, snel en volledig online per Zoom


Even alles in het kort samengevat:
- Gebruik bijvoorbeeld voor (referenties) foto's of afbeeldingen altijd dezelfde maten bijvoorbeeld 300x300px of 450x450
- Bewerk het in Canva of Photoshop
- Sla de afbeeldingen op je pc in een (aparte) map.
- Ga naar TinyPng en verklein hierbij je afbeeldingen
- Geef het Beestje de juiste naam in je map
- Laad de foto’s in WordPress
- Meteen de ALT-Code(s) toevoegen zodat je dit niet vergeet
Heel veel succes met het uploaden van jouw mooie foto’s! Zodat het voor jou nu ook niet veel tijd kost om de afbeeldingen in je WordPress te zetten. Meteen goed vanaf het begin!
Nog een laatste tip:
Je kan de URL-link, na het uploaden niet meer aanpassen. De Titel wel.. maar die zal niet veranderen zoals de URL. De ALT-code kan je altijd aanpassen, maar mijn advies is: Zet de naam meteen goed met de gedachte dat je aan je ALT-code denkt, dan zit je in de meeste gevallen het beste
Oke, ik kan het niet laten en ben zo lekker op dreef:
Je kan de maten van je afbeelding ook nog wel aanpassen in WordPress zelf. Als je de afbeelding hebt geplaats kan je het verwijderen via het kruisje of bewerken met het desbetreffende potloodje.
Hier zie je dat je de afbeelding in diverse maten kan zetten. Ook kan je jouw eigen ‘afmetingen’ zelf toepassen. Heb je bijvoorbeeld een 1000x1000 afbeelding, dan kan je hem verkleinen naar 450x450px.
Heel veel succes!
En, wat vond je van dit artikel? Laat een reactie achter onder deze post!
Sharing is Caring 🙂
Liefs, Mariska