بسم الله الرحمن الرحيم

وبه نستعين

الألوان / إعداد الملفات للويب - (1)

Preparing Files for the Web - (1)

 

إعداد الملفات للويب والأجهزة اللوحية

Preparing Files for the Web & Tablets

في السابق، ناقشنا كيفية إعداد ملفاتنا للطباعة على أنواع مختلفة من الأجهزة. الآن، سنتناول إعداد ملفاتنا للعرض الرقمي على الويب والأجهزة اللوحية، وكذلك عند عرضها من خلال تطبيقات العروض التقديمية. بعد بذل الكثير من الوقت والجهد في معايرة شاشاتنا وتحديد خصائصها، قد يكون من أكثر الأمور إحباطًا هو عدم قدرتنا على التحكم في كيفية عرض الصور على شاشات الآخرين عند نشرها أو مشاركتها على الإنترنت.

يصعب ذلك لأننا لا نعرف نوع الشاشة أو جودتها، ناهيك عن نظام التشغيل أو متصفح الويب الذي يستخدمه المشاهدون. لا نعرف ما إذا كانت شاشاتهم قد تمت معايرتها وتحديد خصائصها، وإن كانت كذلك، فلا نعرف قيمة النقطة البيضاء أو جاما white point, gamma أو الإضاءة المستخدمة. عوامل كثيرة خارجة عن سيطرتنا تجعلنا نشعر أنه من الأفضل عدم القلق والاكتفاء بتقبّل استحالة التحكم في هذا الوضع.

هذا صحيحٌ إلى حدٍّ ما، ولكن لا يزال عليك تجهيز ملفاتك للعرض على الإنترنت، فما هي أفضل طريقة لحلّ هذه المعضلة؟ في التالي، سنبدأ بدراسة حالةٍ مُحدّدة لصورةٍ تبدو غريبةً عند عرضها عبر متصفح الإنترنت، مما سيقودنا إلى مناقشة كيفية تعامل المتصفحات المختلفة مع إدارة الألوان، وأفضل الممارسات المُتبعة عند تجهيز ملفاتك للعرض على أكبر تشكيلةٍ من المتصفحات والشاشات.

أخيرًا، سندرس خصائص الألوان في أجهزة الكمبيوتر اللوحية مثل Apple iPad، وتطبيقات العروض التقديمية مثل Apple Keynote وMicrosoft PowerPoint، وأفضل الطرق لتجهيز الملفات للعرض عليها.

لماذا وجه أدريان ❤️ أحمرٌ جدًا؟

Why is Adrienne’s Face so Red?

يحكي لنا الكاتب فيخبرنا عن صورتين، تظهر واحدة منهم لونها أحمر قليلا، ويحكي لنا كيف بدت صورة ابن أخيه أدريان Adrienne على شاشة LaCie 321 مُعايرة ومُجهّزة عند عرضها في متصفح Apple Safari. لماذا يبدو وجهها أحمرًا ومُشبعًا بالألوان في نسخة، بينما النسخة الأخرى تظهر طبيعية؟ إلا أن هناك عوامل عديدة ساهمت في ظهور هذا اللون الأحمر القوي، منها: التركيبة الجينية لأدريان، وعودته للتو من تدريب كرة القدم في يوم حار من أيام يوليو.

وأشياء أخري مثل إعدادات الكاميرا المستخدمة، ونطاق ألوان الشاشة، ومساحة ألوان الصورة (GenericRGB)، وعدم تضمين أي ملف تعريف لوني، والطريقة غير المتوقعة التي كانت ولا تزال تُعالج بها الألوان في متصفح الويب (Apple Safari) ومعظم المتصفحات. لننتقل إلى صلب الموضوع. أوصي باتباع خطوتين أساسيتين لإعداد الصور للويب بحيث تبدو (قدر الإمكان) مطابقةً لما تبدو عليه في برنامجي Adobe Photoshop وLightroom بعد معايرة (تقييم ألوان) الشاشة وتحديد ملف تعريفها اللوني.

خطوتان أساسيتان لإعداد الصور للويب

Two Basic Steps to Prepare Images for the Web

الخطوة الأولي: تحويل الصورة إلى sRGB.

الخطوة الثانية: تضمين ملف تعريف sRGB مع الصورة.

إن نسخة الصورة الشخصية العادية لا تتبع أيًا من الخطوتين السابقتين، وهذا هو سبب ظهورها بالشكل غير الطبيعي. وبالتأكيد إن الأمر يحتاج إلى بعض التعديلات، والتوصيات. يستند هذا الاستنتاج إلى اختبار ومراقبة كيفية معالجة الألوان في أربع متصفحات ويب أساسية وهم: سفاري (نظام التشغيل ماك أو إس إكس من آبل)، وجوجل كروم (نظام التشغيل ماك أو إس إكس من آبل)، وإكسبلورر (نظام التشغيل ويندوز 7 من مايكروسوفت)، وفايرفوكس (نظام التشغيل ماك أو إس إكس من آبل).

وكما ذكرنا، كانت ثلاثة من المتصفحات المختبرة إصدارات لنظام التشغيل ماك أو إس إكس من آبل، وتحديدًا الإصدار 10.6 (سنو ليوبارد)، وكذلك هناك المتصفح أاخر رابع لنظام التشغيل ويندوز 7 من مايكروسوفت. وبعد ما تم اكتشافه ومناقشة فوائد إدارة الألوان في المتصفحات، سنستعرض كيفية معالجة الألوان في هذه المتصفحات الأربعة.

كيف ينبغي أن تعمل المتصفحات؟

How Browsers Should Work

في الوضع الأمثل، فيما يتعلق بمعالجة الألوان، ينبغي أن يكون المتصفح مُدارًا للألوان ويقوم بأمرين محددين:

الأول: إذا كان هناك ملف تعريف ICC مضمن في الصورة، فينبغي أن يتعرف المتصفح على هذا الملف ويستخدمه مع ملف تعريف الشاشة لعرض الألوان بدقة، تمامًا كما يفعل برنامجا فوتوشوب ولايت روم.

الثاني: إذا لم يكن هناك ملف تعريف مضمن، فينبغي أن يفترض البرنامج استخدام مساحة ألوان RGB قياسية. أُفضّل استخدام sRGB، فهذا هو الغرض منه.

حاليًا، تتعرف جميع المتصفحات الأربعة على ملفات تعريف ICC المُضمّنة وتستخدمها (كما هو موضح في التوصية رقم 1 أعلاه)، إذا تم إعدادها بشكل صحيح. لكن لا يفترض أي منها استخدام sRGB عند عدم وجود ملف تعريف مُضمّن (وهنا تكمن أهمية تحديد ملف التعريف للصورة). يبدو أن المتصفحات، عند عدم وجود ملف تعريف مُضمّن، تفترض أن الصورة تعمل ضمن مساحة ألوان العرض على مستوى النظام.

هذه مشكلة. يمكن التعرف عليها وملاحظتها بسهولة، عندما يتم مقارنة النسخ بالصورة الأصلية، وذلك عند استخدام أي شاشة بها أي من المتصفحات السابقة. حتى ولو كانت تحتوي أو لا تحتوي على ملف تعريف ICC مُضمّن، وكانت بمختلف التنسيقات مثل تنسيق sRGB، أو تنسيق الصور ProPhotoRGB. وسنتعرف فيما يلي على كيفية معالجة الألوان في هذه المتصفحات الأربعة الأساسية.

متصفح سفاري من آبل

Apple Safari

توضح لنا التجربة كيف ظهرت النسخ الأربع من صورة الاختبار في متصفح سفاري من آبل. فعلي سبيل المثال، يُظهر النصف الأول من الرسم البياني في سفاري أنه طالما وُجد ملف تعريف مُضمّن مع الصورة - بغض النظر عما إذا كان بتنسيق sRGB أو ProPhotoRGB - فإن الصور تبدو متطابقة، كما أنها تبدو متطابقة مع صورها في برنامجي فوتوشوب ولايت روم. نستنتج من ذلك أن متصفح سفاري من آبل يتعرف على ملفات تعريف ICC المُضمّنة ويستخدمها.

بينما يُظهر الجانب الأخر على سبيل المثال، من الرسم البياني ما يحدث في حال عدم وجود ملف تعريف مُضمّن. تُوضح صورة sRGB نفس الحالة التي ذكرناها مع صورة أدريان في البداية - والعديد من الصور الأخرى أيضًا. من الواضح أن سفاري لا يفترض أن الصورة بتنسيق sRGB عند عدم وجود ملف تعريف مُضمّن. يفترض سفاري أن الصورة بتنسيق الشاشة الافتراضي، سواء كان ذلك من ملف تعريف شاشة مُخصّص أو عام.

لهذا السبب تبدو الصورة أكثر تشبعًا بالألوان، خاصةً على شاشة LaCie 321. تكمن المشكلة في افتراض أن الصورة ضمن نطاق ألوان الشاشة في أن الصور ذات نطاقات الألوان المختلفة لا تتطابق فحسب، بل إن الصورة ستبدو مختلفة على كل شاشة، حتى تلك المُعايرة والمُزوّدة بملفات تعريف.

في حالة صورة ProPhotoRGB بدون ملف تعريف مُضمّن، تبدو الصورة باهتة، لأن متصفح Safari، كما ذكرنا، يفترض أن الصورة ضمن نطاق ألوان الشاشة الافتراضي. الخبر السار لمستخدمي أجهزة الكمبيوتر هو أن Safari متوفر أيضًا لنظام Windows. والأفضل من ذلك، أنه لا يُدير ألوان الصور ذات ملفات التعريف المُضمّنة فحسب، بل يفترض أيضًا أن الصور غير المُوسومة untagged images هي بنطاق ألوان sRGB.

متصفح جوجل كروم

Google Chrome

في حالة تكرار نفس التجربة، يمكننا ملاحظة كيف ظهرت النسخ الأربع من صورة الاختبار في متصفح Google Chrome على شاشة LaCie 321 نفسها. فسوف نلاحظ بسهولة، أن صورتي sRGB متطابقتان، بغض النظر عن وجود ملف تعريف مُضمّن أم لا. أما صور sRGB تظهر مشبعة بالألوان بشكل مفرط مقارنةً بمظهرها في برنامج فوتوشوب. في المقابل، تظهر صورة ProPhotoRGB غير مشبعة بالألوان بدون ملف تعريف مضمن، كما هو متوقع.

لكن الغريب أن النسخة التي تحتوي على ملف تعريف ProPhotoRGB مضمن تبدو مطابقة لصور sRGB مشبعة قليلاً. وكما يمكن التأكد من خلال ملاحظة الرسم البياني، فإن متصفح جوجل كروم لا يدعم إدارة الألوان بشكل كامل، على الرغم من أن ملف تعريف ProPhotoRGB المضمن له تأثير ما. في النهاية، وبغض النظر عن وجود ملف التعريف أم لا، يفترض جوجل كروم أن الصورة موجودة في مساحة الشاشة الافتراضية. ولكن للأسف، لا يوجد تطابق دقيق للألوان مع جوجل كروم.

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

إدارة الألوان وجودة المخرجات.

Color Management & Quality Output

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.