تُسقط صورة PNG "شفافة" على شريحة داكنة، فيأتي معها مستطيل أبيض. كان الملف سليمًا في المحرر. فماذا حدث؟ الجواب يكمن في قناة رابعة نادرًا ما يُلتفت إليها. كل بكسل في الصورة يحمل قيم الأحمر والأخضر والأزرق، وفي بعض الصيغ رقمًا رابعًا يُسمى قناة ألفا يحدد مقدار ما ينبغي أن يظهر من ذلك البكسل.
يشرح هذا الدليل ما تخزنه تلك القيمة، وأي الصيغ تحتفظ بها (PNG وWebP)، وأيها تختزلها إلى مفتاح تشغيل وإيقاف (GIF)، وأيها تتخلص منها (JPG)، ولماذا يخضع SVG لقواعد مختلفة. وعلى طول الطريق قرأنا قناة ألفا لسبع قصاصات حقيقية بكسلًا بكسلًا، حتى تأتي الأرقام أدناه من ملفات لا من نظريات.
ملف PNG واحد، وأربع خلفيات. الحذاء الرياضي مُدخل اختباري مولَّد بالذكاء الاصطناعي قُصص بمزيل الخلفية من Atlas Cloud؛ ووُضع الملف على كل خلفية دون تغيير.
أهم النقاط
- قناة ألفا هي قناة رابعة تخزّن درجة العتامة لكل بكسل، من 0 (شفاف تمامًا) إلى 255 (معتم تمامًا) في صورة 8 بت.
- تحتفظ PNG وWebP بقناة ألفا كاملة. أما GIF فيمكنه فقط وسم لون واحد من لوحته كشفاف. وJPG لا يخزّن أي شفافية على الإطلاق.
- يعيد مزيل الخلفية المجاني بالذكاء الاصطناعي من Atlas Cloud ملف PNG شفافًا بالحجم البكسلي الذي رفعته، ويُعالج داخل متصفحك.
- في سبع قصاصات مقيسة، كانت 0.7% فقط إلى 2.2% من البكسلات شفافة جزئيًا. ذلك الشريط الرقيق هو الحافة المانعة للتسنين التي تُبقي الشعر والحدود بمظهر طبيعي.
- ملف PNG يُظهر خلفية بيضاء أو سوداء في عارض ما لم يفقد قناة ألفا عادةً. اختبره على خلفية داكنة أو رقعة شطرنج قبل إعادة تصدير أي شيء.
ما تخزنه قناة ألفا داخل كل بكسل
إذا سألت ما هي قناة ألفا فغالبًا ما تحصل على استعارة. إليك الرقم بدلًا من ذلك. تُعرّفها مواصفة PNG الصادرة عن W3C في جملة واحدة: "تحدد عيّنة ألفا درجة عتامة البكسل، حيث يعني الصفر شفافية تامة وتعني القيمة العظمى عتامة تامة." في صورة 8 بت تكون القيمة العظمى 255، ما يمنح 256 درجة بين الشفاف والمعتم.
تسمح PNG أيضًا بألفا 16 بت. تتيح المواصفة أعماق بتات من 8 أو 16 لنوعي الألوان الحاملين لألفا، وهما التدرج الرمادي مع ألفا والألوان الحقيقية مع ألفا، ولقناة ألفا 16 بت 65,536 درجة. خارج خطوط التركيب، سيكون ما تصادفه هو 8 بتات.
إذن بكسل RGBA هو أربعة أرقام. ثلاثة تصف اللون، وواحد يصف التغطية. غيّر الرابع فقط فيبقى اللون ثابتًا بينما يخفت البكسل. تلك هي الحيلة كلها وراء حواف الشعر الناعمة والظلال المتساقطة والزجاج الذي يسمح للخلفية بالظهور من خلاله.
تُخفي كلمة "شفاف" انقسامًا مهمًا. بعض الصيغ تخزّن قيمة ألفا كاملة لكل بكسل، فيمكن أن يكون البكسل ظاهرًا بنسبة 37%. وأخرى تخزّن راية واحدة بنعم أو لا: هذا البكسل يُرسم، وذاك يُتخطى. كلاهما يُسمى شفافية، ووحده الأول يستطيع أن يجعل الحافة تخفت. أبقِ هذا التمييز في ذهنك، لأنه السبب في أن ملصقات GIF تبدو مسننة وقصاصات PNG لا تبدو كذلك.
ثمة مصطلح آخر ستلقاه في أدوات الفيديو والألعاب: ألفا المضروبة مسبقًا. في ملف مباشر (أو غير مضروب مسبقًا)، تُخزَّن قيم اللون بكامل قوتها وتُقيسها ألفا عند العرض. أما في ملف مضروب مسبقًا، فقد ضُربت قيم اللون مسبقًا في ألفا، فيُخزَّن بكسل أحمر نصف ظاهر كأحمر بنصف القوة. تستخدم PNG النوع المباشر؛ وتنص المواصفة على أن قيم اللون "غير مضروبة مسبقًا في قيمة ألفا".
لهذه الفكرة أثر مكتوب. يَنسب مذكرة آلفي راي سميث عام 1995 عن تاريخ ألفا الفضل لنفسه ولإد كاتمول في وضع المفهوم في سبعينيات القرن الماضي في معهد نيويورك للتكنولوجيا، وينسب إلى ورقة بورتر وداف عام 1984 رسم الخط الفاصل بين الاصطلاحين. في أعمال الويب والطباعة اليومية يمكنك تجاهل الفرق؛ فمحررك يتولى ذلك.
كيف تحفظ ملف PNG بخلفية شفافة
تُحسم مشكلات كثيرة من نوع "تصديري ليس شفافًا" قبل أن تفتح نافذة الحفظ. ثلاث قواعد تغطيها. يجب إخفاء طبقة الخلفية أو حذفها، حتى تُظهر مساحة العمل رقعة شطرنج في المحرر. ويجب أن تكون الصيغة إحدى الصيغ التي تحمل قناة ألفا، أي عمليًا PNG أو WebP.
ويُستحسن أن يكون خيار PNG من نوع 8 بت لكل قناة، وغالبًا ما يُوسم PNG-24 أو 32 بت، لا نسخة لوحة ألوان يختزلها بعض المصدّرين إلى شفافية تشغيل أو إيقاف. تسمح مواصفة PNG لصورة مفهرسة بأن تحمل "جدول ألفا يربط عيّنة ألفا بكل مُدخل في اللوحة"، لكن لا يمكنك الاعتماد على استخدام كل أداة له.
مسارات القوائم أدناه مأخوذة من وثائق كل بائع نفسه.
| البرنامج | أين يوجد تصدير PNG الشفاف |
|---|---|
| مزيل الخلفية من Atlas Cloud | انقر تنزيل؛ قناة ألفا موجودة بالفعل، فلا يوجد إعداد صيغة يمكن إخطاؤه |
| Photoshop | File > Export > Export As، اختر PNG كصيغة واسمح بالشفافية في إعدادات الصيغة |
| GIMP 3.0 | File > Export As، سمِّ الملف .png؛ والخيار "Save color values from transparent pixels" ينطبق فقط على الصور ذات الطبقة الواحدة |
| Figma | حدد الإطار، وأضف تصدير PNG في الشريط الجانبي الأيمن؛ وإذا كان للإطار تعبئة، أزل علامة Show في صادرات قسم Fill |
| PowerPoint | Picture Format > Remove Background، ثم انقر بزر الفأرة الأيمن على الصورة، Save as Picture، واختر PNG في قائمة Save as type |
أيًا كانت الأداة التي تستخدمها، انظر إلى النتيجة على رقعة شطرنج قبل التنزيل. تعرض لوحة نتائج Atlas Cloud ذلك تحديدًا، حتى ترى قناة ألفا وهي تعمل قبل أن يصل الملف إلى قرصك أصلًا.
حوّل أي صورة إلى PNG شفاف بنقرة واحدة
أسرع طريقة للحصول على ملف بقناة ألفا حقيقية هي أن تدع نموذج تجزئة يبنيها لك. يشغّل Atlas Cloud أداة إزالة الخلفية داخل تبويب المتصفح، وهي واحدة من مجموعة صغيرة من أدوات الذكاء الاصطناعي المجانية على الموقع لا تحتاج إلى حساب. تسحب صورة، وتنقر Run Free، وتنزّل النتيجة.
يعمل النموذج محليًا عبر WebGPU، مع بديل WASM على الأجهزة التي لا تدعمه، وأكملنا قصاصة والشبكة مقطوعة. لا يوجد علامة مائية ولا تسجيل.
لا تقتصر الموضوعات على صور الأشخاص. في الاختبار، عادت كل من صورة جماعية وكلب طويل الشعر وحذاء رياضي أبيض وتوقيع مكتوب بخط اليد وشعار خطي وقميص أبيض مصوَّر أمام جدار أبيض كقصاصة صالحة للاستخدام، وعاد الشعار بمساحته السلبية مفتوحة. وإن كانت القصاصة التي تحتاجها مخصصة لطبعة كبيرة، فاقرنها بمقارنة مُكبّر الصور المجاني بالذكاء الاصطناعي التي أجريناها، لأن قناة ألفا تتوسع مع الصورة.
داخل قصاصة حقيقية: أين توجد البكسلات الناعمة
فتحنا سبعة من تلك المخرجات في Python وأحصينا كل بكسل حسب قيمة ألفا لديه. كان النمط نفسه في السبع جميعًا. كانت بين 60.6% و98.4% من البكسلات شفافة تمامًا، حسب مقدار الإطار الذي شغله الموضوع.
أما البكسلات الشفافة جزئيًا، تلك التي تتراوح ألفا فيها بين 8 و250، فقد شكّلت 0.7% إلى 2.2% من الصورة. ذلك شريط بعرض 1 إلى 3 بكسلات يمتد حول المحيط، وهو الذي يقوم بكل عمل منع التسنين.
علّمنا الحجاب الشبه الشفاف شيئًا لن يكفيك التعريف وحده لإدراكه. يمكن لقناة ألفا أن تخزّن شبه الشفافية، ومع ذلك عاد الحجاب بـ0.73% فقط من البكسلات الشفافة جزئيًا، وهي نفس الحدود الرقيقة التي عاد بها الحذاء الرياضي. كُتبت الأقمشة نفسها معتمة، وقد دُمجت المساحات الخضراء خلفها في لونها. حُفظ الشكل، وفُقدت شبه الشفافية. فوجود قناة ألفا في ملف لا يخبرك بشيء عن كون النموذج اختار استخدام منتصف المدى أم لا.
ملاحظة تقنية صغيرة للفضوليين: في الملفات السبعة كلها تجلس بكسلات الموضوع المعتمة عند ألفا 254 لا 255، وهو فرق لا تستطيع أي شاشة إظهاره. وفي ملفات PNG بالحجم الكامل التي فحصناها، يحمل كل بكسل شفاف تمامًا قيمة اللون نفسها، وهي الأسود الصريح، فلا يخزّن الملف خلفية خفية يمكن أن تتسرب عائدة كحواف.
أي صيغ الصور تدعم الشفافية
تغطي خمس صيغ تقريبًا كل ملف سيُوضع بين يديك يومًا. وهي تخزّن الشفافية بأربع طرق مختلفة، والفرق يحدد ما إذا كانت الحافة تستطيع أن تخفت، وما إذا كان الملف يستطيع أن يتحرك، وكم سيكون حجمه في النهاية.
| الصيغة | كيف تُخزَّن الشفافية | الدرجات | حواف ناعمة | تحريك |
|---|---|---|---|---|
| PNG | ألفا 8 أو 16 بت لكل بكسل، أو قطعة tRNS للشفافية المفهرسة وأحادية اللون | 256 أو 65,536 | نعم | نعم (APNG، وهي الآن جزء من مواصفة PNG) |
| WebP | ألفا 8 بت لكل بكسل، في الوضعين المضيّع وغير المضيّع | 256 | نعم | نعم |
| GIF | مُدخل واحد في اللوحة موسوم كشفاف | 2 (تشغيل أو إيقاف) | لا | نعم |
| SVG | أشكال متجهية بلا خلفية؛ والعتامة تُضبط لكل عنصر | مستمرة | نعم | نعم |
| JPG | لا شيء | 1 | لا | لا |
هل يدعم JPG الشفافية؟
لا. يذكر دليل صيغ الصور من MDN ذلك بصراحة: "لا يدعم JPEG قناة ألفا." تخزّن الصيغة ثلاث قنوات لون ولا شيء غيرها، فحين تحفظ صورة متعددة الطبقات بصيغة JPG يتعين على المحرر تسطيحها على لون أولًا، وهو الأبيض عادةً. ثم يصبح ذلك الأبيض بكسلات عادية، ويرحل مع الموضوع أينما ذهب الملف.
ولهذا أيضًا فإن تنزيل "JPG شفاف" ليس ما يدّعيه. فإما أن الملف هو في الحقيقة PNG بامتداد خاطئ، وإما أن رقعة الشطرنج التي تراها مرسومة داخل البكسلات. تغيير اسم ملف .jpg إلى .png يغيّر الملصق على الصندوق، لا المحتوى. وإن احتجت الشفافية، فلا بد من فتح ملف JPG، وإزالة الخلفية، وحفظ النتيجة بصيغة تستطيع حمل قناة ألفا.
GIF الشفاف: لون واحد وحواف حادة
تأتي شفافية GIF من المراجعة 89a للصيغة، وقدمها بادية. تضيف مواصفة GIF89a امتداد تحكم رسوميًا يحمل فهرس شفافية، وُصف هكذا: "فهرس الشفافية بحيث أنه عند مصادفته، لا يُعدَّل البكسل المقابل من جهاز العرض وتستمر المعالجة إلى البكسل التالي." يُعلَن مُدخل واحد في جدول الألوان شفافًا. أما كل بكسل آخر فيُرسم بكامل قوته.
هذا يجعل شفافية GIF أمرًا ببت واحد. فإما أن يُتخطى البكسل أو يُرسم، ومع لوحة لا تتجاوز 256 لونًا لا يوجد متسع لحافة نصف ظاهرة. ضع قصاصة GIF على خلفية تختلف عن التي صُنعت عليها فيتدرج المحيط كالسلّم، وغالبًا مع حواف شاحبة حيث شُطب البكسلات المانعة للتسنين إلى معتمة.
حوّلنا قصاصة الحذاء الرياضي إلى GIF بعتبة ألفا 128، وهي القيمة الافتراضية المعتادة، وكبّرنا نفس المنطقة من الرباط ثلاث مرات. يخفت الجانب ذو 8 بتات عبر بكسلين أو ثلاثة. أما جانب GIF فكله زوايا قائمة. وإن احتجت GIF شفافًا لعميل لا يقبل غيره، فابنِه على لون الخلفية التي سيجلس عليها، حتى تُطابق الحواف بدلًا من أن تتوهج.
شفافية WebP في الملفات المضيّعة وغير المضيّعة
WebP هي الصيغة التي منحت الضغط المضيّع قناة ألفا أخيرًا. تصف وثائق الضغط من Google "وضعًا آخر من WebP يتيح ترميزًا مضيّعًا لقنوات RGB وترميزًا غير مضيّع لقناة ألفا"، ويضبط مرجع cwebp جودة ألفا الافتراضية عند 100، بمعنى أن مستوى ألفا يُخزَّن بلا فقدان ما لم تطلب خلاف ذلك.
تضع صفحة نظرة Google العامة على WebP غير المضيّع عند 26% أصغر من PNG، وتذكر أن الشفافية تضيف نحو 22% بالبايتات، وتضع WebP المضيّع مع الشفافية عند نحو 3 أضعاف أصغر من PNG.
كانت أرقامنا نحن في ذلك الجوار. أخذنا قصاصة بحجم 2048 × 1152 مباشرة من مزيل الخلفية، وهي ملف PNG بحجم 1,211 كيلوبايت، وأعدنا حفظها بـPillow بالإعدادات الافتراضية.
جاء WebP غير المضيّع بحجم 660 كيلوبايت، أصغر بنسبة 46%، وطابقت كل قيمة ألفا ملف PNG تمامًا. وجاء WebP المضيّع بجودة 80 بحجم 124 كيلوبايت، وظل مستوى ألفا لديه مطابقًا للملف الأصلي بايتًا ببايت. الشيء الوحيد الذي تغيّر هو بيانات اللون. لتسليم القصاصات على الويب، هذا هو الملف الذي تريده عادةً. أما لنسخة رئيسية تنوي مواصلة تحريرها، فابقَ مع PNG أو WebP غير المضيّع.
خلفية SVG الشفافة: لا خلفية لإزالتها
لا يملك SVG خلفية يجعلها شفافة، لأنه لم تكن لديه خلفية قط. ملف SVG قائمة تعليمات رسم: ارسم هذه الدائرة هنا، واملأها بهذا اللون. لا شيء في تلك القائمة يرسم مساحة العمل إلا إذا أضفت مستطيلًا يغطيها. وحين يبدو لملف SVG خلفية بيضاء، فأنت تنظر إلى الصفحة أو العارض الذي خلفه.
تُضبط الشفافية داخل SVG لكل عنصر. يصف مرجع MDN قيمة التعبئة none بأنها لا ترسم أي تعبئة، فيبقى داخل الشكل صافيًا. وتخفت سمة fill-opacity الطلاء داخل الشكل فقط، بينما تخفت opacity العنصر كاملًا، بما في ذلك الحد.
ثمة أمران يوقعان الناس في الحيرة. الصورة النقطية المضمّنة في SVG عبر عنصر image تحتفظ بقناة ألفا التي تحملها الصورة، فملف JPG داخل SVG يظل يحمل صندوقه الأبيض. وتمرير صورة عبر محوّل من النقطي إلى SVG لا يزيل خلفية؛ بل يرسم الخلفية إلى أشكال مع كل ما عداها.
لماذا لا يكون ملف PNG شفافًا؟
نفّذ هذه الفحوص بالترتيب. الملف الذي يجتاز الأول لا يحتاج أي إصلاح على الإطلاق.
العارض هو الذي رسم الخلفية. على عارضات الصور أن تضع شيئًا خلف البكسلات الشفافة، وكثير منها يختار الأبيض أو الأسود. الملف لم يتغير؛ العرض وحده هو الذي تغيّر. افتح نفس ملف PNG في تطبيق تصميم، أو تبويب متصفح بصفحة داكنة، أو شريحة بتعبئة داكنة. إن اختفى الصندوق، فتوقف هنا.
الملف لا يحمل قناة ألفا. ملف JPG مُعاد تسميته .png، أو لقطة شاشة لصورة شفافة، أو ملف مرّ عبر تطبيق مراسلة أو نظام إدارة محتوى أعاد ترميزه، ستظهر كلها معتمة لأنها بالفعل كذلك. افحص نمط الصورة. في Photoshop يجب أن تسرد لوحة Channels قناة Alpha؛ وفي Windows تُظهر Properties > Details عمق بتات 32 لملف PNG من نوع RGBA بدلًا من 24؛ وفي Python، يُعيد Image.open("file.png").mode القيمة RGBA. وإن كانت ألفا مفقودة، فعُد إلى الأصل متعدد الطبقات وصدّر من جديد.
الحافة حادة أو ذات حواف. المحيط المتدرج كالسلّم يشير إلى شفافية ببت واحد، والحواف الشاحبة أو الملوّنة تشير إلى بكسلات حافية ما زالت تحمل لون الخلفية القديمة. أظهر اختبارنا على الجدار الأحمر كيف يحدث ذلك: مع قميص أبيض أمام جدار أحمر مشبع، مالت 69% من بكسلات الحافة شبه الشفافة إلى الأحمر، وعلى خلفية جديدة تُقرأ تلك العصابة كحواف. الحل هو إعادة التصدير بألفا 8 بتات ودون لون تبطين، وللقصاصات، بخلفية محايدة في الصورة الأصلية أو تقليص القناع بكسل واحد.
رقعة الشطرنج مدموجة في الصورة. غيّر مقياس الصورة. إن كبرت المربعات الرمادية والبيضاء وصغرت مع الصورة، فهي بكسلات. وغالبًا ما تُشحن صور المعاينة من مواقع الصور هكذا. نزّل الملف الحقيقي، أو اقصر الخلفية من جديد.
الأسئلة الشائعة
هل قناة ألفا هي نفسها قناع الطبقة؟
هما أبناء عمومة. تصف مساعدة Photoshop من Adobe قناة ألفا بأنها تحديد مُخزَّن كقناع تدرج رمادي قابل للتحرير في لوحة Channels، ويعمل قناع الطبقة بالطريقة نفسها داخل المحرر. الفرق في ما يبقى بعد التصدير. قناع الطبقة أداة تحرير تعيش في ملف PSD. أما قناة ألفا المكتوبة في PNG أو WebP فهي النتيجة المسطَّحة لكل الأقنعة، وهي الشفافية التي تقرأها التطبيقات الأخرى فعلًا.
كم عدد درجات الشفافية في قناة ألفا 8 بتات؟
256، من 0 (شفاف تمامًا) إلى 255 (معتم تمامًا). أما قناة ألفا 16 بت، التي تدعمها PNG أيضًا، فلديها 65,536. أما GIF فلديه اثنتان: مرسوم أو متخطّى.
هل يمكنني إضافة قناة ألفا إلى ملف JPG؟
لا، ما دام بقي ملف JPG، لأن الصيغة لا مكان فيها لتخزين واحدة. افتح الملف، وافصل الموضوع عن الخلفية، واحفظ النتيجة بصيغة PNG أو WebP. أداة القصاصة القائمة في المتصفح على Atlas Cloud تُجري التحويل في خطوة واحدة: JPG يدخل، وPNG شفاف يخرج، مجانًا ودون تسجيل دخول.
هل تعمل شفافية WebP في كل متصفح؟
تعرض الإصدارات الحالية من المتصفحات الرئيسية WebP بألفا، وجدول توافق الصيغة في MDN هو المكان الذي تتأكد فيه من دعم أي إصدار أقدم ما زلت بحاجة إلى خدمته. وإن كان جمهور قديم يهمك، فسلّم PNG كبديل عبر عنصر picture.
لماذا يظهر في ملف PNG الشفاف هالة بيضاء؟
البكسلات على طول الحافة شفافة جزئيًا، ولا يزال لونها يحمل الخلفية التي قُصّت منها. وعلى أصل أبيض تبدو تلك العصابة كهالة بيضاء بمجرد أن تضع القصاصة على شيء داكن. أعد التصدير بألفا 8 بتات وتبطين مضبوط على none، أو قلّص التحديد بكسل واحد قبل الحفظ.
الخاتمة
الشفافية رقم. يحمل كل بكسل في ملف PNG أو WebP من نوع RGBA قيمة ألفا من 0 إلى 255، وبمجرد أن يستقر ذلك في ذهنك تنتظم بقية الصيغ من تلقاء نفسها: GIF لديه راية تشغيل وإيقاف واحدة، وJPG ليس لديه شيء، وSVG ليس لديه خلفية لإزالتها أصلًا. وقد وضعت القصاصات السبع التي قسناها كل الحافة المانعة للتسنين في شريط يشكّل 0.7% إلى 2.2% من الصورة، وهو بالضبط الجزء الذي تتخلص منه صيغة ببت واحد.
إن كنت قد وصلت إلى هنا تسأل ما هي قناة ألفا لأن ملفًا رفض أن يصير شفافًا، فافحص العارض أولًا، ثم نمط الملف، ثم الحافة. وإن احتجت قناة ألفا نظيفة دون فتح أي محرر، فسيمنحك مزيل خلفية قائم في المتصفح واحدة في ملف PNG واحد، بالحجم البكسلي الذي بدأت به.
