Notizen vom Team zu Handwerk, Formaten und den kleinen Entscheidungen hinter einem guten runden Zuschnitt.
Wie Cropper.js v2 die Kreismaske erzeugt
Cropper.js v2 ist ein Web Component. Die Elemente cropper-canvas, cropper-image und cropper-handle bilden zusammen die Stage. Der kreisförmige Zuschnitt ist kein CSS-border-radius-Trick, sondern eine Canvas-Composite-Operation (destination-in), die beim Export angewendet wird. Der Benutzer sieht das vollständige Bild mit einer dunklen Überlagerung, und der kreisförmige Auswahlbereich wird live aus den Anfasser-Positionen berechnet, die im internen Zustand des Components gespeichert sind. Beim Klick auf Speichern wird ein temporäres Canvas in den gewählten Abmessungen erstellt, das Bild wird darauf gezeichnet, und die Composite-Maske entfernt alles außerhalb des Kreises. Für PNG, WebP und AVIF enthält das Ergebnis einen Alphakanal. Für JPEG werden die transparenten Pixel mit einer Volltonfarbe gefüllt, bevor kodiert wird, weil JPEG keinen Alphakanal in seiner Spezifikation hat. Cropper.js v2 läuft unter MIT-Lizenz auf github.com/fengyuanchen/cropperjs.
PNG, WebP, AVIF und JPEG für Kreiszuschnitte
PNG ist verlustfrei und universell unterstützt. Ein 512×512 Kreisexport aus einem 8-Megapixel-Foto beträgt durchschnittlich 180 bis 350 KB, je nach Fotokomplexität. WebP ist visuell verlustfrei bei Qualität 85 bis 90, 25 bis 40 Prozent kleiner als PNG, und wird von jedem Browser unterstützt, der nach 2023 ausgeliefert wurde. AVIF verwendet AV1-Intra-Kodierung, typischerweise 40 bis 50 Prozent kleiner als WebP bei gleichwertiger visueller Qualität, aber der @jsquash/avif-WASM-Encoder braucht länger. Etwa 3 Sekunden am Desktop, und bis zu 30 Sekunden auf einem Mittelklasse-Mobilgerät für eine 8-Megapixel-Eingabe. JPEG kodiert am schnellsten, etwa 400 ms am Desktop, hat aber keinen Alphakanal. Verwende JPEG nur, wenn die Zielplattform transparente Dateien ablehnt, was bei manchen Slack-Integrationen und manchen E-Mail-Clients passiert. Die meisten Nutzer sollten PNG für Verlässlichkeit oder WebP für kleinere Dateigröße wählen.
Plattform-Größenleitfaden für kreisförmige Avatare
Verschiedene Plattformen rendern Avatare in unterschiedlichen Größen innerhalb der kreisförmigen Maske. LinkedIn: Profilfoto bei mindestens 400×400 px, kreisförmig dargestellt auf der Profilseite und bei etwa 48 px im Feed. Discord: Server-Icon bis maximal 512×512, Benutzer-Avatar bei 128×128 in Server-Mitgliederlisten und 32×32 im Chat. Instagram: Profilbild kreisförmig bei etwa 110 px auf dem Mobilprofil, 32 px in Feed-Vorschaubildern. Slack: Workspace-Avatar bis zu 512×512, kreisförmig in der Kanalliste bei etwa 36 px. Das Tool exportiert in der Originalfotoauflösung. Wenn du eine exakte Ausgabegröße brauchst, skaliere das Bild zuerst über /resize/, bevor du den Kreiszuschnitt durchführst. So erhältst du pixelgenaue Ausgabe ohne jegliches Hochskalierungsartefakt.
HEIC und die Safari-Einschränkung erklärt
HEIC ist Apples Container-Format mit HEVC-Komprimierung. Safari 17 und neuer verarbeitet HEIC nativ über createImageBitmap, weshalb das Kreiszuschneiden eines iPhone-Fotos auf Safari ohne Konvertierungsschritt funktioniert. Chrome, Firefox und Edge implementieren createImageBitmap für HEIC stand 2026 nicht. Sie geben einen Dekodierungsfehler zurück. Das Tool prüft beim Upload die Magic Bytes. Wenn eine HEIC-Datei auf einem Nicht-Safari-Browser erkannt wird, schlägt eine freundliche Fehlermeldung vor, zuerst in JPG zu konvertieren. Der Workaround für Nicht-Safari-Nutzer: das Foto auf einem iPhone in der Fotos-App öffnen und als JPG teilen (im Share-Sheet verfügbar), oder /heic-to-jpg/ verwenden, wenn du bereits eine HEIC-Datei auf dem Desktop hast. Hinweis: Eine .heic-Datei, die in .jpg umbenannt wurde, wird trotzdem abgelehnt, weil der Magic-Byte-Check die Umbenennung erkennt.
Warum der Bereich außerhalb des Kreises transparent ist
Wenn du einen PNG- oder WebP-Kreiszuschnitt exportierst, haben die Pixel außerhalb der Kreisgrenze einen Alphawert von 0, also vollständig transparent. Auf Plattformen, die Avatare in einem kreisförmigen Rahmen rendern, wird der transparente Hintergrund unsichtbar und die eigene Hintergrundfarbe der Plattform scheint sauber durch. Auf Plattformen, die die Datei in voller Größe anzeigen, wie eine Dateianhang-Vorschau oder ein Fotoalbum, erscheint der transparente Bereich als Schachbrettmuster. Wenn du den Kreis in ein Design-Tool wie Figma oder Canva einfügst, kannst du ihn ohne weißes Halo-Artefakt über jede Farbe legen. Die JPEG-Option existiert für Fälle, in denen Transparenz Probleme verursacht. Manche E-Mail-Clients, manche CMS-Bild-Uploader und manche älteren Plattformen entfernen Transparenz und ersetzen sie durch Schwarz. JPEG mit einer gewählten Füllfarbe vermeidet das.
Browserinterne Verarbeitung mit DevTools überprüfen
Jeder kann den No-Upload-Anspruch hands-on überprüfen. Öffne die Browser-DevTools (F12 oder Rechtsklick und dann Untersuchen), gehe zum Network-Tab, klicke auf Leeren, um vorherige Einträge zu entfernen, dann lade ein Bild in das Kreiszuschnitt-Tool hoch und ziehe die Anfasser. Beobachte den Network-Tab während des Uploads und während des Zuschnitt-Drags. Die einzigen Anfragen, die erscheinen, sind für Seiten-Assets (JS, CSS, Schriften), die vor dem Upload geladen wurden. Keine neue POST- oder PUT-Anfrage mit den Bilddaten erscheint. Nach dem Klick auf Speichern erscheint eine einzelne Anfrage zu einer blob:-URL für einen Bruchteil einer Sekunde im Tab. Das ist der Browser, der das lokale Blob auflöst, nicht Daten, die an einen Server gesendet werden. Diese Überprüfung funktioniert in Chrome, Firefox, Safari und Edge.
