תמונות מלבניות רגילות (JPG, PNG, WebP) שומרות פיקסלים ברשת קרטזית קשיחה. מפתחים יכולים לעגל חזותית באתר עם border-radius ב-CSS, אבל CSS לא משנה את קובץ התמונה — נכסים שמדביקים בניוזלטר, ב-Notion, ב-Figma, בשקפים או ב-PDF חוזרים לפינות חדות של 90 מעלות.
הכלי עיגול פינות לתמונה אופה עקומות ריבועיות מוחלקות ישירות לערוץ האלפא באמצעות נתיב חיתוך מואץ חומרה CanvasRenderingContext2D.arcTo():
| הגדרת רדיוס פינה | גיאומטריה בפועל | שימוש מומלץ | פורמט ייצוא מומלץ |
|---|---|---|---|
| רדיוס 8%–16% | ריכוך עדין של כרטיס ממשק | צילומי חנות אפליקציות, ויזואל לבלוג SaaS, הטמעות Notion | PNGאוWebP (שקוף) |
| רדיוס 24%–35% | מראה סקוורקל / אייקון מודרני | תגים בסגנון iOS, תמונות מוצר, כרטיסים חברתיים | PNG (RGBA 32 סיביות) |
| רדיוס 100% (חצי מהצלע הקצרה) | עיגול מושלם או גלולה | אווטארים, אייקוני Discord/Slack, חתימות מייל | PNG (שקוף) |
4 פינות א-סימטריות (TL/TR בלבד) |
לשונית או כותרת מודאל מעוגלת למעלה | באנרים למייל, כותרות כרטיס, מוקאפים | PNGאוJPG (עם מילוי רקע) |
אם צריך לגזום רקע מיותר לפני עיגול אווטאר, מסגרו קודם לריבוע 1:1 בכלי חיתוך תמונה.