7 tips voor het optimaliseren van
afbeeldingen op je website

Merkbeleving

Kwaliteit

Afbeeldingen spelen een grote rol op een website. Vaak zetten ze de toon van je website.

Voor de merkbeleving van jouw website is de eerste tip misschien heel voor de hand liggend maar ik zie het regelmatig mis gaan: schenk aandacht aan de foto’s en afbeelding op je website. Een fotograaf die bij jouw past weet het verhaal van jou als persoon en jouw bedrijf ontzettend goed te vangen, zodanig dat het meer dan 1000 woorden zegt. Wat foto’s een bezoeker vertellen weegt dus zwaar in het proces van bezoeker naar klant. Daar kun je met woorden bijna niet tegenop boxen 😉

Gebruiksvriendelijkheid

Snelheidsoptimalisatie

In mijn ervaring wordt de snelheid – of eerder het gebrek daaraan – van een website in de meeste gevallen mede veroorzaakt door te grote, en zware afbeeldingen. Hierdoor duurt het lang voordat pagina’s laden. Bezoekers laten wachten is niet aan te raden, omdat we online nou eenmaal het geduld van een peuter hebben 😉 Zorg dus altijd voor lichte bestanden!

Dit kun je bijvoorbeeld doen d.m.v. de gratis tool TinyPNG. Mocht je het adobe pakket hebben waarin je de foto’s bewerkt via Lightroom of Photoshop verklein ze dan direct bij het exporteren. Zorg dat je een originele kopie van de afbeelding bewaard, zodat je altijd nog terug kunt vallen op het grote bestand voor eventueel later gebruik.

Het beste is om de foto te schalen naar het formaat waarin het wordt weergeven. Is dat full width? Dan is dat vaak 1920 px (pixels).

Niet full width? Het is lastig te zeggen welk formaat voor jou het beste is, omdat elke website een ander ontwerp heeft. Werk je met een premium thema/template? Dan zullen de ontwikkelaars van dit thema waarschijnlijk informatie hebben over de optimale formaten voor jouw thema.

Neem bijvoorbeeld een fotovlak van 600 x 600 px op je website pagina waarin je een afbeelding wilt plaatsen. Als je daarin een foto plaatst die eigenlijk 3000px is, dan is er dus een hoop onnodig gewicht die je website vertraagd. Zorg er dan voor dat het verkleind word naar 600 x 600 px, voor een meest optimale weergaven. Zonder kwaliteitsverlies. Want andersom, als je een 200 x 200 px upload naar een vlak van 800 x 800 px dan zal de weergaven vaag/pixelig zijn.

Lazy Loading

Door middel van lazy loading wordt het daadwerkelijk laden van een element op je website uitgesteld tot het moment waarop het nodig is. Dit zorgt ervoor dat bij het openen van een website niet alles in één keer geladen hoeft te worden en je website dus sneller is. Hier heb je bijvoorbeeld de plugin a3 Lazy Load voor.

Lees mijn blog ‘10 tips voor het optimaliseren & onderhouden van je eigen website’ voor meer tips over het optimaliseren van de laadtijd van je website.

Vindbaarheid

SEO Naam

In een goede webtekst maak je gebruik van zoekwoorden. Woorden die jouw doelgroep zoeken wanneer ze op zoek zijn naar jouw dienst of product. Door deze in te zetten kun je dus gevonden worden via Google door je doelgroep. Maar je wilt dat een tekst ook vooral fijn leesbaar is en niet helemaal volgepropt wordt met zoekwoorden. Je maakt een website in eerste instantie voor mensen en niet voor Google.

Een super simpele manier om daarom toch meer relevante woorden in te kunnen zetten op een pagina is in de bestandsnaam van de afbeelding zelf, alvorens je het naar je website upload.

Vaak heet een afbeelding van origine iets als ‘IMG003423.jpg’, maar hier kan Google helemaal niks mee. Maar ‘Ruwe-diamant-ring-edelsmid-eindhoven.jpg’ daarentegen.. Geef de afbeelding een naam die relevant is voor de pagina waarop en de tekst waarbij het geplaatst gaat worden, waar hoogstwaarschijnlijk ook dezelfde of vergelijkbare zoekwoorden in voor komen.

Alt tekst (Alternatieve tekst)

Afbeeldingen op je website wil je daarnaast voorzien van een alt-tekst. Daarin beschrijf je wat er op de afbeelding te zien is. Zorg dat de tekst zo goed mogelijk omschrijft wat er te zien is, in eerste instantie is dit namelijk bedoeld ten behoeve van blinden en slecht-zienden. De tekst zal worden voorgelezen wanneer ze er met de muis overheen gaan. De ALT tekst wordt ook getoond als je foto om wat reden dan ook niet geladen kan worden. Maar verder zal het niet zichtbaar zijn voor bezoekers (alleen via de broncode).

Binnen WordPress krijg je deze optie direct te zien bij het uploaden van afbeeldingen.
Ook hier kun je zoektermen in verwerken. Maar omdat leesbaarheid zo belangrijk is, zou ik eerst kiezen voor een alt-tekst die de toegankelijkheid ten goede komt, en probeer het daarna te verbeteren voor SEO.

Samengevat

1. Kies voor kwalitatieve fotografie die jouw branding versterkt
2. Comprimeer je afbeelding naar het formaat waarin het wordt weergeven (niet groter, maar ook zeker niet kleiner voor de beste kwaliteit)
3. Optimaliseer je laadsnelheid door o.a. gebruik te maken van lazy loading.
4. Geef je afbeelding een SEO proof naam
5. Plaatst de afbeelding op de betreffende pagina en bij de betreffende teksten
6. Geef je afbeelding een alt-tekst wat de afbeelding goed omschrijft, inclusief zoektermen
7. Zorg dat deze tekst toegankelijk is, zodat blinden en slechtzienden bij het horen van de tekst een duidelijk omschrijving ontvangen