الدليل الكامل
تهيمن صور الملف الشخصي الدائرية على الواجهات الحديثة. تعرض تطبيقات WhatsApp وSlack وTwitter وLinkedIn وDiscord وتعليقات Instagram وZoom وعشرات التطبيقات الصور الرمزية على شكل دوائر بغض النظر عن كيفية تحميلها. المشكلة: تستخدم خوارزمية الاقتصاص التلقائي الخاصة بهم مركز الصورة وغالبًا ما تقوم بقص الجزء العلوي من رأسك أو كتفيك أو سياق الخلفية الذي يجب أن يكون في الإطار.
لماذا اقتصاص دائرة نفسك
تحكم أفضل في التركيبةAuto-cropping centers on the image center pixel. Manual cropping lets you put the eye line in the upper third (the rule of thirds), follow the eyes' direction, and frame your face the way you want.
حواف شفافة حقيقيةA square photo with a "circular" CSS mask still has square pixels underneath. A true circular PNG has transparent corners, which means it works correctly on any background — colored, patterned, gradient, or photographic.
الاتساق عبر الأنظمة الأساسيةمنصات مختلفة المحاصيل بشكل مختلف قليلا. تبدو صورة PNG الدائرية التي تم قصها مسبقًا متطابقة في كل مكان.
المظهر الاحترافيA perfectly framed circular crop with clean edges signals attention to detail. It's a small thing buyers, recruiters, and clients notice subconsciously.
عندما تكون المحاصيل الدائرية ضرورية - WhatsApp / Telegram / Signal: أيقونات الملف الشخصي والمجموعة - Slack / Discord: الصور الرمزية لمساحة العمل وأيقونات الروبوت - Twitter / X: صورة الملف الشخصي (يتم اقتصاصها تلقائيًا إلى دائرة) - LinkedIn: صورة الملف الشخصي، شعار الشركة - Instagram: الملف الشخصي، دوائر القصة - Zoom: الصورة الرمزية خارج كاميرا الويب - جهات اتصال iOS / Android: صور جهات الاتصال - صورة قناة البودكاست ويوتيوب: عناصر العلامة التجارية الدائرية - شعارات للشارات الدائرية والملصقات وأيقونات التطبيقات
نصائح لتكوين الصور الشخصية الدائرية
للحصول على لقطات للرأس- Eyes should sit in the upper third of the circle - Crown of head should have ~10% margin from circle edge - Chin should have ~5% margin from bottom of circle - Shoulders should be visible (don't crop too tight)
للشعارات- يجب أن تكون العناصر المهمة داخل المربع المنقوش - تجنب وضع التفاصيل المهمة بالقرب من حافة الدائرة (قد تكون مقطوعة بإطارات أو حلقات) - اختبر كيفية قراءة الشعار بأحجام صغيرة (40-60 بكسل)
لمحات عن الحيوانات/الحيوانات الأليفة- مركز العينين، وليس الأنف - أبقِ الأذنين داخل الدائرة إن أمكن - استخدم خلفية متباينة لرؤية أفضل
للصور الرمزية المجردة/الزخرفية- التصميمات المتماثلة تعمل بشكل أفضل في الدوائر - استخدم أشكالًا جريئة وبسيطة تُقرأ بأحجام صغيرة - تباين عالٍ بين الموضوع والخلفية
أفضل قرار للمحاصيل الدائرية
| المنصة | حجم العرض | المصدر الموصى به |
|---|
| واتساب | 192×192 | 500×500 |
| سلاك | 192×192 | 500×500 |
| تويتر | 400×400 | 1000×1000 |
| ينكدين | 400×400 | 1000×1000 |
| انستغرام | 320×320 | 1000×1000 |
| الفتنة | 128×128 | 500×500 |
| تكبير | 200×200 | 500×500 |
الأخطاء الشائعة - الاقتصاص ضيق للغاية: يقطع الجبهة أو الذقن، مما يجعل الصورة الرمزية تبدو ضيقة -موضوع خارج المركز: وضع الوجه يبدو عرضيًا وليس مقصودًا -مصدر منخفض الدقة: ينتج صورة رمزية غامضة بأحجام عرض شبكية العين -الحفظ بصيغة JPG: يستبدل الزوايا الشفافة بخلفية بيضاء -باستخدام خلفية مزدحمة: يصرف الانتباه عن الوجه/الموضوع -نسيان متطلبات المنصة: تفرض بعض الأنظمة الأساسية نسبة عرض إلى ارتفاع تبلغ 1:1 للصور الرمزية
حالة حفظ النسخ الأصلية + الدائريةاحتفظ دائمًا بالصورة الأصلية المربعة أو المستطيلة في أرشيفك. قد تحتاج الأنظمة الأساسية المختلفة إلى اقتصاصات مختلفة في المستقبل، وتمنحك الملفات المصدر أقصى قدر من المرونة. يُعد ملف PNG الدائري أحد الأصول المشتقة — ومن السهل تجديده حسب الحاجة.
أدوات ذات صلة
أداة قص الصورقص الصورة على الإنترنت مجانًاأداة إزالة الخلفية In-Depth Guide, Best Practices & Expert FAQs
مراجعة عبد الكني عبد الواحد، المحرّر · Last updated July 20, 2026
A true circular crop needs an alpha channel — otherwise the four corners around your circle stay white and look like a bad Photoshop mistake wherever the destination background isn't also white. Our circle cropper draws a clipping path on an HTML5 canvas, then exports as PNG-24 with genuine transparency in the corners. The center of the crop is aligned to a smart-detected face when present, so team photos come out with the head correctly centered instead of the neck. This page explains the difference between visual circles (masked with CSS `border-radius`) and true circular images (needed for print, PDF, and any app that doesn't apply CSS), how to size the source correctly so the circle isn't pixelated, and how to add a stroke or drop shadow that renders on any background.
لمن هذه الأداة
صور الملف الشخصي لـ LinkedIn وSlack وZoom
تعرض معظم التطبيقات الصور الرمزية على شكل دوائر حتى إذا قمت بتحميل مربع. يتجنب الاقتصاص المسبق التركيز التلقائي غير المناسب على أذنك.
صفحات الفريق على مواقع الشركة
تبدو لقطات الرأس الدائرية المتسقة عبر صفحة الفريق مصقولة أكثر بكثير من الصور المربعة/الدائرة المختلطة.
الصور الرمزية لتوقيع البريد الإلكتروني
التوقيعات موجودة في Gmail/Outlook حيث يكون CSS محدودًا - يتم عرض صور PNG الدائرية الحقيقية بشكل صحيح في جميع العملاء.
طباعة المواد وشهادات PDF
يتجاهل برنامج الطباعة CSS. يتم عرض ملفات PNG الدائرية الحقيقية فقط كدوائر على بطاقات العمل والكتيبات والجوائز.
بودكاست الحلقة الفنية
تعمل كل من Spotify وApple Podcasts وOvercast على قص الصور الفنية للحلقات بطرق مختلفة. يؤدي توفير نسخة دائرية حقيقية إلى إبقاء صورة المضيف في المنتصف.
خطوات العمل خطوة بخطوة
- 1
قم بتحميل صورة مصدر مربعة
Portrait framing works best; the closer to 1:1, the less you'll lose to the crop.
- 2
قم بتوسيط الوجه تلقائيًا أو اسحب يدويًا
كشف الوجه يضع مركز المحاصيل على الوجه. اضبط باستخدام مقبض السحب إذا كنت تريده أقل (أكتاف مرئية) أو أعلى (صورة للرأس).
- 3
اختر القطر
الأحجام الشائعة: 400 بكسل (Slack)، 500 بكسل (LinkedIn)، 640 بكسل (Discord)، 1024 بكسل (فن البودكاست)، 2048 بكسل (طباعة).
- 4
أضف حدًا أو ظلًا اختياريًا
يساعد الحد الأبيض بحجم 4 بيكسل على إبراز الدائرة على خلفيات صفحة الفريق الداكنة.
- 5
تصدير بتنسيق PNG (وليس JPG)
تحافظ PNG على الشفافية في الزوايا؛ سوف يملأها JPG باللون الأبيض.
أمثلة من الواقع
تحديث صفحة فريق بدء التشغيل
تمت إعادة تصميم صفحة الفريق المكونة من 12 شخصًا باستخدام الصور الرمزية الدائرية. يؤدي الاقتصاص المجمع في جلسة واحدة إلى إنتاج 12 صورة PNG ذات إطار ثابت بدقة 500 بكسل في أقل من 5 دقائق.
صورة المؤلف لكتاب
يحتاج الناشر إلى لقطة رأس دائرية بحجم 1200 بكسل لغطاء الغلاف الخلفي. يتيح الاقتصاص إلى PNG الحقيقية للطابعة وضعها على أي خلفية ملونة.
تغيير العلامة التجارية للبودكاست
يقوم العرض بتبديل صور المضيف المربعة بصور دائرية تتطابق مع العمل الفني الجديد. تعمل ملفات PNG الدائرية عبر Apple Podcasts وSpotify وموقع العرض على الويب.
أفضل الممارسات من فريق التحرير لدينا
- ابدأ بمصدر لا يقل عن 2× القطر المستهدف بحيث يكون تصغير الحجم حادًا.
- ركز على العيون - تضع قاعدة الصورة الكلاسيكية للأثلاث العيون في الثلث العلوي من المحصول.
- Use PNG for anywhere transparency matters; use JPG only if you're baking in a specific background color.
- أضف حدًا دقيقًا بحجم 1-2 بيكسل يطابق لون علامتك التجارية لصفحات الفريق - مما يساعد على الاتساق.
- تحقق من المحصول مقابل الخلفيات الفاتحة والداكنة قبل النشر.
- Keep the aspect ratio of the source close to 1:1 so you're not wasting a large portion of the photo.
مقارنة سريعة
| الأسلوب | يعمل في الطباعة؟ | يعمل في البريد الإلكتروني؟ | امتداد الملف |
|---|
| نعم | نعم | .png |
| No | نادرا | .jpg/.png + CSS |
| No | No | .png + SVG |
أخطاء شائعة وكيفية إصلاحها
✗ التصدير بصيغة JPG
✓ JPG يملأ الزوايا باللون الأبيض. قم دائمًا بتصدير المحاصيل الدائرية بتنسيق PNG.
✗ تحميل مصدر منخفض الدقة
✓ A 200 px source can't produce a sharp 500 px circle. Start with at least 2× the final diameter.
✗ توسيط المحصول على الرأس بدلاً من الوجه
✓ تمركز الرأس يترك الفم منخفضًا في الدائرة. قم بالتركيز على العيون للحصول على مظهر كلاسيكي للرأس.
✗ إضافة خلفية ملونة داخل الدائرة
✓ الخلفيات الصلبة داخل الدائرة تهزم النقطة – احتفظ بالموضوع ودع الدائرة تكون شفافة في الخارج.
حل المشكلات
العَرَض: الزوايا بيضاء في Slack
السبب: لقد قمت بالتصدير بتنسيق JPG.
الحل: إعادة التصدير بصيغة PNG.
العَرَض: تبدو الدائرة منقطة
السبب: دقة المصدر أصغر من القطر المستهدف.
الحل: قم بتحميل مصدر أكبر أو تقليل القطر المستهدف.
العَرَض: الوجه خارج المركز
السبب: فشل الاكتشاف التلقائي في الملف الجانبي أو الوجه المغطى.
الحل: اسحب مركز الاقتصاص يدويًا لتغيير موضعه.
أسئلة شائعة يجيب عنها الخبراء
هل الإخراج شفاف حقًا؟ + نعم، يحتوي ملف PNG المُصدَّر على قناة ألفا مناسبة — الزوايا الأربع شفافة.
ما الحجم الذي يجب أن أختاره لـ LinkedIn؟ + LinkedIn's max is 8 MB and it displays avatars at 400×400 px, but they accept up to 20000×20000. 800 px is a safe high-quality choice.
هل يمكنني إضافة حدّ حول الدائرة؟ + نعم، يمكن تكوين عرض الحد واللون بما يصل إلى 8 بكسل.
هل سيعمل على طباعة بطاقات العمل؟ + نعم - قم بالتصدير بدقة 300 نقطة في البوصة (القطر المستهدف × 300/72) وقم بتسليم PNG إلى الطابعة الخاصة بك.
هل يمكنني الاقتصاص إلى شكل بيضاوي بدلاً من دائرة مثالية؟ + تقفل هذه الأداة على دائرة 1:1. استخدم أداة قص الصور الخاصة بنا لنسب العرض إلى الارتفاع التعسفية.
هل يزيل بيانات EXIF؟ + نعم، تقوم إعادة ترميز اللوحة القماشية بإسقاط EXIF بما في ذلك نظام تحديد المواقع العالمي (GPS) بشكل افتراضي.
إلى أي مدى يمكن أن يكون المصدر؟ + ما يصل إلى 50 ميجابكسل على متصفحات سطح المكتب. قد تفشل الملفات الأكبر حجمًا على الأجهزة ذات ذاكرة الوصول العشوائي المنخفضة.
هل يمكنني معالجة عدة صور دفعة واحدة؟ + نعم، يقوم الوضع الدفعي بقص ما يصل إلى 20 صورة مرة واحدة باستخدام نفس إزاحة المركز.
المراجع ومزيد من القراءة
- MDN — CanvasRenderingContext2D.clip()
تابع مع أدوات ذات صلة
أداة قص الصورأداة إزالة الخلفيةأداة تغيير مقاس الصورمحوّل الصور