Afbeeldingen voor het web verkleinen en bijsnijden

Verkleinen en bijsnijden klinken hetzelfde, maar lossen verschillende problemen op — en ze goed gebruiken is vaak een grotere snelheidswinst dan compressie alleen. Deze gids legt het verschil uit, waarom te grote afbeeldingen schaden en hoe je afbeeldingen correct dimensioneert voor het web.

Verkleinen vs. bijsnijden

• Verkleinen (Resizing) verandert de afmetingen van de hele afbeelding en behoudt alles — je schaalt hem op of neer.
• Bijsnijden (Cropping) snijdt een deel van de afbeelding weg om slechts één gebied te houden — je verandert wat er in beeld staat, niet alleen de grootte.

Een profielfoto is een goed voorbeeld: je snijdt bij tot een vierkant rond het gezicht en verkleint dat vierkant dan tot de weergavegrootte.

Waarom te grote afbeeldingen pagina's vertragen

Een foto recht van een telefoon kan 4.000 pixels breed zijn. Als hij in een kolom van 800 pixels wordt getoond, downloadt de browser vijf keer meer pixels dan hij ooit kan tonen, en verkleint ze dan ter plekke. Dat is verspilde bandbreedte en een tragere pagina voor nul visueel voordeel. De afbeelding ongeveer verkleinen tot de grootte waarop hij wordt getoond, is vaak de grootste beschikbare besparing in bestandsgrootte — vaak meer dan compressie.

Behoud de beeldverhouding

De beeldverhouding (aspect ratio) is de verhouding van breedte tot hoogte. Verklein beide afmetingen met dezelfde factor en de afbeelding blijft onvervormd; verander er maar één en hij wordt uitgerekt of platgedrukt. De meeste tools „vergrendelen” de verhouding standaard — laat hem vergrendeld tenzij je opzettelijk wilt vervormen. Heb je een andere vorm nodig (zeg, een brede banner uit een hoge foto), snijd dan bij tot de nieuwe verhouding in plaats van te rekken.

Hoe groot moeten afbeeldingen zijn?

• Stem de breedte van de afbeelding af op de ruimte die hij vult — meet de container.
• Voor scherpe weergave op schermen met hoge dichtheid (Retina), exporteer op ongeveer 2× de weergavegrootte en comprimeer dan.
• Niet opschalen — een kleine afbeelding vergroten voegt alleen wazigheid toe; het kan geen detail verzinnen.

Alles samenbrengen

Een goede volgorde van bewerkingen is bijsnijden → verkleinen → comprimeren. Het afbeelding-formaat-aanpassen doet bijsnijden en verkleinen in één keer met de beeldverhouding vergrendeld, en draagt daarna over aan de afbeeldingcompressor om de bestandsgrootte omlaag te brengen. Lees de compressiegids voor hoe ver je de kwaliteit kunt drijven, en beeldformaten uitgelegd om eerst het juiste formaat te kiezen.