Afbeeldingen en foto’s optimaliseren voor je WordPress website

afbeeldingen en foto's optimaliseren voor je wordpress website

Eén van de factoren die het succes en de kwaliteit van jouw website bepalen zijn de afbeeldingen. Het liefst gebruiken we er zo veel mogelijk want je website wordt hier een stuk aantrekkelijker van. Afbeeldingen zijn super tof! Maar gebruik ze wel met mate, want jij zult inmiddels ook wel weten dat je website er enorm sloom van wordt. Het is daarom een vereiste dat je afbeeldingen en foto’s op de correcte wijze optimaliseert alvorens je ze upload naar je WordPress website. In dit artikel deel ik mijn werkwijze met je en laat ik je zien hoe jij afbeeldingen kunt optimaliseren zodat ze perfect in jouw WordPress website zullen passen!

Voordat we afbeeldingen en foto’s gaan optimaliseren…

Allereerst eventjes wat basics en achtergrondinformatie. Er zijn 3 factoren waar we rekening mee moeten houden bij het optimaliseren van afbeeldingen voor je website:

De bestandsnaam optimaliseren

Deze moet omschrijven wat er op de foto gebeurd en/of deze moet je belangrijkste zoektermen bevatten, afhankelijk op welke pagina de afbeelding komt te staan. De bestandsnaam ‘img0012.jpg’ is dus fout. Als het een foto is waar ik zelf op sta zou ik hem ‘hetty-van-der-wal.jpg’ noemen, dat is namelijk relevant. Afbeeldingen in deze blog hebben bestandsnamen die lijken op ‘afbeeldingen-optimaliseren-wordpress.jpg’, want ook dat is relevant voor deze blog en deze pagina.

De bestandsafmeting optimaliseren

De afmeting van je afbeelding vormt de basis van het optimalisatie proces wat we gaan doorlopen. Als je foto’s van stockphoto sites afhaalt download je deze vaak in hoge resolutie, 3000 bij 4000 pixels is heel normaal. Ook foto’s die je met je foto camera maakt zijn zo groot of nog groter: 6000 pixels bij 8000 pixels. Deze afbeeldingen rechtstreeks uploaden naar je WordPress website is het slechtste wat je kunt doen. Door deze afmeting kleiner te maken, en waar mogelijk zelfs naar de ware grootte zoals de afbeelding uiteindelijk op je website komt, bespaar je tientallen MB’s. Voor volle breedte afbeeldingen of header afbeeldingen kun je 2000px breed aanhouden. De hoogte maakt niet uit en is afhankelijk van hoe jij het design van je website wilt opmaken. Voor alle andere afbeeldingen is 1000px of 1200px breed voldoende. Gebruik je iconen of andere thumbnails? Dan ben je met 150px of 250px al klaar. Onthou dat je hoofdzakelijk wilt optimaliseren op de breedte van de foto. Onze beeldschermen zijn namelijk ook in de breedte georiënteerd.

De bestandsgrootte optimaliseren

Door de bestandsafmeting te verkleinen, verklein je automatisch ook de bestandsgrootte. We kunnen de afbeelding echter nog kleiner maken door hem te comprimeren. Hiermee verlagen we de kwaliteit van de afbeelding. Je hebt het misschien wel eens gezien: een .JPG afbeelding die troebele vlakken en kleuren heeft. Deze afbeelding is dan overgecomprimeert en heeft te veel kwaliteitsverlies geleden. Bij het comprimeren van afbeeldingen is het dus de kunst om het kwaliteitsverlies zo dusdanig in te stellen dat de afbeelding optimaal is gecomprimeerd zonder met het blote oog enig verlies in kwaliteit vast te stellen. Uit mijn ervaring is een kwaliteitspercentage van 60% optimaal.

afbeeldingen foto optimaliseren wordpress website

Als je goed kijkt zie je tussen de linkerfoto en middelste foto weinig verschil. Mijn haren zijn op beide foto’s even scherp en ook mijn tanden hebben duidelijke contouren. Tussen de middelste foto en de rechtse foto zie je meer verschil: de kwaliteit is hier dusdanig naar beneden gebracht dat mijn haren onscherp worden en de contouren van mijn tanden wazig. Als je de linkerfoto niet zou zien maar enkel de rechterfoto met het grootste kwaliteitsverlies zou je alsnog zeggen ‘goh, dat is een tamelijk scherpe foto hoor!’. Je ziet hier letterlijk en figuurlijk het belang van je foto’s comprimeren alvorens je ze upload naar je WordPress website. Ik kies zelf altijd voor een kwaliteit rond 60%, je ziet praktisch geen verschil met de foto die niet is gecomprimeerd (kwaliteit 100%). De bestandsgrootte is echter toch met 253KB verlaagt. Als jouw internet dus een downloadsnelheid van 1MB per seconde zal de pagina waar je deze afbeelding online plaatst al 0,25 seconden sneller laden! Halleluja.

Zie je het verschil in kwaliteit met het blote oog niet zo (des te meer reden om afbeeldingen te comprimeren, want kwaliteit is dan geen excuus meer)? Bekijk dan de volgende afbeelding waarin ik mijn tanden drie maal uitvergroot heb. Hier zie je wel degelijk verschil! De rechterfoto is erg wazig en op mijn kin zie je bijna de korrelige, verkleurde ‘blokjes’ die het gevolg zijn van overcomprimeren. Een kwaliteitspercentage van 60% is dus the way to go.uitvergroting afbeeldingen optimaliseren

Tijd om foto’s en afbeeldingen te optimaliseren voor je website!

Voor deze handleiding gebruik ik het fotobewerkingsprogramma Photoshop. Ik kan me echter voorstellen dat veel mensen geen toegang hebben tot dit programma. Mocht jij tot die mensen behoren: download dan het gratis programma GIMP. In tegenstelling tot Photoshop is GIMP gratis. En voor het optimaliseren van foto’s en afbeeldingen werkt het vergelijkbaar!

Stap 1: Open een afbeelding en pas de afmetingen aan

Om te beginnen open je de afbeelding die je wilt optimaliseren voor je website in Photoshop. Nadat je de foto hebt geopend gaan we allereerst de afmetingen van de foto aanpassen. Dit kun je doen onder Image > Image Size.

 

wordpress website afbeeldingen optimaliseren

 

Het is hier belangrijk dat je weet hoe je de foto in je website wilt verwerken. Wordt het een foto over de volle breedte? Dan start ik vaak met de breedte op 2000px zetten (bij Width). De hoogte pas ik meestal aan door een stuk van de boven en/of onderkant van de afbeelding af te halen met de crop tool. Gebruik je de afbeelding ergens anders op je website? Dan is 1000px breed of 1200px breed vaak al ruim voldoende. In onderstaande afbeelding die ze je originele afmetingen. Omdat Constrain Proportions aangevinkt staat veranderd de hoogte automatisch ook als je de breedte wijzigt. In 99% van de gevallen wil je dit, omdat de afbeelding in proportie moet blijven.

 

fotos optimaliseren website

 

De foto in dit voorbeeld mag een vierkante foto worden die ik ga uploaden naar mijn WordPress website. Om deze reden zet ik de hoogte van de afbeelding op 1000px zodat de breedte boven dezelfde waarde uitkomt: 1040px. In de volgende stap gaan we dit netjes rechttrekken en optimaliseren.

 

wordpress website fotos optimaliseren

 

Stap 2: Pas de canvas afmeting van de afbeelding aan

In de vorige stap hebben we de afmeting van de afbeelding zelf gewijzigd terwijl de proporties behouden zijn gebleven. De foto is echter nu nog niet vierkant. Daarom gaan we nu de canvas afmeting aanpassen. Je kunt dit eigenlijk vergelijken met het croppen waarbij je een stuk van de afbeelding afsnijdt. Bij het aanpassen van de enkel de image size crop je dus niets en blijft het hele beeld behouden.

We navigeren weer naar Image, maar kiezen dit keer Canvas Size.

 

afbeeldingen optimaliseren wordpress

 

In het pop-up scherm pas je de Width ook naar 1000px aan. Het rastertje daaronder geeft aan hoe de afbeelding eigenlijk gecropped gaat worden. Het focuspunt zit in het midden en ik maak de breedte van de afbeelding kleiner, waardoor er links en rechts een stuk van de afbeelding zal worden afgesneden. In dit geval 20px links en 20px rechts.

 

afbeeldingen optimaliseren wordpress website

 

Stap 3: Je afbeelding of foto comprimeren

Nu we zowel de afmeting van de afbeelding als de afmeting van het canvas juist hebben ingesteld en hieruit een perfecte, vierkante afbeelding is gerold, moeten we de afbeelding op de juiste wijze opslaan. In deze stap gaan we de afbeelding comprimeren. Navigeer naar File > Save for Web en selecteer in het pop-up scherm de juiste instellingen.

 

website wordpress foto optimaliseren

 

Het Save for Web pop-up scherm kan een beetje overweldigend lijken, maar er is maar een enkel dingetje wat we moeten doen! Zorg dat je rechtsbovenin het scherm de juiste bestandsextensie selecteert. Voor afbeeldingen en foto’s die je wilt uploaden naar je WordPress website is dit vrijwel altijd .JPG. Je kunt zowel de compressie via low, medium en high instellen, maar je kunt ook de quality aanpassen op een schaal van 1 tot 100. Ik kies in dit geval voor 60, omdat ik hiermee geen kwaliteitsverlies in de afbeelding zal vaststellen en de bestandsgrootte toch aanzienlijk zal verlagen. Links onderin zie je wat de bestandsgrootte zal worden als je de afbeelding exporteert: 194KB. Deze grootte is uitstekend!

Kies Save onderin, zoek een plek op je computer of laptop om de afbeelding op te slaan en je bent klaar! Geef je afbeelding in dit geval ook direct een goede bestandsnaam mee, bij voorkeur een beschrijvende naam.

 

foto afbeeldingen optimaliseren

 

Stap 4: Upload je geoptimaliseerde afbeelding naar je WordPress website!

Tot slot hoef je enkel nog je afbeelding te uploaden naar je WordPress omgeving en je bent klaar. Je hebt nu een afbeelding met perfecte afmeting en in een goede compressiestaat. Het optimaliseren van foto’s en afbeeldingen voor je website is op deze manier vlot, makkelijk en met een uitstekend resultaat!

Onthou dus goed:

  1. Je afbeelding of foto pas je eerst aan naar de juiste afmeting
  2. Vervolgens comprimeer je de afbeelding zodat de bestandsgrootte afneemt
  3. Je slaat de afbeelding op met de juiste bestandsnaam die past bij de afbeelding
  4. En in WordPress voeg je natuurlijk nog een alt tag aan je afbeelding toe met de gewenste zoekterm erin!

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Scroll naar top