Bild-Ecken abrunden

Über GeekFormat

Klicken Sie zum Hochladen eines Bildes

JPG / PNG / WEBP

Radius-Standard

Randradius

20%

050%

Ausgabeformat

Bild hochladen, um Vorschau anzuzeigen

Fügen Sie Bildern online abgerundete Ecken hinzu, Echtzeitvorschau per Schieberegler, 3 Voreinstellungen klein/mittel/groß, exportiert transparentes PNG für jeden Hintergrund.

Was ist das Abrunden von Bildecken?

Das Abrunden von Bildecken ist die Technik, die 4 rechten Winkel eines Bildes durch glatte Bögen zu ersetzen. Dieses Tool zeichnet abgerundete Rechteckpfade via arcTo() von Canvas, nutzt dann clip() zum Beschneiden des Bildes: ungefüllte Bereiche werden beim PNG-Export zu transparenten Alpha=0 Pixeln.

**Welchen visuellen Effekt haben abgerundete Ecken?** Sie sind weicher und freundlicher als rechte Winkel, reduzieren visuelle Schärfe, weit verbreitet im UI-Design für App-Icons, Buttons, Karten, Avatare. Das "Superellipse (Squircle)" von iOS führt die Ecken zur Extremform glatter Kurven.

**Warum erfordern viele App-Icons abgerundete Ecken?** iOS/iPadOS/macOS Big Sur wenden automatisch Eckenmasken an, aber ein weißer Originalhintergrund führt zu "Weißrand"-Fehlern. Korrekt ist, zuerst ein PNG mit abgerundeten Ecken an der Quelle zu generieren; dieses Tool dient dazu.

**Pixel vs Prozent:** Pixel sind präzise aber schwer zwischen Bildern auszurichten; Prozent sind adaptiv und konsistent über verschiedene Größen. Designsysteme verwenden Prozent, wie 22.37% für iOS und 25% für Android.

**Unterschied zu CSS border-radius:** CSS border-radius wirkt auf der Darstellungsebene, das exportierte Bild hat weiterhin rechte Winkel; dieses Tool erzeugt echte PNGs mit Alphakanal für alle CSS-freien Szenarien (PPT, Video, Druck).

Anwendungsfälle

Avatare für soziale Netzwerke erstellen (WhatsApp, LINE, Twitter/X, Instagram, Facebook), erzeugt kreisförmige Avatare per Klick
Schnelles Abrunden von App-Icons (iOS empfiehlt 22-25%, Android Adaptive Icon 25%)
E-Commerce-Produktbilder mit abgerundeten Ecken wirken weicher und attraktiver, verbessern Klicks und Conversions
Lokale Verarbeitung von Bildmaterial mit abgerundeten Ecken für PPT-Präsentationen, Videobearbeitung und Druck
Erstellung von Icons und Material mit gleichem Rundungsradius für Designsysteme (einzeln verarbeiten)

Anleitung

Auf Upload-Bereich klicken um Bild auszuwählen, oder JPG/PNG/WEBP direkt in den Bereich ziehen
Voreinstellungen klein (10%), mittel (25%), groß (50%) per Klick wählen, oder Schieberegler für individuelle Werte bewegen (klicken zum Wechseln der Einheit)
Ausgabeformat wählen: PNG (transparenter Hintergrund)/WEBP (kleinere Größe)/JPG (weißer Hintergrund)
Echtzeitvorschau rechts, bei Zufriedenheit auf Download klicken, Datei wird automatisch mit Suffix -rounded gespeichert

Funktionen

Doppelte Einheit: Radius unterstützt Pixel (0-500px) und Prozent (0-50%) mit freiem Wechsel, flexibel für verschiedene Szenarien
3 Voreinstellungen: klein (10%), mittel (25%), groß (50%) per Klick, auch individuelle Anpassung per Schieberegler
Drei Ausgabeformate: PNG (mit Alphakanal), WEBP (kleinere Größe), JPG (weißer Hintergrund ohne Transparenz)
Echtzeitvorschau: Regler anpassen um Effekt sofort zu sehen, Schachbretthintergrund zeigt transparente Bereiche
Drag & Drop: Klicken zum Auswählen oder Bilder direkt in den Upload-Bereich ziehen, unterstützt JPG/PNG/WEBP
Lokale Verarbeitung: Alles läuft im Browser-Canvas, Bilder werden nicht auf Server hochgeladen

Best Practices

PNG standardmäßig für Transparenz wählen, nicht JPG

JPG unterstützt keinen Alphakanal, erzwungene weiße Füllung führt zu weißen Quadraten an Ecken. JPG nur bei fehlender Transparenz verwenden, PNG ist Standard.

WEBP für kleine Größe mit Transparenz wählen

WEBP unterstützt ebenfalls Transparenz ist aber 25-35% kleiner als PNG, ideal für Web-Material. Achtung: Einige alte Design-Programme erkennen WEBP nicht, bei Zusammenarbeit PNG bevorzugen.

Eckenproportion für App-Icons

iOS fügt Icons automatisch ~22.37% Rundung hinzu, aber ein weißer Originalhintergrund führt zu "Weißrand"-Fehlern. Korrekt: Zuerst PNG mit abgerundeten Ecken generieren (22-25% empfohlen). Android Adaptive Icon empfiehlt 25% als sichere Zone.

50% Radius für kreisförmige Avatare verwenden

Die meisten sozialen Plattformen wie WhatsApp, LINE, Twitter, Instagram nutzen kreisförmige Avatare. Voreinstellung 50% erzeugt rundes PNG per Klick, transparenter Hintergrund passt zu hellen/dunklen Themes.

iOS App Icon Richtlinien

Kein CSS border-radius auf bereits abgerundete Bilder anwenden

Wenn Sie bereits ein PNG mit abgerundeten Ecken exportiert haben, nicht zusätzlich CSS border-radius + overflow:hidden verwenden, da doppelte Verarbeitung unscharfe Kanten verursacht. Bild direkt per img-Tag anzeigen.

Für komplexere Ecken (unterschiedliche Ecken, nur obere)

Dieses Tool unterstützt nur standardmäßige gleiche Ecken an allen vier Seiten. Für komplexe Szenarien wie obere TabBar-Ecken, untere Ecken oder einzelne Ecken nutzen Sie den [Bildeditor](/image/image-editor/) oder Profi-Tools wie Figma.

Häufig gestellte Fragen

Wie füge ich einem Bild abgerundete Ecken hinzu?

Bild hochladen und auf Voreinstellungen klein/mittel/groß klicken, oder Schieberegler für individuelle Pixel (0-500px) oder Prozent (0-50%) bewegen. Echtzeitvorschau rechts, bei Zufriedenheit herunterladen, PNG behält automatisch Transparenz.

Pixel oder Prozent für den Radius?

Pixel eignen sich für präzise Steuerung bei festen Größen. Prozent berechnet die Rundung proportional zur kürzeren Seite, flexibler für verschiedene Bildgrößen. Einheit per Klick wechselbar; 50% erzeugt einen perfekten Kreis, ideal für Avatare.

Welche Farbe haben die abgerundeten Ecken?

Bei PNG oder WEBP sind die Ecken vollständig transparente Pixel (Alpha=0), verschmelzen natürlich mit jedem Hintergrund. Bei JPG wird automatisch weiß gefüllt (gelbe Warnung angezeigt), für fertige Bilder ohne Transparenz.

Welche Bildformate werden unterstützt?

Eingabe JPG, PNG, WEBP; Ausgabe PNG (transparent), WEBP (kleiner), JPG (weißer Hintergrund). Der Ausgabedateiname erhält automatisch das Suffix -rounded zur Unterscheidung vom Original.

Gibt es eine Grenze für die Eckengröße?

Prozentmodus 0-50% (50% = perfekter Kreis), Pixelmodus 0-500px. Größerer Wert = rundere Ecken; bei Hälfte der kürzeren Seite wird es zum Kreis. Tool nutzt Canvas arcTo + clip für Standard-Ecken (kein Squircle/Superellipse).

Kann man Avatare oder App-Icons erstellen?

Hervorragend geeignet. Für kreisförmige Avatare Voreinstellung 50% wählen; für iOS App-Icons 22-25% empfohlen (25% verwenden), für Android Adaptive Icon 25% als sichere Zone. Transparentes PNG passt zu jedem Theme.

Wird das Bild durch das Abrunden unscharf?

Nein. Das Tool beschneidet den Pfad in Originalauflösung via Canvas ohne Resampling oder Kompression, Qualität identisch zum Original. Ecken sind echte transparente Pixel, keine unscharfen Übergänge, scharfe Kanten.

Werden Bilder bei der Verarbeitung preisgegeben?

Nein. Die gesamte Verarbeitung läuft lokal im Browser via Canvas API, Bilder durchlaufen keinen Server vom Laden bis zum Download. Auch sensible Bilder wie Ausweisfotos sind sicher.

Warum wird der Ecken-Effekt nicht angezeigt?

Prüfen Sie: ① Ist der Radius größer als 0 (Regler nicht ganz links)? ② Ist das Bild erfolgreich geladen (Formate JPG/PNG/WEBP)? ③ Unterstützt der Browser HTML5 Canvas (moderne Browser ja)? Bei Problemen Seite neu laden.

Was ist der Unterschied zu CSS border-radius?

CSS border-radius wirkt auf der Darstellungsebene, das exportierte Bild hat weiterhin rechteckige Ecken und funktioniert nur im Web; dieses Tool erzeugt echte PNG-Dateien mit Alphakanal für PPT, Videos, Druck und CSS-freie Szenarien.

Glossar

Eckenradius (Border Radius): Radiuswert des Bogens, der die Krümmung bestimmt. Größerer Wert = rundere Ecke, Maximum (halbe kürzere Seite) bildet einen Kreis. Unterstützt Pixel (0-500px) und Prozent (0-50%).
Alphakanal: In PNG/WEBP integrierter Transparenzkanal, jedes Pixel nutzt 0-255 für Deckkraft. Nach dem Abrunden haben Ecken Alpha=0, daher ist der Hintergrund vollständig transparent, keine Farbe.
Squircle (Superellipse): Ab iOS 7 eingeführte Eckenform, glatter als herkömmliches abgerundetes Rechteck. Mathematische Formel x⁴+y⁴=r⁴. Dieses Tool erzeugt Standard-Bögen, für Squircle Figma/Sketch verwenden.
Adaptive Icon: Ab Android 8.0 eingeführtes adaptives Icon, bestehend aus Vordergrund und Hintergrund. Empfohlen 25% Radius als sichere Zone, OEM-Launcher wendet Maske nach eigenem Stil an.
Canvas arcTo: Bogenzeichenmethode der Canvas 2D API. Dieses Tool kombiniert arcTo + clip zum Erstellen abgerundeter Rechteckpfade, beschneidet das Bild auf den Bereich der zu transparenten Alpha=0 Pixeln wird.

Referenztabelle der Eckenstandards pro Plattform

Plattform / Element	Basisgröße	Empfohlene Proportion	Ungefähr (px)
iOS / iPadOS App Icon	`1024 × 1024`	Ca. 22.37%	≈ 229 px
Android Adaptive Icon	`108 × 108`	Ca. 25%	≈ 27 px
macOS Sonoma App Icon	`1024 × 1024`	Squircle Superellipse	Kein fester px-Wert
Windows 11 Karten	`—`	Ca. 8 px	8 px
Material Design 3 Large	`—`	Ca. 28 px	28 px
Avatar WhatsApp / LINE	`640 × 640`	50% (vollständiger Kreis)	320 px
Avatar Twitter / Instagram	`400 × 400`	50% (vollständiger Kreis)	200 px
E-Commerce Produkt-Hauptbild	`800 × 800`	Empfohlen 16~24 px	16-24 px

Authoritative References

ReferenceMDN - border-radius
ReferenceApple HIG - App Icon Richtlinien
ReferenceWikipedia - Squircle
ReferenceMDN - Canvas arcTo