আপলোডের পর ছবি কেন ফ্যাকাশে দেখায়

আপনি একটি প্রোডাক্ট শট এডিট করলেন, লাল রংটা আসল সোয়েটারের সাথে হুবহু মিলে গেল, তারপর সেটা আপনার স্টোরে আপলোড করলেন — আর লাল রংটা ফিরে এল ইটের মতো। সবুজ রংগুলো হয়ে গেল জলপাই রঙা। একই স্ক্রিনে অরিজিনাল ফাইলটা খুলে দেখুন: তখনও একদম নিখুঁত।

এটা কম্প্রেশনের সমস্যা নয়, আর প্ল্যাটফর্মও আপনার ছবি "নষ্ট" করছে না। সাধারণ কারণটা হলো কালার প্রোফাইল অমিল: ফাইলটা তার রংগুলো এক ভাষায় বর্ণনা করে, আর পেজ সেই সংখ্যাগুলো পড়ে অন্য এক ভাষায়।

একই সংখ্যা থেকে কেন দুই রকম রং তৈরি হয়

একটা পিক্সেল আসলে তিনটে সংখ্যা, আর 200, 40, 40 একটা নির্দিষ্ট লাল রং তখনই হয়ে ওঠে, যখন আপনি জানেন কোন কালার স্পেস দিয়ে সেটা মাপা হয়েছে। Display P3, sRGB-এর তুলনায় লাল প্রাইমারিকে আরও বাইরে ঠেলে দেয় (x 0.68 বনাম 0.64), তাই একই তিনটি সংখ্যা আরও গাঢ় লাল বোঝায়। Adobe RGB (1998) sRGB-এর ঠিক একই লাল আর নীল প্রাইমারি রাখে, বদলে সবুজটাকে টেনে বাড়ায়, তাই এর বাড়তি রেঞ্জ থাকে সবুজ আর সায়ানে। যেভাবেই হোক, sRGB ধরে নেওয়া কোনো ব্রাউজারের কাছে সংখ্যাগুলোর মানে হয়ে যায় আলাদা কিছু।

প্রোফাইল হলো সেই নোট, যা বলে দেয় কোন স্কেল ব্যবহার হয়েছে, আর সেটা হারিয়ে গেলে ওয়েব কড়াভাবে ডিফল্ট ধরে নেয়। CSS Color Module Level 4-তে স্পষ্ট বলা আছে: সামঞ্জস্যের জন্য, HTML-এ উল্লেখ করা রং এবং ট্যাগবিহীন ছবিগুলোকে sRGB কালার স্পেসে আছে বলে ধরে নিতে হবে, যদি না অন্যভাবে উল্লেখ থাকে। আপনার ট্যাগবিহীন আপলোড কখনও অন্যভাবে উল্লেখ করে না, তাই ধরে নেওয়া হয় sRGB।

তাই আপনার ফাইল যদি Adobe RGB বা Display P3-তে এক্সপোর্ট হয় আর প্রোফাইলটা হারিয়ে যায় — কোনো পাইপলাইন যা রি-এনকোড করে, বা কোনো কনভার্টার যা মেটাডেটা মুছে দেয় — তাহলে সেই ওয়াইড-গ্যামাট সংখ্যাগুলো sRGB হিসেবে পড়া হয়। একটা সরু ধারণার মধ্যে চেপে গিয়ে সেগুলো ডিস্যাচুরেটেড হয়ে বেরিয়ে আসে — এটাই আপনার সেই ফ্যাকাশে লুক। কোন রংগুলো ক্ষতিগ্রস্ত হয় সেটা নির্ভর করে সোর্সের ওপর: sRGB হিসেবে ভুল পড়া একটা Adobe RGB ফাইল সবুজ আর সায়ানে তার জোর হারায়, আর একটা Display P3 ফাইল স্যাচুরেটেড লালও হারায়। নিউট্রাল রং প্রায় নড়েই না: ধূসর প্যাকশটে কিছুই বোঝা যায় না, কিন্তু কোরাল রঙের সুইমস্যুটে বিপর্যয়।

এটা ফাইলের সমস্যা, নাকি স্ক্রিনের — নিশ্চিত করুন

অরিজিনাল আর আপলোড করা ছবিটা একই ব্রাউজার উইন্ডোতে পাশাপাশি রাখুন।

• আপনার এডিটরে ঠিক, কিন্তু ব্রাউজারে ফ্যাকাশে: প্রোফাইলের সমস্যা।
• ব্রাউজারে একই রকম, কিন্তু আপনার এডিটরের থেকে আলাদা: আপনার এডিটর এমন একটা ওয়ার্কিং স্পেসে প্রিভিউ দেখাচ্ছে, যেটা ব্রাউজার এড়িয়ে যায়।
• শুধু আপনার ফোনে বা কোনো সহকর্মীর ল্যাপটপে ভুল দেখাচ্ছে: এটা ডিসপ্লের পার্থক্য, ফাইলের সমস্যা নয়।

এরপর অরিজিনাল ফাইলটা একটা ব্রাউজার ট্যাবে টেনে আনুন — ব্রাউজার এমবেড করা প্রোফাইল মেনে চলে। লোকাল ফাইলটা ঠিক থাকলে আর আপলোডেরটা ঠিক না থাকলে, বুঝবেন আপলোডের পথেই ট্যাগটা বাদ পড়ে গেছে।

ফাইলে কোন প্রোফাইল আছে জেনে নিন

• macOS: Preview-তে ফাইলটা খুলুন আর টুলবারের Info বাটনে ক্লিক করুন (অথবা Command-I চাপুন), তারপর More info ট্যাবে দেখুন, যেখানে ছবির কালার প্রোফাইল তালিকাভুক্ত থাকে।
• Photoshop: ডকুমেন্ট স্ট্যাটাস বারের অ্যারোতে ক্লিক করে Document Profile বেছে নিন।
• Lightroom: এক্সপোর্ট ডায়ালগের Colour Space ড্রপডাউনে যা দেখানো থাকে, সেটাই আপনি আসলে পাঠিয়েছেন।
• যেকোনো ফাইল, যেকোনো প্ল্যাটফর্ম: ExifTool সেটা দেখিয়ে দেয় — exiftool -ProfileDescription photo.jpg।

ওয়েবের জন্য, sRGB ছাড়া অন্য যেকোনো কিছুই সন্দেহের তালিকায় পড়ে। সাম্প্রতিক আইফোনগুলো ওয়াইড কালারে ছবি তোলে আর সেই অনুযায়ী ফাইলে ট্যাগ বসায় — Apple তাদের ক্যামেরা স্পেকে "ছবি ও Live Photos-এর জন্য ওয়াইড কালার ক্যাপচার" উল্লেখ করে রেখেছে। কিছু অ্যান্ড্রয়েড ফোনেও ওয়াইড-গ্যামাট ক্যাপচারের অপশন থাকে, তাই ফাইলটা যাচাই করে নিন।

sRGB-তে রূপান্তর করুন — স্ট্রিপ বা অ্যাসাইন নয়

শুনতে প্রায় একরকম মনে হলেও তিনটে অপারেশন একদম আলাদা কাজ করে।

• Strip (মুছে ফেলা) লেবেলটা সরিয়ে দেয় আর সংখ্যাগুলো অপরিবর্তিত রাখে: ওয়াইড-গ্যামাট ডেটা এখন নিশ্চিতভাবে sRGB হিসেবে পড়া হবে, যা পরিস্থিতি আরও খারাপ করে।
• Assign (পুনরায় লেবেল করা) পুনর্গণনা না করেই নতুন লেবেল বসায়, যা চেহারা বদলে দেয়, সাধারণত ভুল কিছুতে।
• Convert (রূপান্তর) প্রতিটা পিক্সেল নতুন করে গণনা করে, যাতে ছোট স্পেসটা যতটা সম্ভব রংকে কাছাকাছি রাখতে পারে, তারপর sRGB ট্যাগ জুড়ে দেয়।

আপনার যেটা দরকার সেটা হলো Convert: Photoshop-এর Edit › Convert to Profile, অথবা Lightroom-এর এক্সপোর্টে Colour Space sRGB-তে সেট করা। ধরে নিন, আপনার সবচেয়ে স্যাচুরেটেড (উজ্জ্বল) রংগুলো সামান্য বদলে যাবে।

উল্টো ঘটনা: স্ক্রিনশট বেশি উজ্জ্বল দেখায়

একই প্রক্রিয়া, শুধু উল্টো দিকে। ওয়াইড-গ্যামাট ডিসপ্লে থেকে নেওয়া স্ক্রিনশট সেই ডিসপ্লের স্পেসেই মান রেকর্ড করে। macOS-এ তোলা স্ক্রিনশট সাধারণত ডিসপ্লের প্রোফাইল জুড়ে দিয়েই সেভ হয়; অন্য ক্যাপচার টুল হয়তো কোনো প্রোফাইল জোড়েই না। sRGB হিসেবে ফিরে পড়া হলে, একই সংখ্যাগুলো আপনি যা দেখেছিলেন তার চেয়ে বেশি স্যাচুরেটেড দেখায়: নিয়ন সবুজ, রোদে পোড়া ত্বক। সমাধানও একই।

ব্যাকগ্রাউন্ড বদলানোর সময় এটা কেন গুরুত্বপূর্ণ

এখানে অমিল প্রোফাইলের প্রভাবটা আর সূক্ষ্ম থাকে না। remover.bg-এ আপনার কাটআউটটা ব্র্যান্ড কালারের ওপর বসান, তারপর সেই ছবিটা একটা পেজে একই hex-এর CSS ব্লকের পাশে রাখুন: CSS-এর রংটা রেন্ডার হয় sRGB হিসেবে।

ছবিতে যদি ভিন্ন ট্যাগ থাকে, তাহলে একই রঙের দুটো শেড পাশাপাশি বসে থাকে আর কখনও মেলে না। আপলোড করার আগে sRGB-তে রূপান্তর করলে উৎস থেকেই এই দ্বিধা দূর হয়ে যায়।

খাঁটি সাদা রং রূপান্তরের পরেও অপরিবর্তিত থাকে, তাই শুধু প্রোফাইল অমিলের কারণে মার্কেটপ্লেসের সাদা-ব্যাকগ্রাউন্ড চেক ফেল করবে না — ক্ষতিগ্রস্ত হয় প্রোডাক্টের রংগুলো। আর ফরম্যাট বদলেও রক্ষা নেই: PNG, JPEG আর WebP — সবগুলোতেই প্রোফাইল থাকে, আর ট্যাগ হারিয়ে গেলে সবগুলোই ভুল পড়া হয়, এমনকি স্বচ্ছ কাটআউট-ও বাদ যায় না।

পরের আপলোডের আগে

আপনি আসলে যে প্রিসেট ব্যবহার করেন, তাতে একবার এক্সপোর্ট কালার স্পেস sRGB করে সেট করে দিন, তাহলে সমস্যাটা আর ফিরে আসবে না। এরপর একটা স্ক্রিনে একটা আপলোড অরিজিনালের সাথে মিলিয়ে দেখুন: রং ঠিক থাকলে বুঝবেন আপনার পাইপলাইন পরিষ্কার আছে।