Afbeelding Hoeken Afronden

Klik om een afbeelding te uploaden

JPG / PNG / WEBP

Standaard afgeronde hoek

Straal afgeronde hoek

20%
050%

Uitvoerformaat

Upload afbeelding om voorbeeld te bekijken

Voeg online afgeronde hoeken toe aan uw afbeeldingen, realtime voorvertoning met schuifregelaar, 3 voorinstellingen klein/middel/groot, exporteert transparante PNG geschikt voor elke achtergrond.

Gerelateerde aanbevelingen

ICO generator

Afbeeldingen bijsnijden

Afbeelding formaat wijzigen

Afbeeldingen comprimeren

Afbeeldingen converteren

Wat is het afronden van afbeeldingshoeken?

Het afronden van afbeeldingshoeken is de techniek om de 4 rechte hoeken van een afbeelding te vervangen door gladde bogen. Deze tool tekent afgeronde rechthoekpaden via arcTo() van Canvas, gebruikt daarna clip() om de afbeelding bij te snijden: ongevulde gebieden worden transparante Alpha=0 pixels bij PNG-export.

**Welk visueel effect hebben afgeronde hoeken?** Ze zijn zachter en vriendelijker dan rechte hoeken, verminderen visuele agressie, veel gebruikt in UI-design voor app-iconen, knoppen, kaarten, avatars. De "Superellips (squircle)" van iOS brengt hoeken tot het uiterste van gladde rondingen.

**Waarom vereisen veel app-iconen afgeronde hoeken?** iOS/iPadOS/macOS Big Sur passen automatisch afrondingsmaskers toe, maar een witte achtergrond veroorzaakt "witrand"-defecten. Correcte aanpak: genereer eerst een PNG met afgeronde hoeken bij de bron; deze tool is hiervoor bedoeld.

**Pixels vs procenten:** Pixels zijn nauwkeurig maar moeilijk uit te lijnen tussen afbeeldingen; procenten zijn adaptief en consistent over verschillende afmetingen. Designsystemen gebruiken procenten, zoals 22.37% voor iOS en 25% voor Android.

**Verschil met CSS border-radius:** CSS border-radius werkt op de weergavelaag, de geëxporteerde afbeelding behoudt rechte hoeken; deze tool genereert echte PNG's met alfakanaal voor elk scenario zonder CSS (PPT, video, drukwerk).

Toepassingsgevallen

  • Avatars maken voor sociale netwerken (WhatsApp, LINE, Twitter/X, Instagram, Facebook), genereert ronde avatars met één klik
  • Snel afgeronde hoeken toevoegen aan app-iconen (iOS beveelt 22-25% aan, Android Adaptive Icon 25%)
  • E-commerce productafbeeldingen met afgeronde hoeken zijn zachter en aantrekkelijker, verbeteren klikken en conversies
  • Lokale verwerking van materiaal met afgeronde hoeken voor PPT-presentaties, videobewerking en drukwerk
  • Batchgewijs iconen en materiaal maken metzelfde straal voor designsystemen (één voor één verwerken)

Hoe te gebruiken

  1. Klik op uploadgebied om een afbeelding te selecteren, of sleep direct JPG/PNG/WEBP naar het gebied
  2. Kies voorinstellingen klein (10%), middel (25%), groot (50%) met één klik, of sleep schuifregelaar voor aanpassing (klik om eenheid te wisselen)
  3. Kies uitvoerformaat: PNG (transparante achtergrond)/WEBP (kleinere grootte)/JPG (witte achtergrond)
  4. Realtime voorvertoning rechts, klik op download bij tevredenheid, bestand wordt automatisch opgeslagen met achtervoegsel -rounded

Functies

  • Dubbele eenheid: straal ondersteunt pixels (0-500px) en procenten (0-50%) met vrije wisseling, flexibel voor verschillende scenario's
  • 3 voorinstellingen: klein (10%), middel (25%), groot (50%) met één klik, ook aanpasbaar met schuifregelaar
  • Drie uitvoerformaten: PNG (met alfakanaal), WEBP (kleinere grootte), JPG (witte achtergrond zonder transparantie)
  • Realtime voorvertoning: pas schuifregelaar aan om effect direct te zien, dambordachtergrond toont transparante gebieden
  • Slepen en neerzetten: klik om te selecteren of sleep afbeeldingen direct naar uploadgebied, ondersteunt JPG/PNG/WEBP
  • Lokale verwerking: alles gebeurt in Canvas van browser, afbeeldingen worden niet naar server geüpload

Best Practices

Kies standaard PNG voor transparantie, niet JPG

JPG ondersteunt geen alfakanaal, gedwongen witte vulling veroorzaakt witte vierkanten op hoeken. Gebruik JPG alleen zonder transparantie, kies standaard PNG.

Kies WEBP voor kleine grootte met transparantie

WEBP ondersteunt ook transparantie maar is 25-35% kleiner dan PNG, ideaal voor webmateriaal. Let op: sommige oude designsoftware herkent WEBP mogelijk niet, verkies PNG bij samenwerking.

Hoekverhouding voor app-iconen

iOS voegt automatisch ~22.37% afronding toe aan iconen, maar een witte originele achtergrond veroorzaakt "witrand"-defecten. Correct: genereer eerst een PNG met afgeronde hoeken (22-25% aanbevolen). Android Adaptive Icon beveelt 25% aan als veilige zone.

Gebruik straal 50% voor ronde avatars

De meeste sociale platforms zoals WhatsApp, LINE, Twitter, Instagram gebruiken ronde avatars. Voorinstelling 50% genereert een ronde PNG met één klik, transparante achtergrond geschikt voor lichte/donkere thema's.

iOS App Icon Richtlijnen

Pas geen CSS border-radius toe op al afgeronde afbeeldingen

Als u al een PNG met afgeronde hoeken heeft geëxporteerd, omhul deze dan niet met CSS border-radius + overflow:hidden, dit veroorzaakt dubbele verwerking en wazige randen. Toon direct met img-tag.

Voor complexere hoeken (verschillende hoeken, alleen bovenste)

Deze tool ondersteunt alleen standaard gelijke hoeken op alle vier zijden. Voor complexe scenario's zoals bovenste TabBar-hoeken, onderste hoeken of individuele hoeken, gebruikt u de [afbeeldingseditor](/image/image-editor/) of pro-tools zoals Figma.

Veelgestelde vragen

Hoe voeg ik afgeronde hoeken toe aan een afbeelding?

Upload de afbeelding en klik op voorinstellingen klein/middel/groot om snel te kiezen, of sleep de schuifregelaar voor aangepaste pixels (0-500px) of procenten (0-50%). Realtime voorvertoning rechts, download bij tevredenheid, PNG-formaat behoudt automatisch transparantie.

Pixels of procenten voor de straal?

Pixels zijn ideaal voor nauwkeurige controle bij vaste afmetingen. Procenten berekenen de afronding naar verhouding van de korte zijde, flexibeler voor verschillende afmetingen. Wissel eenheid door te klikken; 50% produceert een perfecte cirkel, ideaal voor avatars.

Welke kleur krijgen de afgeronde hoeken?

Bij PNG of WEBP formaat zijn de hoeken volledig transparante pixels (Alpha=0), natuurlijke vermenging op elke achtergrond. Bij JPG wordt automatisch witte achtergrond gebruikt (gele waarschuwing weergegeven), voor eindafbeeldingen zonder transparantie.

Welke afbeeldingsformaten worden ondersteund?

Invoer JPG, PNG, WEBP; uitvoer PNG (transparant), WEBP (kleiner), JPG (witte achtergrond). De uitvoerbestandsnaam voegt automatisch het achtervoegsel -rounded toe om van origineel te onderscheiden.

Is er een limiet aan de hoekgrootte?

Procentmodus 0-50% (50% = perfecte cirkel), pixelmodus 0-500px. Grotere waarde = rondere hoeken; bij helft van korte zijde wordt het cirkel. Tool gebaseerd op Canvas arcTo + clip voor standaardhoeken (geen Squircle/superellips).

Kunnen avatars of app-iconen worden gemaakt?

Uitstekend geschikt. Voor ronde avatars kiest u voorinstelling 50%; voor iOS app-iconen wordt 22-25% aanbevolen (gebruik 25%), voor Android Adaptive Icon 25% als veilige zone. Transparante PNG past bij elk thema.

Maakt afronden de afbeelding wazig?

Nee. Het bijsnijden gebeurt op originele resolutie via Canvas zonder herbemonstering of compressie, kwaliteit identiek aan origineel. Hoeken zijn echte transparante pixels, geen wazige overgangen, scherpe randen.

Worden afbeeldingen gelekt tijdens verwerking?

Nee. Alle verwerking gebeurt lokaal in de browser via Canvas API, afbeeldingen passeren geen server van laden tot downloaden. Zelfs gevoelige afbeeldingen zoals identiteitsfoto's zijn veilig.

Waarom wordt het afgeronde hoeken-effect niet weergegeven?

Controleer: ① is de straal groter dan 0 (schuifregelaar niet uiterst links)? ② is de afbeelding succesvol geladen (formaten JPG/PNG/WEBP)? ③ ondersteunt de browser HTML5 Canvas (moderne browsers wel)? Indien aanhoudend, herlaad de pagina.

Wat is het verschil met CSS border-radius?

CSS border-radius werkt op de weergavelaag, de geëxporteerde afbeelding behoudt rechte hoeken en werkt alleen op internet; deze tool genereert echte PNG-bestanden met alfakanaal voor PPT, video's, drukwerk en elk scenario zonder CSS.

Woordenlijst

Hoekstraal (Border Radius)
Straalwaarde van de boog die de kromming bepaalt. Grotere waarde = rondere hoek, maximum (helft van korte zijde) vormt een cirkel. Ondersteunt pixels (0-500px) en procenten (0-50%).
Alfakanaal
In PNG/WEBP geïntegreerd transparantiekanaal, elke pixel gebruikt 0-255 voor dekking. Hoeken hebben Alpha=0 na afronding, dus achtergrond is volledig transparant, geen kleur.
Squircle (superellips)
Hoekvorm geïntroduceerd in iOS 7+, gladder dan traditionele afgeronde rechthoek. Wiskundige formule x⁴+y⁴=r⁴. Deze tool produceert standaardbogen, gebruik Figma/Sketch voor Squircle.
Adaptive Icon
Adaptief icoon geïntroduceerd in Android 8.0+, bestaande uit twee lagen (voorgrond en achtergrond). Aanbevolen 25% straal als veilige zone, OEM-launcher past masker toe naar eigen stijl.
Canvas arcTo
Boogtekenmethode van Canvas 2D API. Deze tool combineert arcTo + clip voor het maken van afgeronde rechthoekpaden, bijsnijden van afbeelding tot gebied dat transparante Alpha=0 pixels wordt.

Referentietabel hoekstandaarden per platform

Platform / ElementBasisafmetingAanbevolen verhoudingBij benadering (px)
iOS / iPadOS App Icon1024 × 1024Ca. 22.37%≈ 229 px
Android Adaptive Icon108 × 108Ca. 25%≈ 27 px
macOS Sonoma App Icon1024 × 1024Squircle superellipsGeen vaste px
Windows 11 Kaarten—Ca. 8 px8 px
Material Design 3 Large—Ca. 28 px28 px
Avatar WhatsApp / LINE640 × 64050% (volledige cirkel)320 px
Avatar Twitter / Instagram400 × 40050% (volledige cirkel)200 px
E-commerce producthoofdafbeelding800 × 800Aanbevolen 16~24 px16-24 px

Authoritative References