Afgeronde hoeken en ronde afbeeldingen voor websites

Afgeronde hoeken kunnen foto's laten aansluiten op kaarten, terwijl ronde portretten een teampagina een vaste vorm geven. De vorm moet de inhoud ondersteunen: een cirkel die een gezicht afsnijdt of een afgeronde productfoto die een belangrijk detail verbergt, helpt niet.

Je kunt het bestand aanpassen of de browser alleen de weergave laten afronden. Wat past, hangt af van waar je het resultaat gebruikt en of je de vorm later wilt wijzigen.

CSS gebruiken of het afbeeldingsbestand bewerken?

CSS is meestal flexibeler op een website die je beheert. Je kunt hetzelfde origineel in verschillende layouts gebruiken, hoeken overal aanpassen en de uitsnede wijzigen zonder opnieuw te exporteren. Veel website-editors bieden hiervoor al een instelling voor de hoekradius.

Bewerk het bestand als een website of app een afbeelding accepteert maar geen hoekinstellingen heeft, of als je het afgeronde beeld in een ander ontwerp plaatst. De transparante hoeken staan dan in het bestand en zijn niet afhankelijk van je CSS.

Kies een vorm en radius die bij de inhoud passen

Begin bij de functie van de afbeelding. Een cirkel kan werken voor een klein portret waarin het gezicht centraal staat. Een landschap, screenshot of productdetail heeft meestal een rechthoek nodig om meer informatie te behouden.

Probeer bij websitekaarten een bescheiden radius van 12 of 16 CSS-pixels en beoordeel die naast kaarten, knoppen en andere beelden. Dit zijn ontwerpvoorbeelden, geen eisen. Enkele herbruikbare radii houden de vormgeving gemakkelijker samen dan een aparte afronding voor elke foto.

Beoordeel op de echte weergavegrootte. Een subtiele radius in een grote bron kan bijna verdwijnen in een miniatuur. In het bestand opgeslagen hoeken schalen met het hele beeld mee. Een vaste CSS-radius, bijvoorbeeld 16 pixels, houdt die CSS-maat als de weergavebreedte verandert.

Neem een afbeelding van 800 × 400 met Pixilo op 25%. De opgeslagen radius is 50 pixels. Bij weergave op 400 × 200 halveert die zichtbaar tot ongeveer 25 CSS-pixels. Op 200 × 100 blijft ongeveer 12,5 over. Kies de afronding op de grootte die bezoekers zien, niet alleen op de volledige voorvertoning.

Houd belangrijke inhoud uit de hoeken. Controleer mensen aan de randen van groepsfoto's en labels of bediening in screenshots. Verdwijnt iets nuttigs, verminder dan de afronding of wijzig de uitsnede in plaats van de vorm af te dwingen.

Rond afbeeldingshoeken af met Pixilo

1. Maak een werkkopie. Bewaar het origineel apart. Voor een andere vorm gebruik je eerst het bijsnijdgereedschap. Zijn de afmetingen te groot, verklein de kopie dan vóór het afronden.
2. Kies de afbeelding. Open Afgeronde hoeken en selecteer één JPG, PNG of WebP.
3. Stel Hoeken afronden in. Begin laag en verhoog de waarde terwijl je de voorvertoning bekijkt. Alle vier de hoeken hebben dezelfde radius.
4. Kies de vulling van de verwijderde hoeken. Laat Transparante achtergrond aan voor gebruik op verschillende paginakleuren. Zet deze uit om een achtergrondkleur te kiezen.
5. Download en controleer. Kies PNG downloaden, open het bestand en controleer de randen op de bedoelde achtergrond.

De tool behoudt pixelbreedte en -hoogte. Hij verwijdert of vult hoeken binnen die afmetingen, maar verandert niet de afbeeldingsgrootte en verwijdert niet de achtergrond achter het onderwerp.

Wat betekent het afrondingspercentage?

Pixilo berekent de radius als percentage van de helft van de kortste zijde. Bij 0% blijven de hoeken recht; bij 100% wordt de grootste passende cirkelradius gebruikt. In het voorbeeld van 800 × 400 is de halve kortste zijde 200 pixels, waarvan 25% gelijk is aan 50.

De schuifregelaar is niet hetzelfde als een CSS-percentage. CSS gebruikt de breedte voor horizontale procentradii en de hoogte voor verticale. Op een niet-vierkant vlak maakt border-radius: 50% een ellips. Pixilo op 100% maakt een capsule van een rechthoek en een cirkel van een vierkant.

Maak een ronde afbeelding met Pixilo

Begin met een vierkant. Een brede afbeelding blijft breed, ook bij de hoogste afronding. Kies daarom de uitsnede voordat je de cirkel toepast.

1. Snijd bij naar 1:1. Open het origineel in het bijsnijdgereedschap en kies een vierkant. Laat ruimte rond hoofd of voorwerp: de cirkel verbergt de vierkante hoeken.
2. Kies passende afmetingen. Een kopie van 320 × 320 is een optie voor een portret dat op een 2×-scherm op 160 × 160 CSS-pixels verschijnt. Gebruik zo nodig de formaattool. Vergelijk details op weergavegrootte en vergroot een kleine bron niet alleen om deze maten te halen.
3. Rond het vierkant af. Kies de voorbereide kopie in Afgeronde hoeken, zet Hoeken afronden op 100% en laat Transparante achtergrond aan.
4. Controleer de opgeslagen cirkel. Download de PNG en kijk of hoofd, haar en belangrijke details goed binnen het zichtbare vlak passen.

De cirkel staat in een vierkante PNG met transparante hoeken. Breedte en hoogte veranderen niet; alleen de zichtbare omtrek wordt rond. Een muur of kamer achter de persoon blijft zichtbaar binnen de cirkel.

Voeg afgeronde hoeken toe met CSS

Heeft je editor al een hoekradiusinstelling, probeer die dan eerst. Bij eigen code moet de CSS het afbeeldingselement aanspreken:

1. Voeg de klasse toe. Bewerk je HTML, gebruik dan het voorbeeld hieronder of voeg rounded-image toe aan het class-attribuut van je bestaande <img>-element. In het CSS-klasseveld van een editor schrijf je de naam zonder punt. Controleer of die klasse op de afbeelding of een omringend element komt.
2. Voeg CSS toe. Plak het CSS-voorbeeld in de stylesheet of het veld voor eigen CSS. Houd de punt in .rounded-image: die selecteert elementen met deze klasse. Een CSS-veld verwacht normaal alleen CSS, zonder HTML-<style>-tags.
3. Controleer de gepubliceerde afbeelding. Vervang pad en afbeeldingsgegevens als je het HTML-voorbeeld gebruikt. Bekijk de pagina en controleer of thema- of editorstijlen de regels niet overschrijven.

Dit voorbeeld behoudt de verhoudingen en laat de afbeelding binnen haar container verkleinen:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Afgewerkte keuken met eiken kasten en een stenen werkblad">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Gebruik je eigen pad, afmetingen en alt-tekst. HTML-breedte en -hoogte beschrijven de bron en helpen ruimte reserveren. CSS regelt weergavegrootte en hoeken. Volg voor het cirkelvoorbeeld hieronder dezelfde stappen met de klasse team-avatar en de bijbehorende CSS.

Zet de editor de klasse op een wrapper rond de afbeelding, verander dan de selector .rounded-image in .rounded-image img. Gebruik bij de cirkel .team-avatar img in plaats van .team-avatar. Zo gelden formaat- en afrondingsregels voor de afbeelding in die wrapper.

De waarde 16px rondt alle vier hoeken af. CSS kan ook verschillende radii gebruiken: border-radius: 16px 16px 0 0 rondt alleen de bovenhoeken af. De volgorde is linksboven, rechtsboven, rechtsonder en linksonder. Pixilo rondt momenteel alle vier gelijk af. Zie MDN over border-radius voor de volledige syntaxis en percentages.

CSS verandert de weergave op die pagina, niet het gedownloade bronbestand. Apart openen of opslaan van het origineel neemt de CSS-vorm niet mee. Door CSS verborgen delen blijven in de bron aanwezig.

Maak een ronde afbeelding met CSS

Een CSS-cirkel heeft gelijke weergavebreedte en -hoogte nodig. De bronfoto mag rechthoekig zijn: object-fit: cover vult het vierkant zonder de persoon uit te rekken, waarna de radius er een cirkel van maakt.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fysiotherapeut">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Hier is de bron 800 × 1200 pixels en wordt deze in een vierkant van 160 × 160 getoond. Pas die waarden aan je beeld en layout aan. Verander je de grootte op een mobiel breakpoint, houd breedte en hoogte gelijk.

object-fit: cover behoudt de verhoudingen en snijdt af wat niet past. object-position: 50% 40% centreert horizontaal en toont bij deze staande bron een iets hoger deel dan de standaard verticale centrering. Het zoomt niet op het gezicht. Stel elke positie afzonderlijk af.

MDN legt object-fit en object-position verder uit. Dwing een rechthoekige foto niet zonder geschikte passing in een vierkant, want dan kan het onderwerp vervormen.

Voorbeeld: consistente teamportretten

Een praktijk heeft vier foto's: twee hoofd-schouderportretten, een ruimere foto uit de behandelkamer en een strak uitgesneden gezicht. Op de teampagina komen ze in cirkels van 160 × 160. Dezelfde buitenvorm is pas de eerste stap.

1. Kies een referentie-uitsnede. Bepaal met één portret hoeveel hoofd en schouders zichtbaar moeten zijn. Laat ruimte boven het haar en zet ogen op ongeveer dezelfde hoogte. Gebruik dit visueel, niet als starre maat voor iedereen.
2. Stem de gezichtsgrootte af. Snijd de ruime kamerfoto strakker bij zodat de persoon niet veel kleiner lijkt. Mist het strakke portret al haar of kin, gebruik dan zo mogelijk een ruimer origineel. De cirkel vergroten herstelt geen ontbrekende inhoud.
3. Kies hoe je de cirkel maakt. Bereid voor CSS de uitsneden voor, gebruik hetzelfde kader van 160 × 160 en stel elke positie af. Maak voor opgeslagen cirkels gelijke vierkante kopieën, bijvoorbeeld passende 320 × 320, en gebruik Pixilo op 100% voor alle beelden.
4. Bekijk de reeks samen. Zet portretten naast namen op de echte grootte. Geen gezicht moet alleen door een strakkere uitsnede overheersen. Controleer daarna mobiel, waar de portretten onder elkaar kunnen staan.

Consistentie komt ook van vergelijkbare uitsneden en gezichtsgroottes. Houd nuttige context in beeld, maar zet namen en functies in de paginatekst in plaats van in het portret.

Kies achtergrond en bestandsformaat

Sla met transparantie op als de afbeelding op verschillende paginakleuren of in donkere modus moet werken. Een witte hoek kan op wit wegvallen maar op een donkere kaart een vierkante vlek worden. Sommige viewers tonen transparantie op wit of een dambord. Probeer een andere achtergrond voordat je aanneemt dat er witte pixels zijn.

Met Transparante achtergrond uit vult de gekozen kleur verwijderde hoeken en bestaande transparante gebieden. Een ondoorzichtige fotoachtergrond wordt niet vervangen. Heb je wit gevuld maar wil je transparantie, ga dan terug naar het origineel en sla opnieuw op met de optie aan.

PNG bewaart transparantie zonder nieuwe compressie met kwaliteitsverlies, maar kan een foto groter maken. Vergelijk voor de website een WebP-kopie die transparantie kan behouden. Pixilo converteert met kwaliteitsverlies, dus controleer randen en detail. JPG bewaart geen transparante hoeken. Onze handleiding voor transparante achtergronden legt de keuzes uit.

Bij een CSS-vorm hoeft de foto zelf niet transparant te zijn. Houd een geschikte JPG of WebP en laat de browser de weergave afronden. CSS comprimeert de bron niet. Kies passende afmetingen en vergelijk bestandsgrootte en scherpte van het geleverde beeld.

Controleer het resultaat in de echte layout

• Bekijk het onderwerp. Controleer gezichten, haar, productranden en tekst bij de uitsnede. De vorm moet nuttige informatie behouden.
• Controleer kleine schermen. Bij een CSS-cirkel moeten zichtbare breedte en hoogte gelijk blijven. Beoordeel ook de radius op uiteindelijke grootte.
• Probeer de pagina-achtergronden. Zoek op lichte en donkere vlakken naar onbedoelde vaste hoeken of een lichte rand.
• Controleer de eindversie. Website of app kan het bestand verkleinen, bijsnijden of converteren. Controleer de opgeslagen of gepubliceerde kopie, ook na een formaatwijziging.
• Behoud nuttige alternatieve tekst. Beschrijf de functie, niet alleen de vorm. Een teamportret moet de persoon in context identificeren; decoratieve afbeeldingen hebben meestal lege alt-tekst nodig. Zie onze handleiding voor alt-tekst en bestandsnamen.

Veelgestelde vragen

Waarom werd de afbeelding een ovaal of capsule?

Controleer eerst de verhoudingen. Gebruik voor CSS gelijke weergavebreedte en -hoogte, of snijd de bron vierkant vóór Pixilo op 100%. De vormvergelijking hierboven laat zien waarom een rechthoek een andere omtrek krijgt.

Waarom zijn de hoeken nog wit?

Test eerst een andere achtergrond zoals hierboven. Bevatten de hoeken witte pixels, controleer dan een gekozen vaste kleur of conversie naar JPG. Ook de website of app kan transparantie door wit vervangen hebben. Sla een nieuwe transparante kopie van het origineel op en controleer het formaat na publicatie.

Waarom houdt de afbeelding rechte hoeken in een afgeronde kaart?

Het afronden van de kaart rond de afbeelding knipt de afbeelding zelf niet automatisch af. Pas de radius op de afbeelding toe of gebruik een afgeronde wrapper met overflow: hidden om de inhoud samen af te knippen. Bevat die bedieningselementen, controleer dan of de toetsenbordfocus zichtbaar blijft.

Kan ik een cirkel maken zonder iets van de foto af te snijden?

Een cirkel kan niet het hele rechthoekige fotokader vullen zonder een deel te verliezen of de compositie te veranderen. Moet alles behouden blijven, plaats de foto dan in een groter vierkant ontwerp met ruimte rondom en controleer de cirkelrand. Een rechthoek is vaak beter voor gedetailleerde inhoud.

Laden afgeronde afbeeldingen sneller?

De vorm alleen garandeert geen kleinere download. Controleer afmetingen en formaten zoals hierboven en meet het bestand dat de gepubliceerde pagina echt levert.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)