Invloed van afbeeldingen op je website

2019

Afbeeldingen geven een website grotendeels sfeer. Met afbeeldingen kun je duidelijkheid verschaffen, de website sfeervoller maken of een professionele uitstraling creëren. Echter kunnen ze door hun formaat ook een negatieve werking hebben. Afbeeldingen nemen een stuk meer ruimte in beslag dan tekst. Dit betekent dat ze een stuk meer schijfruimte innemen op de server en dat de laadtijd van de website er drastisch op achteruit kan gaan. Gelukkig zijn er genoeg manieren om problemen te voorkomen.

Size matters.

Afbeeldingen kunnen snel oplopen in bestandsformaat. Daarom is het goed om naar de grootte te kijken. Zowel de grootte van het bestand (aantal KB, MB, etc.) als naar de afmetingen. Hoe meer data er geladen moet worden, hoe trager de website wordt. Dit merk je met name wanneer een internet verbinding iets minder snel is. Grote bestanden krijgen kunnen het laden van andere elementen tegenhouden of worden bewaard tot het laatst waardoor alles blijft verspringen. Wanneer het laden te lang duurt haken gebruikers gemiddeld na 3 seconden al af.

De grootte van een afbeelding wordt bepaald door de volgende eigenschappen:

  • De afmetingen

Het formaat van een afbeelding bestaat uit een bepaald aantal bytes. Als de afmetingen oplopen betekent dit ook al snel heel veel meer bytes. Het is dus goed om te kijken of de afmetingen van de afbeelding een beetje passen bij de plek waar je deze plaatsen wilt.

  • De kwaliteit van de afbeelding

Met de kwaliteit van een afbeelding loopt het formaat ook heel hard op. Een originele, nog niet gecomprimeerde foto heeft een kwaliteit van 100%. Wanneer je een foto comprimeert naar bijvoorbeeld 70% wordt deze mogelijk iets minder scherp. Echter is dit bijna nooit echt met het blote oog waar te nemen. Daartegenover komt te staan dat het tot wel 60% in bestandsformaat kan schelen!

Welk type past het best?

Afbeeldingen hebben bepaalde bestandstypes. Elk bestandstype heeft zijn eigen eigenschappen en niet elke type is geschikt voor elke situatie. Dus welke types kan je het beste gebruiken? Hieronder een opsomming van de 3 meest gebruikte formaten op het web en voor welke situatie ze het beste ingezet kunnen worden.

JPEG

Misschien is het je wel eens opgevallen dat een afbeelding soms het bestandstype JPG en soms JPEG heeft. Is er een verschil tussen deze twee? Los van de schrijfwijze is dat er niet. JPG is eigenlijk gewoon een afkorting van JPEG.
Beide worden heel veel gebruikt op het internet. Het is een bestandstype wat heel goed ondersteund en geaccepteerd wordt. De informatie in de afbeeldingen wordt op een handige en compacte manier opgeslagen. Zo kan het bestandsformaat kleiner gehouden worden. Echter ondersteund het bestandstype geen transparante achtergrond. Wanneer dit nodig is, moet er gebruik gemaakt worden van het type PNG.

PNG

Het grote voordeel van PNG is de ondersteuning van de transparante achtergrond zonder dat de kwaliteit van de afbeelding verminderd wordt bij het opslaan. Het nadeel is dat het formaat van het bestand groter is dan bij en JPEG bestand met exact dezelfde eigenschappen. Het is dus goed om PNG te gebruiken in enkel specifieke situaties waarin bijvoorbeeld een object uitgesneden getoond moet worden.

GIF

Het bestandstype GIF wordt met name gebruikt voor simpele animaties. Een GIF bestand speelt eigenlijk een serie afbeeldingen achter elkaar af. Dit formaat is dus ideaal om bewegend beeld te tonen zonder een video in te hoeven laden. GIF bestanden ondersteunen echter geen geluid en ook de kwaliteit van het beeld gaat er iets op achteruit. Daarom wordt hij met name gebruikt in situaties waarin de beelden niet super veel detail hebben of wanneer de animatie niet te complex is.

Een afbeelding comprimeren

Er zijn verschillende manieren om je afbeeldingen te comprimeren. Het is wel belangrijk om de juiste verhouding tussen kwaliteit en snelheid te vinden. Snelheid is belangrijk voor een website, maar als afbeeldingen van een zichtbaar slechte kwaliteit zijn dan komt een website minder professioneel over. Om deze reden adviseren we om te mikken op een bestandsformaat van maximaal 300kB (0.3MB). Qua afmetingen is een afbeelding van 1800px breed scherp genoeg om op de grotere beeldscherm formaten het volledige beeld te kunnen vullen. Het is mogelijk om afbeeldingen met een grootte van 2 of 3 MB terug te brengen naar 300kB zonder dat het kwaliteitsverschil echt goed zichtbaar is. Bij het verkleinen van de afbeelding raden wij dan ook aan om de afbeeldingen te verkleinen naar een maximale breedte van ongeveer 1800px voor fullscreen afbeeldingen.

Hieronder staan een aantal handige websites en programma’s welke gebruikt kunnen worden om afbeeldingen te comprimeren

TinyPNG is één van de handige tools bij het comprimeren van een afbeelding. Er kunnen tot 20 afbeeldingen tegelijkertijd via de website gecomprimeerd worden door ze simpelweg de website in te slepen. Je ziet direct welke afbeeldingen al gecomprimeerd zijn en welke er nog bezig zijn. Wat je hebt bespaard aan bestandsgrootte is ook direct te zien. De kwaliteit van de afbeelding is bijna gelijk aan het origineel. Een groot voordeel is dat TinyPNG heel erg goed overweg kan met PNG bestanden met een transparante achtergrond.

BIRME is een andere handige website. Deze website heeft veel van de opties die tinyPNG ook heeft zoals meerdere bestanden tegelijkertijd comprimeren. Echter heeft BIRME ook de mogelijkheid om een formaat mee te geven aan elke afbeelding. Als een standaard formaat van bijvoorbeeld 1800 pixels breed wordt ingevuld dan heb je de optie om de hoogte ook op een vast aantal pixels te zetten of automatisch mee te laten wijzigen. Op deze manier blijft de verhouding van de afbeelding behouden. Daarnaast is het aan te raden om de kwaliteit om tussen de 60% en 80% te houden. De kwaliteit hangt af van het bestandstype en het formaat afbeelding dat gecomprimeerd moet worden.

Photoshop kan ook goed gebruikt worden om afbeeldingen te comprimeren. In Photoshop kunnen afbeeldingen speciaal voor het internet geëxporteerd worden. Daarbij heb je duidelijk instellingen die je kan wijzigen voordat de afbeelding geëxporteerd wordt. Meer dan bij de websites TinyPNG en BIRME. Denk hierbij aan het bestandstype, formaat, kwaliteit, etc. Het nadeel hierbij is dat het simpelweg meer tijd en moeite kost.

Snelheidscontrole

Bij het maken of vullen van een website met er goed met een aantal zaken rekening te houden. Het gebruik van afbeeldingen is er één van, maar er zijn nog meer zaken die invloed hebben op de snelheid van een website.

Om te zien of een website snel genoeg laadt en waar nodig nog verder geoptimaliseerd kan worden, maken we gebruik van een aantal websites. Één van de websites die wij gebruiken is Pingdom. Hier kunnen we kijken of bepaalde afbeeldingen of scripts op de website een negatief effect hebben op de snelheid.

Conclusie

Om het beste resultaat uit een website te halen is het belangrijk om voorzichtig met afbeeldingen om te gaan. Het kan een hele hoop schelen wat betreft laadtijd. Bezoekers vinden dit fijn, maar ook voor de vindbaarheid in Google is dit een voordeel. Google rankt de website op veel verschillende dingen en de snelheid van de website is een belangrijk aspect.

Tegenwoordig hoeft het helemaal niet moeilijk te zijn om de content van een website te optimaliseren! Er zijn veel verschillende tools die dit mogelijk te maken. Mochten er toch nog vragen zijn? Wij staan altijd klaar om te helpen!

Teddie
Contact