Hoe groot???

Afmetingen van visuals & snelheid van je pagina

Foto’s gemaakt met een goede camera hebben vaak veel pixels. Heel belangrijk voor als je zo’n foto wil uitvergroten bijvoorbeeld, maar voor op je website is dat helemaal niet nodig! Te grote en te zware visuals maken je site langzaam. Bezoekers én Google verlaten je website als deze te traag laadt. En dat wil je natuurlijk niet!

Maar goed… de andere kant op… je wil ook niet dat je ze te klein maakt, zodat ze pixelig of blurry worden.

Wat is de bestandsgrootte?

De bestandsgrootte is het aantal bytes die het bestand op je computer in beslag neemt. Hoe groter een visual is, hoe langer je website moet laden om de afbeelding te tonen.

Een foto van bijvoorbeeld 6 mB (megabyte) is (te) groot. Een foto van 90 kB (kilobyte) is veel minder groot. De afbeeldingsgrootte is de afmetingen van je visual.

De resolutie geeft je het aantal gebruikte pixels aan. Een hogere resolutie maakt je visual zwaarder.

Wat is belangrijk?

Voor je website is het belangrijk dat je bestandsgrootte zo laag mogelijk is.

Een schermvullende foto, bijvoorbeeld een banner op je website, zal een afmeting nodig hebben van 1200 tot 1700 pixels breed. Dé truc is dan om de bestandsgrootte daarvan niet boven 500 KB te krijgen.

Grotere foto’s op je website blijven scherp met 1200 pixels en tussen de 100 en max 300 KB.

En verdere richtlijnen zijn:

• 200 pixels breedte volstaan voor een kleine visual
• 300 pixels breedte geven een middelgroot beeld
• 1200 tot 1700 pixels breedte kun je aanhouden als maximumformaat

Hou altijd de originele hoogte-breedte-verhouding van de foto in je achterhoofd. Dan schaalt de visual automatisch mee.

En dan ook nog… bestandsformaten

Naast de grootte en aantal pixels voor je visuals kun je ook voor verschillende bestandsformaten kiezen. (Om het lekker makkelijk te maken… Hahaha!)
De meest gebruikte bestandsformaten voor websites zijn:

1. GIF
Dit formaat gebruikt je vooral voor eenvoudige online visuals, denk aan logo’s in één of twee kleuren, animaties, visuals zonder kleurverloop of een simpele tekening. Bovendien kun je ervoor kiezen om een deel van de GIF transparant te maken.

2. PNG
Deze soort visuals heeft een veel betere kwaliteit dan GIF. Je kunt dit formaat gebruiken voor foto’s of visuals met kleurverloop. Ook hier kun je ervoor kiezen om een deel van de PNG transparant te maken.

3. JPG
Voor de ingewikkeldere visuals en foto’s met veel diepte, schaduwen, kleuren en overloopjes kun je het beste JPG gebruiken. Het geeft de mooiste kwaliteit, maar je kunt deze niet transparant maken. Vaak is een JPG bestand kleiner dan dezelfde visual als PNG.

Welk bestandsformaat is nou het beste?

Tja… dat hangt af van het soort visuals en hoe je deze wil gebruiken.

Ik adviseer JPG te gebruiken voor grotere foto’s of illustraties: dit geeft namelijk goede resultaten als je let op kleur en helderheid met een relatief kleine bestandsgrootte. Let wel goed op het aantal pixels en de bestandsgrootte. Maak deze zo klein mogelijk.

En ik adviseer PNG te gebruiken als je de achtergrond transparantie in de afbeelding wil behouden.

Hoe kom je achter de grootte?

Easy peasy! De grootte van het bestanden en van je visuals vindt je door met je rechtermuisknop op het icoontje van het bestand of de visual te klikken. Vervolgens klik je op Eigenschappen en daarna bij Details. 

Visual te groot? Wat kun je doen?

Pas het formaat van je visual aan:
Als je visual breder is dan 2000 pixels, kun je hem makkelijk verkleinen tot 1.700 pixels, 1200 pixels of zelfs nog kleiner. Dit is afhankelijk van waar je de visual wil gebruiken op je website. Let wel op dat je de verhouding niet wijzigt als je de afbeelding verkleint.

Verlaag de resolutie:
In sommige fotoberkingsprogramma’s kun je kiezen voor de optie ‘Opslaan voor web’. Of kun je via ‘Opslaan als’ of ‘Exporteren’ de resolutie aanpassen. Onlinetools zoals Pixlr en Canva kunnen ook de resolutie van je visual lager maken.

Toch nog erg groot?
Verklein je fotobestand met TinyPNG of TinyJPG. Beide tools comprimeren de afbeelding zonder kwaliteitsverlies.

Van JPG of PNG naar WebP?

In plaats van JPEG en PNG kun je er ook voor te kiezen om WebP te gebruiken. Dat is een speciale extensie voor het web. En waarom zou je dat doen? Op deze manier krijg je visuals met kleinere bestandsgroottes resultaten en toch hoge kwaliteit.

Maar hoe maak je van een JPG en PNG nou een WebP? Dat doe je via een WebP Converter. Zelf gebruik ik vaak deze online converters:

Convertio of EZGif

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 natuurlijk maar één van.

Om te zien of een website snel genoeg laadt en waar nodig nog verder geoptimaliseerd kan worden, maak ik gebruik van een aantal websites. Één van de websites die ik gebruik is Pingdom. Hiermee kun je dus onder andere kijken of bepaalde visuals op de website een negatief effect hebben op de snelheid.

Conclusie

Om het beste resultaat uit een website te halen is het dus belangrijk om voorzichtig met visuals om te gaan. Het kan onwijs veel 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...