Website-afbeeldingen

Afbeeldingen schalen zonder ze uit te rekken

Wijzig de afmetingen zonder vervorming: vergrendel de verhouding, verander één maat en kies bijsnijden of randen voor een andere vorm.

Door Pixilo · Bijgewerkt op

Schalen, bijsnijden of randen toevoegen?

Een breder gezicht wijst meestal op een verkeerde verhouding. Hogere exportkwaliteit corrigeert dat niet.

Schalen verandert het aantal pixels en behoudt bij proportionele maten inhoud en vorm. Bijsnijden verwijdert inhoud. Randen toevoegen plaatst het hele beeld op een groter canvas met kleur of transparantie.

Kies op basis van wat moet blijven: wat lucht kan weg, maar niet een producthoek of de laatste regel van een instructie.

Dezelfde bloemenvaas in twee formaten met gekoppelde verhoudingen.

Schalen met Pixilo

  1. Controleer de bronafmetingen in eigenschappen of een editor. Gebruik de volledige bron, geen kleine preview.
  2. Kies de doelmaat volgens eisen en weergaveruimte. Vergroot een kleine bron niet zonder reden.
  3. Afbeeldingsformaat aanpassen. Laat de verhoudingsvergrendeling aan en voer de gewenste breedte of hoogte in. Het gereedschap berekent de andere afmeting automatisch.
  4. Verwerk en download. Controleer maten en uiterlijk op de gebruiksgrootte.

De vergrendeling staat standaard aan. Bij 2400 × 1600 berekent een breedte van 1200 een hoogte van 800. Zonder vergrendeling zijn de maten onafhankelijk; een leeg veld behoudt zijn originele maat en kan vervormen. Controleer beide waarden.

Ondersteunde JPG-, PNG- en WebP-bestanden worden opnieuw getekend en in hetzelfde formaat opgeslagen. JPEG en WebP kunnen detail verliezen. Bewaar het origineel.

Voorbeeld: de breedte wijzigen van 960 naar 480 pixels stelt de hoogte automatisch in op 320. De verhoudingsvergrendeling blijft aan.
Voorbeeld: de breedte wijzigen van 960 naar 480 pixels stelt de hoogte automatisch in op 320. De verhoudingsvergrendeling blijft aan. Originele PNG.

Passende afmetingen berekenen

2400 × 1600 heeft verhouding 3:2. Bij 1200 pixels breed hoort 800 hoog.

Nieuwe hoogte = oorspronkelijke hoogte × nieuwe breedte ÷ oorspronkelijke breedte. Andersom: nieuwe breedte = oorspronkelijke breedte × nieuwe hoogte ÷ oorspronkelijke hoogte. Rond af op hele pixels.

Voorbeelden met dezelfde verhouding
OrigineelNieuwe breedtePassende hoogte
2400 × 16001200800
1600 × 900800450
1200 × 1800600900
2000 × 200010001000

Beide maten halveren laat een kwart van de pixels over. Bestandsgrootte hangt ook van formaat, inhoud en compressie af.

Een liggende foto vierkant maken

1600 × 900 wordt 800 × 450. Voor 800 × 800 ontbreekt 350 pixels hoogte.

Het vierkant vullen door bijsnijden

Selecteer met de bijsnijdtool een vierkant met het onderwerp erin. Een uitsnede van 900 × 900 kan naar 800 × 800. Er verdwijnt inhoud aan de zijkanten, zonder vervorming. Het midden is niet altijd de beste keuze.

Alles behouden met randen

Plaats 800 × 450 op een canvas van 800 × 800 in een geschikte editor. Gecentreerd blijft boven en onder 175 pixels. Gebruik kleur of transparantie. Pixilo voegt deze ruimte niet automatisch toe.

Op websites vult object-fit: cover door bijsnijden; object-fit: contain toont alles. Zie MDN over object-fit. CSS verandert weergave, niet bestandsgrootte.

Waarom blijft het beeld onscherp?

Juiste verhoudingen garanderen geen scherpte. Vergroten schat extra pixels maar herstelt geen ontbrekend detail.

Verkleinen kan kleine tekst en dunne lijnen aantasten. Test op werkelijke grootte; probeer meer pixels, strakker bijsnijden of minder compressie.

Schermen met hoge pixeldichtheid kunnen meer beeldpixels dan CSS-pixels nodig hebben. Vergroot geen zwakke bron alleen voor „2×”. Gebruik de gids voor website-afmetingen.

Binnen maximumafmetingen passen

Voor maximaal 1200 × 800 gebruik je de kleinste van maximale breedte ÷ oorspronkelijke breedte en maximale hoogte ÷ oorspronkelijke hoogte. Vermenigvuldig beide maten met die factor.

3000 × 2000 wordt 1200 × 800. Een portret van 2000 × 3000 wordt ongeveer 533 × 800 met factor 800 ÷ 3000. Het naar 1200 × 800 forceren vervormt het. Een passende bron hoeft niet groter.

Rond af en controleer grenzen. Eén pixel verschil kan afronding zijn; 3:2 naar 3:4 vraagt bijsnijden of randen.

„Maximaal 1200 × 800” laat een smaller portret toe; „exact 1200 × 800” kan een andere compositie vereisen. Controleer ook minimumafmetingen en mogelijk scherpteverlies door vergroten.

Onderwerp en randen controleren

Vergelijk onder dezelfde omstandigheden: cirkels rond, gezichten natuurlijk en lijnen onvervormd. Controleer elke rand op afgesneden handen, producten, tekst en logo’s.

De bestemming kan opnieuw bijsnijden. Gebruik positioneringsopties en houd belangrijke inhoud van de rand weg.

Grote transparante marges maken een logo klein. Snijd zo nodig bij, met behoud van de vereiste vrije ruimte. Test screenshottekst op eindgrootte.

Veelgestelde vragen

Kan de verhouding anders zonder bijsnijden?

Met randen blijft alles behouden. Zonder randen vereist een andere vorm bijsnijden, vervorming of nieuwe inhoud.

Waarom is alleen de websiteweergave uitgerekt?

De pagina kan verkeerde maten opleggen. Controleer de stijlen voordat je de bron bewerkt en gebruik proportionele hoogte.

Is schalen hetzelfde als compressie?

Nee. Schalen verandert pixelmaten, compressie de opslag. Beide kunnen de grootte verlagen.

Eerst bijsnijden?

Meestal wel: kies de compositie in het origineel en schaal eenmaal.

Kies de vorm vóór export

Behoud verhoudingen voor het hele beeld; snijd bij voor een andere vorm.

Afmetingen wijzigenAfbeelding bijsnijden →