Zo optimaliseer je afbeeldingen voor je website!

Het komt vaak voor dat je even snel een afbeelding verandert op jouw website. Dit kan heel simpel zijn en verloopt vaak zonder problemen. Helaas zijn er in veel gevallen meer gevolgen dan je denkt. In deze blog vertel ik hoe je je afbeeldingen maximaal kunt optimaliseren voor jouw website met behulp van onderstaande onderwerpen.

• Voordelen van optimalisatie
• Comprimeren
• De grootte
• Juiste bestandsformaat
• Naamgeving
• ALT Tags
• EXIF data

Wat zijn de voordelen van afbeelding optimalisatie?

Afbeeldingen die geoptimaliseerd zijn, zijn minder groot en beter leesbaar voor een computer. Dit betekent dat de pagina's sneller geladen kunnen worden en de inhoud van een afbeelding gelezen kan worden door een computer.

De voordelen zijn: een snellere laadtijd voor de bezoeker, minder opslaggeheugen en betere posities in Google voor jouw website.

Waarom moet ik mijn afbeelding comprimeren?

Op het internet vind je overal afbeeldingen: groot, klein, scherp en onscherp. Deze afbeeldingen verschillen allemaal van kwaliteit. Deze kwaliteit kun je op je scherm maar tot een bepaalde mate waarnemen. Al deze ‘extra’ kwaliteit neemt eigenlijk alleen maar extra geheugen in beslag.

Door je afbeelding te comprimeren zorg je dat jouw afbeelding nog steeds een goede kwaliteit heeft, maar de ‘overbodige’ kwaliteit wordt automatisch weggelaten. Het bestand wordt zo een stuk kleiner waardoor de webpagina ook veel sneller ingeladen kan worden.

Nu vraag je je waarschijnlijk af: hoe comprimeer ik mijn afbeelding dan? Een makkelijke tool kun je vinden via de website van CompressJPEG. In deze tool upload je jouw JPEG en PNG afbeeldingen en de tool doet de rest. Door te klikken op de download knop heb je jouw afbeelding gecomprimeerd.

Als voorbeeld: neem een afbeelding van bijvoorbeeld 2.5MB. Na een compressie is de grootte met 51% afgenomen zonder dat er veel kwaliteit verloren is gegaan op het oog.

Hoe groot moet mijn afbeelding zijn?

We zien het vaak gebeuren: even een foto maken met je smartphone en dan direct op de website. Vaak zijn de formaten van deze foto’s echter veel te groot voor een website.

Een iPhone maakt foto’s van bijvoorbeeld 6000 bij 4000 pixels, terwijl een website afbeeldingen vaak in hooguit 2500 pixels breed laat zien (afhankelijk van je schermformaat). Al die pixels zijn dus overbodig en zorgen voor extra kwaliteit die je met het blote oog niet of nauwelijks ziet.

Afbeeldingen zijn met de huidige kwaliteit van telefoons dus al snel enkele MB’s. Voor een website is dit veel te veel, aangezien elke milliseconde telt bij het inladen van een pagina. Google straft trage websites af en bezoekers haken af als het laden te lang duurt.

Probeer altijd een maximaal formaat aan te houden van ongeveer 0.5MB / 500KB voor pagina brede afbeeldingen. Deze grootte van een afbeelding is ruim voldoende voor een website. Zo blijven kwaliteit en laadtijd optimaal.

Onthoud deze getallen; als je afbeelding groter is weet je dat er nog winst te behalen is.

Welk bestandsformaat moet ik gebruiken voor mijn afbeelding?

Voor afbeeldingen op het internet komen de bestandsformaten .PNG en .JPG (of .JPEG) het vaakst voor. Tussen deze twee formaten zitten verschillen, dit zijn voornamelijk kwaliteit en transparantie.

PNG bestanden kunnen een transparante achtergrond hebben, dit is bijvoorbeeld handig bij een logo of afbeelding die niet volledig rechthoekig is. Verder kan een JPG bestand verder gecomprimeerd worden, de grootte van een JPG bestand kan dus veel kleiner worden dan een PNG bestand.

Gebruik voor logo's en icoontjes een PNG formaat. Voor (grote) afbeeldingen die rechthoekig zijn gebruik je een JPG formaat.

Hoe geef je jouw afbeelding een goede naam?

De naam van jouw afbeelding heeft meer invloed dan je denkt. Zo leest Google bijvoorbeeld de naam waardoor het een idee kan krijgen wat er op de afbeelding te zien is.

Wanneer de naam van de afbeelding bestaat uit de belangrijkste zoekwoorden van jouw website, is er meer kans op een hogere positie op deze zoekwoorden in de zoekresultaten. Bekijk van tevoren dus welke zoekwoorden je moet gebruiken en plaats deze in de naam van jouw afbeelding.

Tip: Een goede afbeeldingsnaam bestaat uit zoekwoorden gekoppeld met een ‘-‘. Bijvoorbeeld ‘groene-kamerplant-witte-bloempot.jpg’. De (dash) streepjes zijn hier beter geschikt dan de liggende streepjes ‘_’.

Hoe geef je jouw afbeelding een ALT-tag?

De ALT-tag is een beschrijvende tekst die vertelt wat er op de afbeelding te zien is. Deze tag wordt ook gelezen door Google en is voor de bezoeker eigenlijk onzichtbaar.

Gebruik ook in deze tag de juiste zoekwoorden en vertel in beschrijvende woorden wat de inhoud van de afbeelding is. Met een goede naam en ALT-tag zijn jouw afbeeldingen ook goed vindbaar in bijvoorbeeld Google Afbeeldingen.

De ALT-tag kan een combinatie zijn van enkele trefwoorden en kunnen achter elkaar gezet worden met een spatie er tussen.

Na het optimaliseren van de naam en ALT-tag ziet de bezoeker dus op het oog geen verschil. In de code van de website is de ALT-tag echter wel zichtbaar en dat ziet er zo uit:

Haal het maximale uit jouw afbeelding door de EXIF-data aan te passen.

EXIF-data is een reeks van informatie die opgeslagen is in een afbeelding en is verder niet zichtbaar. Denk hierbij aan de datum, tijd, locatie, camera en bepaalde instellingen.

Let op, pas de EXIF-data pas aan nadat je de afbeelding gecomprimeerd hebt. Bij het comprimeren gaat deze namelijk vaak verloren om data te besparen.

Het invullen of aanpassen van deze informatie gaat alleen in de daarvoor bestemde programma’s, zoals Photoshop.

Met behulp van bovenstaande informatie kun je jouw website optimaliseren voor een betere laadtijd en hogere posities in Google.

Wil je graag hulp of meer informatie over dit onderwerp? Neem even contact met ons op, we helpen je graag.