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 een echte aanvulling binnen elke website! Maar gebruik ze wel met mate, want jij zult inmiddels ook wel weten dat je website er heel traag van kan worden. Het is daarom heel belangrijk 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
De bestandsnaam moet omschrijven wat er op de foto gebeurd en/of deze moet je belangrijkste zoektermen bevatten, afhankelijk van 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 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 websites afhaalt download je deze vaak in hoge resolutie, 3000 bij 4000 pixels is heel normaal. Ook foto’s die je met je fotocamera maakt zijn zo groot of nog groter: 6000 pixels bij 8000 pixels. Deze afbeeldingen rechtstreeks uploaden naar je WordPress website kun je beter niet 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 afbeeldingen die de volledige breedte van je scherm bedekken 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 indelen. Voor alle andere afbeeldingen is 1000px 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.
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 dus letterlijk en figuurlijk het belang van het comprimeren van je foto’s 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. En heb je meer van zulke gecomprimeerde afbeeldingen op je website staan, dan bespaar je al gauw meerdere MB’s per pagina en zal je website super snel laden!
Zie je het verschil in kwaliteit met het blote oog niet zo goed? (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.
Tijd om foto's en afbeeldingen te optimaliseren voor je website!
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.
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 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.
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.
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.
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.
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.
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.
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:
- Je afbeelding of foto pas je eerst aan naar de juiste afmeting
- Vervolgens comprimeer je de afbeelding zodat de bestandsgrootte afneemt
- Je slaat de afbeelding op met de juiste bestandsnaam die past bij de afbeelding
- En in WordPress voeg je natuurlijk nog een alt tag aan je afbeelding toe met de gewenste zoekterm erin!
