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.

Het is mogelijk om je website ergens anders onder te brengen, maar hosting via Satdesign biedt een aantal belangrijke voordelen.
Satdesign is een klein bedrijf. Twee man sterk. Dat is even wennen als je gewend bent aan een groot webdesignbureau. Ik licht je daarom toe wat je kunt verwachten van onze bereikbaarheid.
Satdesign zit sinds 1 juni 2021 in het Blushuis in Breda. Graag vertel ik je in deze blog meer over dit gebouw. Waarom zitten we hier en wat zijn de voordelen om in een ‘verzamelgebouw’ onze zaken te doen?
Je website gebruikt een ‘cache’. Het kan daarom zijn dat een gemaakte wijziging niet altijd direct zichtbaar is voor de bezoeker. Er is een eenvoudige manier om de wijziging direct zichtbaar te maken voor iedereen.
Regelmatig vragen ontwerpers mij hun design om te bouwen tot een website. Standaard krijg ik daarna de vraag ‘wat moet ik hiervoor aanleveren?’. In deze blog een kijkje in de keuken. Zo zie je hoe ik werk en wat ik nodig heb om jouw ontwerp tot leven te brengen.
Een website is een belangrijk onderdeel van je online aanwezigheid en het is essentieel dat het up-to-date blijft om de aandacht van bezoekers te trekken en vast te houden.
Tegenwoordig is het hebben van een zakelijke website een essentieel onderdeel van elk bedrijf. Of je nu een klein of groot bedrijf hebt, een website kan je helpen om je klantenbestand te vergroten en je merk te versterken.
Een belangrijk aspect van webdesign is het creëren van een website die gemakkelijk te gebruiken is voor jouw bezoekers. Het optimaliseren van jouw website voor een betere gebruikerservaring kan resulteren in een hogere betrokkenheid van jouw publiek en een betere conversieratio.
Voor onze websites betaal je een eenmalige prijs én sluit je een maandelijks onderhoudsplan af. Hierbij betaal je iedere maand voor het goed en veilig functioneren van je site. We leggen je uit waarom we met een onderhoudsplan werken.