De meeste websites staan vol met afbeeldingen. Heel logisch, ze geven sfeer en laten goed zien wie je bent en wat je doet. Maar die afbeeldingen kunnen je website enorm vertragen. En dat betekent dat bezoekers afhaken en Google je bestraft met een slechte positie in de zoekresultaten. We bespreken wat je kunt doen om dat te voorkomen.
Gebruik het juiste bestandsformaat voor afbeeldingen
Er zijn 2 bestandsformaten die browsers goed ondersteunen. Dat zijn JPG (ook wel JPEG genoemd) en PNG. Je kunt beide formaten op je website gebruiken, maar er is een belangrijk verschil. PNG is namelijk qua opslag véél groter dan JPG. Dat komt omdat een JPG-afbeelding veel beter gecomprimeerd (verkleind) kan worden, waardoor die tot wel 4x minder opslagruimte gebruikt dan een PNG-bestand. In de meeste gevallen kun je dus beter een JPG-afbeelding gebruiken. Dit geldt niet als je een afbeelding gebruikt met een transparante achtergrond, bijvoorbeeld bij een uitgeknipte afbeelding op een gekleurde achtergrond. Dit is alleen mogelijk bij PNG-bestanden.
Het plaatsen van logo’s
Je kent nu de voor- en nadelen van JPG en PNG. Maar er is nog een bestandsformaat: SVG. Dit zogenaamde “vectorbestand” wordt gebruikt voor logo’s en iconen. Een SVG-bestand gebruikt heel weinig opslagcapaciteit. In tegenstelling tot bij normale afbeeldingen wordt niet van iedere pixel de inhoud opgeslagen, maar worden alleen de lijnen van a naar b beschreven. Dat betekent dat dit formaat alleen geschikt is voor afbeeldingen met egale kleuren en niet te veel details. Denk daarbij aan logo’s of iconen. Wanneer er dus een SVG-versie beschikbaar is, gebruik die dan.
Het belang van de juiste resolutie
Een afbeelding die weinig opslagruimte gebruikt wordt snel geladen. Het is dus belangrijk om zo min mogelijk opslagcapaciteit te gebruiken. Hoeveel ruimte een afbeelding gebruikt wordt grotendeels beïnvloed door de resolutie van de afbeelding. De resolutie geeft aan hoe groot de afbeelding eigenlijk is. Stel: je hebt een vierkante afbeelding van 300 x 300 pixels en een andere afbeelding van 1200 x 1200 pixels. De eerste gebruikt veel minder opslagruimte. Maar als je die afbeelding vervolgens paginabreed op je website zet, dan rekt de foto uit en wordt hierdoor onscherp. Klein is fijn, maar je moet wel rekening houden met de plaats waar je de afbeelding wil gebruiken.
Wat is de juiste resolutie?
Het is slim om de afbeelding niet groter te plaatsen dan nodig is. Wanneer de afbeelding over de volle breedte van het scherm wordt geplaatst, gebruik dan een afbeelding die ongeveer 2048 pixels breed is. Staat een afbeelding over de helft van de pagina, gebruik dan 1024 pixels.
Wanneer je in WordPress een afbeelding uploadt, worden er automatisch verschillende versies opgeslagen. In Elementor kan je vervolgens bij de afbeelding widget kiezen welke versie je gebruikt. Daar zie je bijvoorbeeld bij “Afmeting afbeelding” de instelling “Large 1024 x 1024” staan. Test wat de beste instelling is. De kleinste optie waarbij de afbeelding nog scherp is, heeft de voorkeur.
De juiste headerfoto
De headerfoto is de afbeelding die helemaal bovenin staat. Veel websites gebruiken hier een foto over de volle breedte van de pagina. Maar op een desktop is een pagina breder dan op een laptop. Daarom rekt de afbeelding mee met de pagina. Vaak staat de hoogte van de afbeelding wel vast. Het gevolg is dat je op een laptop een ander deel van de afbeelding ziet dan op een groot scherm. Als je een headerfoto uitkiest moet je hier rekening mee houden. Kies een foto die ook nog mooi is als slechts een deel ervan wordt getoond. Dus met niet te veel details want vooral de bovenrand of onderrand van de foto kunnen wegvallen op sommige schermen.
Het vervangen van een foto op je website
Staat er al een afbeelding op je pagina maar wil je die vervangen? Kies dan een afbeelding die dezelfde verhouding heeft. De lay-out van de pagina blijft dan hetzelfde. Voor dit klusje is het handig om een fotobewerkingsprogramma te gebruiken zoals Paint, Photoshop of Affinity. Je slaat eerst de huidige afbeelding op en opent hem met het bewerkingsprogramma. Hier bekijk je de resolutie. Vervolgens sla je de nieuwe afbeelding in dezelfde resolutie op. Vind je dat lastig? Vraag dan je webbouwer om hulp.
Kun je foto’s van je telefoon gebruiken?
Als je een goede camera hebt op je telefoon dan is dit in principe mogelijk. Let wel op het bestandsformaat dat je telefoon gebruikt voor foto’s. Meestal is dat JPG. Dat is een prima bestandsformaat. Maar een iPhone slaat afbeeldingen regelmatig op in Apple’s nieuwe “HEIC” formaat. Dit formaat is kleiner en dus eigenlijk beter, maar wordt nog niet ondersteund door WordPress en de meeste browsers. Dit kun je oplossen door de foto naar jezelf te mailen, de iPhone maakt er dan wel een JPG-formaat van. Tip: gebruik geen foto’s die via WhatsApp zijn verstuurd. WhatsApp verkleint foto’s dermate, dat de kans bestaat dat de kwaliteit te laag wordt.
Kan WordPress foto’s automatisch verkleinen?
WordPress heeft plugins waarmee je foto’s automatisch verkleint zodat ze minder ruimte in beslag nemen. Satdesign gebruikt hiervoor de betaalde premium plugin “Imagify”. Hiermee worden grote afbeeldingen automatisch verkleind en beter gecomprimeerd. Wanneer deze plugin actief is in je website, is het nog steeds aan te raden om een afbeelding niet al te groot te uploaden. De originele afbeelding wordt namelijk ook bewaard en die neemt dan onnodig veel ruimte in beslag in je hostingpakket.
Een ander voordeel van Imagify is dat het foto’s ook opslaat in het bestandstype WEBP. Dit formaat wordt door Google geadviseerd maar wordt in fotobewerkingsprogramma’s niet vaak gebruikt. Imagify zet je JPG en PNG-afbeeldingen automatisch om in deze Google-vriendelijke variant.
Conclusie
Er zijn dus best veel dingen waar je aan moet denken bij het optimaliseren van je website. Probeer bovenstaande punten aan te houden. Lukt dat niet? Accepteer dan dat je website wat “zwaarder” is en dus misschien minder goed gevonden wordt in Google. Of vraag je webbouwer om hulp bij het plaatsen van de afbeeldingen.