Satdesign kubus
Leestijd: 7 min.
Leestijd: 7 min.

Hier moet je op letten bij het plaatsen van afbeeldingen op je website

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.

Pepijn van Rijen

Pepijn van Rijen

Deel dit artikel:

Blogs

We helpen je met onze energie graag een stap vooruit. Daarom vinden we het leuk om onze kennis over online ondernemen met je te delen.

Lees hieronder onze laatste bijdragen.

Online ondernemen is leuk, maar er komt veel bij kijken. Privacy is een belangrijk thema. Als je een eigen website hebt, moet je rekening houden met twee zaken: cookies en de verwerking van persoonlijke gegevens. Door het opstellen van een goede cookieverklaring en privacyverklaring voldoe je aan de wetgeving.
Bekijk wat een copywriter volgens Danielle echt uniek maakt in de blog die zij schreef voor Frankwatching.
Om online te groeien moet je het vertrouwen winnen van je bezoekers. Zonder vertrouwen komt er geen deal. We laten je zien met welke bewezen strategie je dit voor elkaar krijgt en wat het je oplevert.
Het is de grootste digitale ergernis. Spam. Het is belangrijk dat je herkent wanneer je met spam te maken hebt. Voor je het weet heb jij je wachtwoord, pincode of andere gevoelige gegevens gedeeld. Gelukkig houdt de server 99% van alle spamberichten tegen, maar met deze tips ben je ook goed voorbereid op die ene mail die er toch nog tussendoor glipt.
WordPress heeft veel mogelijkheden. Van het maken van een website met kant-en-klare templates tot het volledig programmeren van alle onderdelen. Kies je voor een maatwerk website dan houdt je webbouwer rekening met jouw wensen. Hij maakt het je zo makkelijk mogelijk om zelf inhoud aan te passen of toe te voegen. We delen een aantal voorbeelden uit onze praktijk met je.
Je website is een soort extra werknemer voor je bedrijf. Hij helpt je aan nieuwe klanten. En net als je werknemers kan hij kuren vertonen waardoor hij niet optimaal presteert. Door je website regelmatig te onderhouden, voorkom je problemen. Ik leg je uit waarom een onderhoudscontract een fijne verzekeringspolis is.
Beter goed gejat dan slecht bedacht toch? Nou, niet dus. Zelfs als er al 99 blogs over een onderwerp bestaan, dan nog wil je niet dat die van jou lijkt op die van een ander. Je wil opvallen en indruk maken. Met deze tips zorg je voor een originele blog en voorkom je plagiaat.
Bezoekers haken af als je website niet snel genoeg laadt. Gelukkig zijn er voldoende mogelijkheden om je WordPress website sneller te maken. Met een cache plug-in schieten je prestaties omhoog. We bespreken de voor- en nadelen van deze technische truc.
Ga je aan de slag met teksten schrijven voor je website of blog? Dan wil je natuurlijk wel dat iemand je teksten leest. Dat doel behaal je niet als je een suffe tekst schrijft of als niemand je pagina kan vinden. In deze blog deel ik daarom de basisbeginselen van het schrijven van SEO-teksten met je. Dit geeft jou de handvaten om content te ontwikkelen die wél indruk maakt.

Contact

Via WhatsApp:
Of via e-mail: