Bild online kostenlos rund zuschneiden — rundes Profilbild erstellen

Kreis oder abgerundetes Quadrat: welche Form wann

Die Form ist eigentlich nicht Ihre Entscheidung — die Plattform legt beim Anzeigen ihre eigene Maske über Ihren Avatar, und die lässt sich nicht überschreiben. Was Sie wirklich wählen, ist, ob Ihre Datei zu dieser Maske passt.

Das ist wichtig, weil ein Kreis rund 21% eines Quadrats wegschneidet, und zwar komplett an den Ecken. Schneiden Sie selbst rund zu, sehen Sie genau, was übrig bleibt. Laden Sie ein volles Quadrat hoch und hoffen das Beste, dann kappt der Kreis der Plattform, was zufällig in den Ecken lag: die Spitze eines Huts, eine Schulter, ein halbes Logo.

Als Faustregel: Gesichter vertragen einen Kreis, Wortmarken ein abgerundetes Quadrat. Ein Gesicht ist ohnehin ungefähr rund, in den Ecken stand also nie Information. Ein Logo mit Text ist meist breiter als hoch, und ein Kreis amputiert die Enden des Wortes. Deshalb verwenden Slack, iOS und der Play Store für Symbole abgerundete Quadrate, während jedes soziale Netzwerk für Menschen Kreise nutzt.

Warum ein transparentes PNG die zusätzlichen Bytes wert ist

Ein in ein JPG geschnittener Kreis ist eigentlich kein Kreis. JPG hat keinen Alphakanal, die vier Ecken müssen also etwas enthalten — normalerweise Weiß. Auf einer weißen Seite fällt das niemandem auf. Legen Sie diesen Avatar auf ein dunkles Design, eine farbige Karte, eine Präsentation oder ein Video-Overlay, und rund um den Kopf erscheinen vier weiße Dreiecke.

PNG und WebP haben beide einen Alphakanal, die Ecken speichern also „nichts“ und der Kreis fügt sich sauber über jeden Hintergrund. Deshalb ist PNG hier die Voreinstellung. WebP leistet dasselbe mit etwa einem Drittel der Bytes und jeder aktuelle Browser liest es — aber manche Upload-Formulare und ältere Desktop-Programme lehnen die Endung noch ab, PNG bleibt also die sichere Wahl, wenn die Datei in fremde Systeme geht.

Der einzige Fall für JPG ist eine Größenobergrenze. Wenn ein Formular auf JPG besteht oder Sie auf ein paar Dutzend Kilobyte begrenzt, wählen Sie hier JPG und setzen Sie die Hintergrundfarbe auf die, die die Zielseite tatsächlich verwendet, damit die Ecken darin verschwinden.

Ein Gesicht so anschneiden, dass es bei 32 Pixeln noch lesbar ist

Ihr Avatar wird fast nie in der Größe gesehen, in der Sie ihn exportiert haben. In einem Kommentarstrang ist er 32 bis 40 Pixel breit. In dieser Größe überleben nur die Kontur des Kopfes, der Kontrast zwischen Gesicht und Hintergrund und ungefähr die Lage der Augen. Alles andere ist Matsch.

Schneiden Sie also enger zu, als es sich natürlich anfühlt. Füllen Sie etwa 60–70% der Kreishöhe mit dem Kopf, setzen Sie die Augen etwas über die Mittellinie und lassen Sie einen schmalen Streifen Luft über dem Haar, damit der Zuschnitt nicht zufällig wirkt. Ein unruhiger Hintergrund ist der mit Abstand häufigste Fehler: Er konkurriert um die wenigen verfügbaren Pixel und macht aus dem Miniaturbild Rauschen. Ist Ihr Hintergrund unruhig, liest sich ein einfarbiger oder unscharfer hinter einem runden Zuschnitt in jeder Größe besser.

Ein praktischer Test: Exportieren Sie den Avatar und sehen Sie ihn sich im Dateimanager in der kleinsten Miniaturansicht an. Wenn Sie nicht erkennen können, dass Sie es sind, kann es niemand sonst.

Der iOS-Squircle, erklärt

Apples App-Symbole sind keine abgerundeten Rechtecke. Ein abgerundetes Rechteck trifft mit seinen geraden Kanten auf eine Viertelkreis-Ecke, und die Krümmung springt an dieser Naht abrupt — das Auge liest sie als leichten Knick. Apple verwendet stattdessen eine Superellipse , bei der die Krümmung von der Kante an allmählich zunimmt, sodass die Kontur überhaupt keinen sichtbaren Übergang hat. Designer nennen das Ergebnis einen Squircle.

Canvas kann nur Ecken aus Kreisbögen zeichnen, der Abgerundet-Quadrat-Modus hier ist also die Näherung über ein abgerundetes Rechteck, keine echte Superellipse. In Avatargröße beträgt der Unterschied ein bis zwei Pixel pro Ecke und niemand wird ihn bemerken. Stellen Sie den Eckenradius auf etwa 22% der Seitenlänge, und Sie landen bei genau dem Verhältnis, das Apple für App-Symbole nutzt; das Tool verwendet standardmäßig 24%, was der Maske von Slack und den meisten Chat-Apps entspricht.

Der Regler geht bis 50%, und das ist ein Kreis — einem abgerundeten Quadrat, dessen Eckenradius die halbe Seitenlänge erreicht, bleibt keine gerade Kante mehr. Diese Kontinuität ist der Grund, warum sich beide Formen hier einen Codepfad teilen, statt zwei getrennte Tools zu sein.

Ränder, und warum sie abgeschnitten werden

Ein Ring um einen Avatar hebt ihn gut von einem unruhigen Hintergrund ab, und er ist das einzige Gestaltungsmittel, das die Maske der Plattform übersteht — solange der Ring innerhalb Ihres Bildes liegt statt darum herum.

Das lohnt eine genaue Betrachtung. Wenn ein Tool einen 6 px breiten Rand außerhalb eines 320 px großen Kreises hinzufügt, wird die Datei 332 px groß; die Plattform skaliert sie dann neu und legt ihre eigene runde Maske darüber — die mitten durch Ihren Ring schneidet und ihn ungleichmäßig zurücklässt. Dieses Tool zeichnet den Rand innerhalb der von Ihnen angegebenen Größe, 320 px bleiben also 320 px und der Ring sitzt genau auf der Kante, die die Maske erwartet. Der Randregler ist aus demselben Grund auf 12% der Seitenlänge begrenzt: Darüber hinaus ist es kein Ring mehr, sondern ein Rahmen.

Warum das Zuschneiden im Browser privater ist

Die meisten „Rund zuschneiden online“-Seiten laden Ihr Foto hoch, schneiden es auf einem Server zu und schicken es zurück. Bei einem Bild des eigenen Gesichts ist das ein echter Unterschied: Auf der Festplatte eines Fremden existiert eine Kopie, gedeckt von der Aufbewahrungsrichtlinie dieses Monats und oft von einer AGB-Klausel, die dem Anbieter eine Lizenz daran einräumt.

Resizo hat kein Backend, das Bilder entgegennimmt. Der Zuschnitt läuft in Ihrem Tab über die Canvas-API des Browsers. Zwei Wege, das zu prüfen: Öffnen Sie den Netzwerk-Tab Ihres Browsers und beobachten Sie, dass beim Zuschneiden nichts gesendet wird, oder trennen Sie nach dem Laden der Seite die Internetverbindung und schneiden Sie trotzdem zu — es funktioniert weiterhin.

Ein nützlicher Nebeneffekt: Beim Neukodieren gehen die EXIF-Metadaten verloren, die GPS-Koordinaten und der Zeitstempel, die Ihr Telefon ins Original geschrieben hat, reisen also nicht mit dem Avatar mit, den Sie öffentlich posten. Wenn Sie diese Metadaten brauchen, bewahren Sie die Originaldatei auf.