עיגול פינות לתמונה

הוסיפו קצוות מעוגלים חלקים, צורת גלולה או עיגול מלא, עם קו מסגרת אופציונלי ורקע שקוף.

בלי העלאותבלי הרשמהעיבוד באצווה
רדיוס פינהאחיד או 4 פינותעובי מסגרתלפני / אחריZIP לאצווה
הורידו תמונה עם פינות מעוגלות
מנוע לא מקוון מוכןסביבת עבודה פרטית ב-100% בדפדפן • בלי העלאות לענן
100% פרטי • בלי העלאת קבצים לשרת

למה להשתמש בכלי לעיגול פינות?

נבנה מהיסוד לפרטיות קפדנית, הרצה מיידית ואפס חיכוך. בלי מנויים, חומות תשלום או הרשמה.

פרטיות מלאה בדפדפן

חיתוך פינות ומסיכת אלפא רצים בדפדפן דרך HTML5 Canvas API. תמונות, צילומי מסך ואווטארים לא עוזבים את המכשיר.

שליטה אחידה או ב-4 פינות

מחוון אחוזים מ-8% עדין עד עיגול מלא ב-100%, או מחוונים נפרדים לפינה שמאל-עליונה, ימין-עליונה, ימין-תחתונה ושמאל-תחתונה.

מסגרת ומילוי רקע מותאמים

הוסיפו טבעת מסגרת מוחלקת (0px עד 20px) בכל צבע HEX, והשאירו פינות שקופות או מלאו אותן ברקע אחיד.

עיבוד אצווה של כמה תמונות

העלו עשרות תמונות מוצר או תמונות צוות, הציגו כל תמונה במחוון לפני/אחרי, והורידו את כולן כארכיון ZIP.

Utiliome מול חלופות ענן מסורתיות

השוו את מנוע ה-WebAssembly המקומי שלנו לכלי ענן ישנים.

מאפיין Utiliome (דפדפן מקומי) ממירי ענן ישנים
פרטיות ואבטחת קבצים RAM מקומי בדפדפן (אפס העלאות לשרת) מעלים תמונות ואווטארים פרטיים לשרתי ענן
שליטה בגיאומטריית הפינות עיגול/סקוורקל אחיד + מחוונים נפרדים ל-4 פינות (TL, TR, BR, BL) נעול לרדיוס אחיד אחד לכל 4 הפינות
מסגרת ורקע מסגרת פנימית מוחלקת (0–24px) + שקיפות או מילוי HEX בלי מסגרת; לעיתים מייצא JPEG עם פינות שחורות
אצווה וייצוא לשוניות מרובות, מחוון לפני/אחרי ו-ZIP בלחיצה תור לקובץ בודד או הורדת אצווה מאחורי תשלום
איך זה עובד

איך להשתמש ב-עיגול פינות לתמונה ב-3 צעדים

בלי התקנת תוכנה. הכול רץ ישירות בדפדפן.

1

העלו תמונה אחת או יותר

גררו קבצי JPG, PNG, WebP או AVIF לאזור הגרירה, או לחצו לבחירת תמונות מהמכשיר.

2

כוונו רדיוס פינה ומסגרת

בחרו מצב אחיד (או תבנית עיגול 50%) או עברו למצב 4 פינות נפרדות, ואז הוסיפו מסגרת ורקע אם צריך.

3

ייצאו PNG שקוף, WebP או ZIP

השוו במחוון לפני/אחרי והורידו קבצים בודדים או ארכיון ZIP של כל האצווה.

איך עובדים עיגול תת-פיקסל וחיתוך אלפא

תשובה קצרה: עיגול פינות מחליף פיקסלים חדים של 90 מעלות בקשת בזייה חלקה על Canvas דו-ממדי. בייצוא PNG ב-32 סיביות RGBA או WebP ללא אובדן, הפינות החתוכות שומרות ערוץ אלפא אפס ומשתלבות על כל רקע.

תמונות מלבניות רגילות (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 בכלי חיתוך תמונה.

עיגול אחיד מול א-סימטריה של 4 פינות

תשובה קצרה: מצב אחיד מחיל אותה עקמומיות על כל ארבע הפינות — ריבוע הופך לעיגול ברדיוס 100%, ומלבן לצורת גלולה. מצב 4 פינות מאפשר אחוז נפרד לשמאל-עליון, ימין-עליון, ימין-תחתון ושמאל-תחתון.

מערכות עיצוב שונות דורשות גיאומטריית פינות שונה:

  • אווטאר עגול מלא (רדיוס אחיד 100% על ריבוע 1:1): מחוון על 100% (כלומר 50% מהצלע הקצרה) הופך כל תמונת ראש מרובעת לעיגול חד עם קצוות מוחלקים.
  • באנר גלולה (100% אחיד על 16:9 או 4:3): רדיוס 100% על תמונה רחבה יוצר צורת אצטדיון או קפסולה בלי לעוות את הנושא.
  • צורות עלה ולשונית א-סימטריות (מצב 4-Corner):במעבר לשליטהאישית אפשר לעגל רק שמאל-עליון וימין-עליון (25% / 25% / 0% / 0%) לכותרת כרטיס מייל, או פינות אלכסוניות (40% / 0% / 40% / 0%) למסגרת פורטרט אורגנית.

מסגרת מוחלקת ובחירת רקע מילוי

תשובה קצרה: השתמשו ברקע שקוף וייצוא PNG או WebP כשהתמונה המעוגלת יושבת על צבע, גרדיאנט או מצב כהה. אם חייבים JPEG — שאין בו שקיפות — בחרו מילוי לבן, שחור או HEX כדי שהפינות יתאימו לעמוד היעד.

טעות נפוצה בעיגול פינות היא ייצוא ל-JPEG בלי רקע מילוי, ואז הדפדפן ממלא את הפינות השקופות בשחור (#000000).

עורך הסטודיו נותן שליטה מלאה ברקע החיצוני ובטבעת מסגרת פנימית אופציונלית:

  1. אלפא שקוף (PNG / WebP): משאיר את משולשי הפינות שקופים לגמרי (rgba(0,0,0,0)). מתאים לאתרים, למצגות ולשכבות עיצוב.
  2. מילוי אחיד (לבן, שחור או HEX מותאם): ממלא את אזור הפינה החתוכה בצבע מותג מדויק לפני ציור התמונה — חיוני לייצוא JPEG קל ללקוחות דוא״ל ישנים.
  3. מסגרת מותאמת (0px – 20px): מצייר קו וקטורי מוחלק לאורך קו המתאר המעוגל, כדי שאווטארים וצילומי מסך יבלטו על רקע דל-ניגודיות. צריך להקטין משקל אחרי PNG של 32 סיביות? העבירו את הקובץ ב-דחיסת תמונה.

אצווה מקומית לערכות ממשק ולספרי צוות

תשובה קצרה: העלו כמה תמונות יחד כדי להחיל עיגול, רוחב מסגרת ופורמט ייצוא אחידים על תיקייה שלמה, או התאימו כל לשונית לפני הורדת ZIP — הכול מעובד מקומית בדפדפן.

הכנת 20 תמונות עובדים או 15 צילומי מסך לתיעוד SaaS ידנית בתוכנת שולחן דורשת מסיכות שכבה מייגעות וייצוא חוזר.

בעורך הרב-לשוני של Utiliome אפשר לגרור אצווה שלמה למרחב העבודה:

  • דיוק לכל לשונית:עברו בין תמונות בסרגל העליון ובדקו כל קובץ במחוון המפוצללפני / אחרי.
  • אפס העלאות לענן: כל פיקסל נשאר בזיכרון המקומי (ArrayBuffer ו-HTMLCanvasElement), בהתאם ל-NDA ארגוני ול-GDPR.
  • צריך גם מידות פיקסלים מדויקות? שלבו עם שינוי גודל תמונה כדי לתקנן אווטארים ל-400×400 px או 800×800 px.
שאלות נפוצות

שאלות נפוצות ומדריך: עיגול פינות לתמונה

כל מה שצריך לדעת על עיגול פינות לתמונה החינמי של Utiliome.

למה הפינות המעוגלות הפכו לשחורות או לבנות אחרי ההורדה?

קבצי JPEG לא תומכים בשקיפות אלפא. לפינות שקופות שמשתלבות על כל רקע, בחרו PNG או WebP כפורמט ייצוא והשאירו את הרקע על שקוף.

איך חותכים תמונה לעיגול מושלם?

העלו תמונה מרובעת (יחס 1:1), לחצו על תבנית 50% (עיגול) או גררו את מחוון הרדיוס האחיד ל-100%, וייצאו כ-PNG שקוף. אם התמונה מלבנית, חתכו קודם לריבוע 1:1 בכלי חיתוך התמונה.

אפשר לעגל רק שתי פינות (למשל שמאל-עליון וימין-עליון)?

כן. החליפו את מצב הפינות מאחיד ל-4 פינות. אחר כך קבעו אחוז לשמאל-עליון ולימין-עליון, והשאירו ימין-תחתון ושמאל-תחתון על 0%.

האם עיגול פינות מוריד רזולוציה או חדות?

לא. הכלי מרנדר את הקנבס ברוחב ובגובה הפיקסלים המקוריים (קנה מידה 1:1), ומשנה רק את מסיכת האלפא לאורך קשתות הפינה ומסגרת אופציונלית.

אפשר להוסיף מסגרת צבעונית לתמונה מעוגלת או לאווטאר עגול?

כן. השתמשו במחוון רוחב המסגרת (0px עד 20px) ובורר הצבע בסרגל הצד כדי לצייר מסגרת חלקה שעוקבת אחרי עקמומיות הפינות.

האם התמונות עולות לשרת כשמעגלים להן פינות?

לעולם לא. פענוח התמונה, מסיכת הפינות ואריזת ה-ZIP מתבצעים במלואם בדפדפן. הקבצים לא עוזבים את המחשב או הטלפון.