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.

Op 15 mei 2002 werd het startschot gegeven voor Satdesign, inmiddels al weer 2 decennia geleden. Een mooi moment om terug te kijken op 20 jaar websites ontwikkelen.
Verkoop jij online producten aan consumenten, bijvoorbeeld via een webshop of social media? Grote kans dat je reviews verzamelt om je bezoekers te informeren over de kwaliteit van je producten. Vanaf 28 mei 2022 krijg je te maken met nieuwe Europese regels die moeten zorgen voor betrouwbare reviews.
Een negatieve review brengt je bloed al snel aan het koken. En al helemaal als je het gevoel hebt dat de klant onterecht zo negatief is. Maar wat doe je eraan? Verwijderen of reageren? Ik leg je uit wat beter is, zo kun jij deze situatie in jouw voordeel laten werken.
Als je begint met zakelijk bloggen dan is de inspiratie vaak ver te zoeken. Of je loopt juist over van de ideeën en weet niet waar te starten. In beide gevallen ben je op zoek naar het beste onderwerp om over te schrijven. Ik leg je uit welk onderwerp onmisbaar is als je indruk wil maken op je doelgroep.
Wie dieper in de hosting van een website duikt, komt de term DNS tegen. De letters staan voor Domain Name System, maar wat is DNS eigenlijk?
De agenda van iedere klusser, loodgieter en schilder zit tegenwoordig bomvol. En dat bijna allemaal via via want de website van de meeste bouwbedrijven is niet bepaald een klantenmagneet. Terwijl een goede site je, ook in deze tijd, veel oplevert. We bekijken waarom het juist nu interessant is om te investeren in een sterke website.
Hoe vaak gebruik jij Google om iets op te zoeken? En op welk zoekresultaat klik je dan? Waarschijnlijk kijk je niet verder dan de eerste pagina met zoekresultaten. Je snapt dus het belang van een goede positie in Google. Maar ja, dat kost wel geld. In deze blog bespreken we of het slim is geld te investeren in zoekmachineoptimalisatie.
WordPress heeft meerdere pagebuilders waarmee je mooie websites kunt ontwikkelen. Een betaalde plugin die steeds populairder wordt is Elementor. We bespreken de belangrijkste voor- en nadelen van WordPress Elementor. Klein tipje van de sluier: in onze ogen hebben we het hier over de beste pagebuilder die er is, je leest dus meer voor- dan nadelen.
Bloggen is niet meer weg te denken als marketingstrategie. Maar sommige mensen zien alleen de nadelen. Het kost tijd, ze weten niet waarover ze moeten schrijven en die ene blog die ze ooit schreven leverde niets op. Maar bloggen is juist heel waardevol voor je bedrijf. In deze blog daarom 7 redenen om wel te gaan bloggen.

Contact

Via WhatsApp:
Of via e-mail: