ইমেজ ফিল্টার

আপনার ব্রাউজারেই ফটো ফিল্টার ও অ্যাডজাস্টমেন্ট প্রয়োগ করুন

এই ইমেজ ফিল্টার এডিটর সেকেন্ডে যেকোনো ফটোকে নতুনভাবে সাজাতে দেয় — একটি ছবি ফেলুন, একটি প্রিসেটে ক্লিক করুন বা স্লাইডার টানুন, এবং ফলাফলটি লাইভ আপডেট হতে দেখুন। এটি একটি ভিজ্যুয়াল এডিটরকে সত্যিকারের CSS ইমেজ ফিল্টারের সাথে জোড়া লাগায়, তাই একটি ডাউনলোডযোগ্য ছবি এবং তার পেছনের নিখুঁত filter: কোড দুটোই পান। ইনস্টল করার কিছু নেই, তৈরি করার অ্যাকাউন্ট নেই, কোনো ফাইল সাইজ সীমা নেই। যেকোনো ফটো ফরম্যাটে কাজ করে: JPG, PNG, WebP, GIF।

সাবস্ক্রিপশন প্রয়োজন এমন ভারী এডিটরের বিপরীতে, এখানে সবকিছু একটি HTML canvas-এ লোকালি চলে। আপনার ছবি কখনও কোনো সার্ভারে আপলোড হয় না, যা একটি ফটো শেয়ার করার আগে সংশোধন বা স্টাইলাইজ করার দ্রুত, প্রাইভেট উপায় করে তোলে। Fotor-এর ফ্রি টায়ার ডাউনলোডে ওয়াটারমার্ক যোগ করে। PicMonkey পূর্ণ ফিল্টার অ্যাক্সেসের জন্য মাসে $১২.৯৯-এর একটি পেইড প্ল্যান প্রয়োজন করে। UtiloKit-এ কোনো ওয়াটারমার্ক নেই এবং কোনো পেওয়াল নেই — পেজটি খুলুন এবং এডিটিং শুরু করুন।

CSS ফিল্টার অ্যাডজাস্টমেন্টের সম্পূর্ণ সেট

নয়টি অ্যাডজাস্টমেন্ট সম্পূর্ণ CSS filter ফাংশন সেট কভার করে: brightness, contrast, saturation, grayscale, sepia, hue-rotate, invert, blur এবং opacity। Brightness, contrast ও saturation সবই ১০০%-এ কেন্দ্রীভূত তাই একটি ফটোকে বেশি না বাড়িয়েই সামান্য সমন্বয় করা সহজ, আর hue-rotate (0–৩৬০°) প্রতিটি রংকে কালার হুইলের চারপাশে সরিয়ে দেয় — প্রোডাক্ট ফটোর কালার-গ্রেডিং বা একটি ডিজাইন টুল স্পর্শ না করেই একটি সৃজনশীল টিন্টেড লুক তৈরি করার জন্য কাজে দেয়।

যেকোনো সংমিশ্রণ স্ট্যাক করুন এবং প্রিভিউ তাৎক্ষণিকভাবে তা প্রতিফলিত করে। যেকোনো বিন্দুতে পার্থক্য দেখতে আগে/পরে তুলনা হ্যান্ডেলটি টানুন। টুলটি আপনার কাজ করার সময় সঠিক CSS ডিক্লারেশন আপডেট হতে দেখায়, তাই শুধু স্লাইডার নিয়ে খেলেই শিখতে পারবেন কোন ফাংশন কোন প্রভাব তৈরি করে। অন্য কোনো ফ্রি ফিল্টার টুল লাইভ ইমেজ প্রিভিউ এবং লাইভ CSS কোড আউটপুট একসাথে দেয় না।

ইনস্টাগ্রাম-স্টাইল প্রিসেট, এক ক্লিক দূরে

প্রিসেট গ্যালারি স্লাইডার সংমিশ্রণকে নামাঙ্কিত লুকে রূপান্তরিত করে — Vivid, Warm, Cool, B&W, Noir, Vintage, Faded, Sepia এবং আরও অনেক কিছু। প্রতিটি থাম্বনেইল আপনার নিজের ছবিতে এফেক্ট প্রিভিউ করে, তাই প্রতিশ্রুতিবদ্ধ হওয়ার আগে সারিটি স্ক্যান করে একটি লুক বেছে নিতে পারেন। এগুলো সেই একই ধরনের ইনস্টাগ্রাম-স্টাইল ফিল্টার যার জন্য VSCO ও Lightroom মোবাইল সাবস্ক্রিপশন চার্জ করে, প্লেইন CSS ফিল্টার ফাংশন থেকে বিনামূল্যে পুনর্নির্মিত।

একটি প্রিসেট প্রয়োগ করতে ক্লিক করুন, তারপর নিজের মতো করে সাজাতে স্লাইডার দিয়ে ফাইন-টিউন করুন। আন্ডারলাইং CSS সবসময় দৃশ্যমান থাকে, তাই আপনি যদি একটি ডিজাইন সিস্টেম বানাচ্ছেন, নিখুঁত ভ্যালু কপি করে যেকোনো ওয়েব প্রজেক্টে লুকটি পুনরায় তৈরি করতে পারবেন। Vintage প্রিসেটকে আপনার নিজের নামাঙ্কিত স্টাইলে পরিণত করতে প্রায় ৩০ সেকেন্ড লাগে।

CSS ফিল্টার কোড কপি করুন — এবং যেকোনো জায়গায় ব্যবহার করুন

প্রতিটি অ্যাডজাস্টমেন্ট একটি লাইভ CSS ডিক্লারেশন প্রতিফলিত করে: filter: brightness(105%) contrast(115%) saturate(140%);। Copy CSS-এ চাপুন এবং সরাসরি একটি স্টাইলশিটে পেস্ট করুন। এটি img, video, div ব্যাকগ্রাউন্ড এবং SVG এলিমেন্টে কাজ করে — CSS filter প্রপার্টি সমর্থন করে এমন যেকোনো কিছুতে। ডিফল্ট ভ্যালু বাদ দেওয়া হয় তাই স্নিপেটটি মিনিমাল ও পঠনযোগ্য থাকে।

বেশিরভাগ CSS ফিল্টার জেনারেটর আপনাকে একটি জেনেরিক প্রিভিউ ইমেজ দেখায়। এটি আপনার নিজের আপলোড করা ফটোতে ফিল্টার প্রয়োগ করে যাতে প্রেক্ষাপটে ঠিক কেমন দেখাবে তা দেখতে পান। একটি মসৃণ হোভার অ্যানিমেশন পেতে transition: filter 0.3s; যোগ করুন। কোডটি প্রোডাকশন-রেডি: কোনো প্রিফিক্স দরকার নেই, ২০১৬ থেকে Chrome, Edge, Firefox, Safari এবং সব প্রধান মোবাইল ব্রাউজারে সমর্থিত।

ইমেজ ফিল্টার আসলে কীভাবে কাজ করে — এবং কেন আপলোডের দরকার নেই

একটি ইমেজ ফিল্টার একটি পিক্সেল ট্রান্সফর্ম। ব্রাউজারটি প্রতিটি পিক্সেল ঘুরে দেখে এবং তার RGB ভ্যালু পুনরায় লেখে: grayscale(100%) চ্যানেলের গড় করে প্রতিটিকে একটি একক ধূসরে সংকুচিত করে, sepia() টোনকে বাদামী-কমলার দিকে গরম করে, invert() ভ্যালুকে একটি নেগেটিভে ফ্লিপ করে, এবং blur() একটি Gaussian কার্নেল ব্যবহার করে প্রতিটি পিক্সেলকে তার প্রতিবেশীর সাথে গড় করে। এই গণিত GPU-তে ৬০fps-এ চালানোর মতো সস্তা, যে কারণে প্রিভিউটি তাৎক্ষণিক মনে হয়।

যেহেতু এর সবটাই আপনার নিজের ব্রাউজারের একটি HTML canvas-এ চলে, আপনার ফটো কখনও আপনার ডিভাইস ছেড়ে যায় না। LunaPI, Pixlr বা এমনকি Google Photos-এর মতো একটি সার্ভিসে একটি ছবি আপলোড করার মানে হলো আপনার ছবিটি প্রসেসিংয়ের জন্য একটি দূরবর্তী সার্ভারে বসে থাকা। এই টুলটি সেই ধাপটি সম্পূর্ণভাবে বাদ দেয় — সমন্বয়, প্রিভিউ এবং ডাউনলোড সবই লোকালি ঘটে। ব্যক্তিগত ফটো বা সংবেদনশীল ডকুমেন্ট নিয়ে কাজ করা যেকোনো ব্যক্তির জন্য, এটি একটি তাৎপর্যপূর্ণ পার্থক্য।

প্রতিযোগী তুলনা — ফ্রি ইমেজ ফিল্টার টুল

বেশ কিছু পরিচিত টুল অনলাইন ইমেজ ফিল্টার দেয়, প্রতিটির ট্রেড-অফ আছে। Fotor-এর প্রিসেট লাইব্রেরি শক্তিশালী কিন্তু ফ্রি প্ল্যানে পূর্ণ-কোয়ালিটি ডাউনলোড সীমাবদ্ধ করে এবং ওয়াটারমার্ক যোগ করে। PicMonkey-তে বেশিরভাগ ফিল্টার অ্যাক্সেস করতে মাসে $১২.৯৯ সাবস্ক্রিপশন প্রয়োজন এবং সবসময় সাইন-ইন প্রয়োজন। Pixlr E একটি পূর্ণ ফটো এডিটর যা ফিল্টার ভালোভাবে করে, কিন্তু আপনার ছবি তাদের সার্ভারে আপলোড করে। Canva-তে তার ইমেজ এডিটরে ফিল্টার অন্তর্ভুক্ত কিন্তু একটি অ্যাকাউন্টও প্রয়োজন এবং Canva-এর ক্লাউডে ফাইল সংরক্ষণ করে।

UtiloKit Image Filters এসবের কিছুই করে না। আপলোড নেই, অ্যাকাউন্ট নেই, ওয়াটারমার্ক নেই, দৈনিক সীমা নেই। আপনি CSS কোড আউটপুটও পান — এই টুলগুলোর কোনোটিই যা দেয় না — যা এটিকে একমাত্র ফ্রি টুল করে তোলে যা ফটো এডিট করা ডিজাইনার এবং কোডে ভিজ্যুয়াল স্টাইল মেলানো ডেভেলপার উভয়ের জন্যই সমানভাবে ভালো কাজ করে।

ইমেজ ফিল্টারের পেছনের গণিত: পিক্সেল অপারেশন ও কনভোলিউশন কার্নেল

পিক্সেল স্তরে, প্রতিটি ইমেজ ফিল্টার একটি গাণিতিক ফাংশন যা প্রতিটি পিক্সেলের লাল, সবুজ ও নীল চ্যানেলে স্বাধীনভাবে প্রয়োগ হয়। Brightness সবচেয়ে সরল: প্রতিটি চ্যানেল ভ্যালুতে একটি ধ্রুবক যোগ করুন (0–255 রেঞ্জে ক্ল্যাম্প করা), সব রংকে সমানভাবে হালকা বা গাঢ় করে। Contrast ১২৮-এর মিডপয়েন্ট থেকে প্রতিটি চ্যানেলের বিচ্যুতি গুণ করে — ১২৮-এর ওপরের ভ্যালু আরও উঁচুতে ঠেলে দেওয়া হয়, নিচের ভ্যালু আরও নিচে — যা টোনগুলোকে ছড়িয়ে দেয় এবং প্রান্তগুলোকে আরও স্পষ্ট করে তোলে। Invert আরও সহজ: প্রতিটি চ্যানেল ভ্যালুকে ২৫৫ থেকে বিয়োগ করুন, যা ছবিকে একটি ফটোগ্রাফিক নেগেটিভে ফ্লিপ করে।

ব্লার, শার্পেন এবং এজ-ডিটেকশন ফিল্টার ভিন্নভাবে কাজ করে, কনভোলিউশন নামক একটি প্রক্রিয়ার মাধ্যমে। একটি ছোট ম্যাট্রিক্স — সাধারণত ৩×৩ বা ৫×৫ পিক্সেল — যাকে কার্নেল বলা হয়, ছবির ওপর একবারে একটি পিক্সেল করে স্লাইড করে। প্রতিটি অবস্থানে, কার্নেল ভ্যালুগুলো সংশ্লিষ্ট প্রতিবেশী পিক্সেল ভ্যালুর সাথে গুণ করা হয় এবং যোগফল দিয়ে আউটপুট পিক্সেল তৈরি হয়। একটি Gaussian ব্লার কার্নেল কেন্দ্রীয় পিক্সেলকে প্রান্তের পিক্সেলের চেয়ে বেশি ওজন দেয়, একটি বেল-কার্ভ বিতরণ অনুসরণ করে; এটি সাধারণ বক্স ব্লারের বাক্সাকার আর্টিফ্যাক্ট ছাড়াই বৈশিষ্ট্যপূর্ণ মসৃণ ব্লার তৈরি করে।

কনভোলিউশন বোঝা এটাও ব্যাখ্যা করে কেন একটি বড় ব্লার রেডিয়াস গণনাগতভাবে ভারী একটি ছোটটির চেয়ে। ২০px রেডিয়াসের একটি Gaussian ব্লারে একটি ৪১×৪১ কার্নেল প্রয়োজন — প্রতি পিক্সেলে ৯-এর বদলে ১,৬৮১টি গুণ। আধুনিক ব্রাউজার রেন্ডারিং ইঞ্জিন 2D Gaussian-কে দুটি 1D পাসে (অনুভূমিক তারপর উলম্ব) ভেঙে এটি অপ্টিমাইজ করে, যা প্রতি পিক্সেলে খরচ n² থেকে 2n অপারেশনে কমিয়ে দেয়।

ফটোগ্রাফি ফিল্টার এবং তাদের ডিজিটাল প্রতিরূপ: সেপিয়া, গ্রেস্কেল এবং ফিল্ম সিমুলেশন

সেপিয়া টোন এর নাম নিয়েছে Sepia officinalis, সাধারণ কাটলফিশ থেকে, যার কালি ১৯শ শতাব্দীর ফটোগ্রাফিতে একটি বাদামী পিগমেন্ট হিসেবে ব্যবহৃত হতো। প্রথমদিকের ফটোগ্রাফিক প্রিন্ট সময়ের সাথে স্বাভাবিকভাবেই একটি উষ্ণ বাদামী রঙে জারিত হয়ে যেত; ফটোগ্রাফাররা সিলভার ইমেজ স্থিতিশীল করতে এবং সেই বয়সের চেহারা প্রতিলিপি করতে ইচ্ছাকৃতভাবে সেপিয়া কালি দিয়ে প্রিন্ট টোন করা শুরু করেন। ডিজিটালভাবে, সেপিয়া দুটি ধাপে অর্জিত হয়: প্রথমে ছবিটিকে গ্রেস্কেলে রূপান্তর করুন, তারপর নীল চ্যানেল দাবিয়ে লাল ও সবুজ চ্যানেল বাড়িয়ে একটি উষ্ণ টিন্ট প্রয়োগ করুন।

গ্রেস্কেল রূপান্তর সহজ মনে হলেও বেছে নেওয়া পদ্ধতি নির্ধারণ করে ফলাফল কতটা স্বাভাবিক দেখায়। সরল গড় পদ্ধতি — (R + G + B) / 3 — তিনটি চ্যানেলকেই সমান গুরুত্বপূর্ণ ধরে, কিন্তু মানুষের দৃষ্টিব্যবস্থা লাল বা নীলের চেয়ে সবুজের প্রতি অনেক বেশি সংবেদনশীল। CSS এবং বেশিরভাগ পেশাদার সফটওয়্যার ব্যবহৃত luminosity-weighted সূত্র হলো 0.299R + 0.587G + 0.114B, দশকের উপলব্ধিগত গবেষণা থেকে নেওয়া; এটি রঙকে কাঁচা চ্যানেল তীব্রতার বদলে অনুভূত উজ্জ্বলতার সাথে ম্যাপ করে।

ফিল্ম গ্রেইন সিমুলেশন এবং ক্রস-প্রসেসিং অ্যানালগ ফটোগ্রাফিতে শিকড় থাকা আরও দুটি এফেক্ট। ফিল্ম গ্রেইন তৈরি হয় কারণ ফটোগ্রাফিক এমালশন বিভিন্ন আকারের সিলভার হ্যালাইড ক্রিস্টাল দিয়ে তৈরি; বিভিন্ন ফিল্ম স্টক — Kodak Portra, Fujifilm Provia, Ilford HP5 — এর স্পষ্টভাবে ভিন্ন গ্রেইন গঠন থাকে। ক্রস-প্রসেসিং, ১৯৯০-এর দশকের ফ্যাশন ও মিউজিক ফটোগ্রাফিতে জনপ্রিয়, স্লাইড ফিল্ম (E-6 কেমিস্ট্রি) নেগেটিভ ফিল্ম কেমিক্যালে (C-41) ডেভেলপ করার লুক অনুকরণ করে।

চলচ্চিত্র ও ভিডিওতে কালার গ্রেডিং: LUT, টিল-অ্যান্ড-অরেঞ্জ এবং ACES

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

২০০০ ও ২০১০ দশকের প্রভাবশালী হলিউড কালার গ্রেড — টিল-অ্যান্ড-অরেঞ্জ লুক — কাজ করে কারণ এই দুটো রং কালার হুইলে সরাসরি একে অপরের বিপরীতে থাকে, একটি পরিপূরক কনট্রাস্ট তৈরি করে। মানুষের ত্বকের রং স্বাভাবিকভাবেই কমলা-অ্যাম্বার পরিসীমায় পড়ে যেকোনো জাতিসত্তা নির্বিশেষে, তাই একজন কালারিস্ট ছবিটিকে টিল ছায়া ও শীতল মিডটোনের দিকে ঠেলে দিতে পারেন অথচ ত্বককে তুলনামূলকভাবে উষ্ণ রেখে দিতে পারেন।

LUT (Look-Up Table) কালার গ্রেড প্রয়োগ ও শেয়ার করার স্ট্যান্ডার্ড ফরম্যাট। একটি 3D LUT হলো একটি ত্রিমাত্রিক গ্রিড যা প্রতিটি সম্ভাব্য ইনপুট RGB ট্রিপলেটকে একটি আউটপুট RGB ট্রিপলেটে ম্যাপ করে; সফটওয়্যার প্রতিটি পিক্সেলের জন্য একটি সূত্র হিসাব করার বদলে শুধু আউটপুট ভ্যালু লুক-আপ করে। DaVinci Resolve, Adobe Premiere Pro এবং Final Cut Pro সবই .cube বা .3dl ফরম্যাটে তৃতীয়-পক্ষের LUT ইম্পোর্ট সমর্থন করে, পুরো প্রোডাকশন জুড়ে ধারাবাহিক গ্রেড সক্ষম করে।

ব্রাউজারে CSS ফিল্টার: GPU অ্যাক্সেলারেশন, backdrop-filter এবং গ্লাসমরফিজম

CSS filter প্রপার্টি ওয়েব ডেভেলপারদের সরাসরি একটি স্টাইলশিটে ওপরে আলোচিত একই পিক্সেল-স্তরের ট্রান্সফরমেশনে অ্যাক্সেস দেয়। এর নয়টি ফাংশন — blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate() এবং sepia() — যেকোনো HTML এলিমেন্টে যেকোনো সংমিশ্রণে চেইন করা যায়: ছবি, ভিডিও, div ব্যাকগ্রাউন্ড, SVG, এমনকি iframe। সহোদর প্রপার্টি backdrop-filter একই ফাংশন এলিমেন্টের ওপর নয় বরং তার পেছনে যা রেন্ডার করা হচ্ছে তাতে প্রয়োগ করে, একটি ফ্রস্টেড-গ্লাস এফেক্ট সক্ষম করে।

রেন্ডারিং পারফরম্যান্সের দৃষ্টিকোণ থেকে, CSS ফিল্টার একইসাথে একটি উপহার এবং একটি ফাঁদ। ব্রাউজার যখন একটি এলিমেন্টে filter বা backdrop-filter খুঁজে পায়, তখন এটি সেই এলিমেন্টকে তার নিজস্ব GPU কম্পোজিটর লেয়ারে প্রমোট করে এবং CPU পেইন্টিং পাইপলাইন বাইপাস করে সম্পূর্ণভাবে GPU-তে এফেক্ট প্রয়োগ করে। ফাঁদটি হলো backdrop-filter: blur(): ব্রাউজারকে প্রথমে এলিমেন্টের পেছনের সবকিছু রেন্ডার করতে হয়, তারপর সেই রেন্ডার একটি অস্থায়ী বাফারে কপি করতে হয়, তারপর সেটি ব্লার করতে হয়, তারপর ফলাফল কম্পোজিট করতে হয় — একটি বড় ব্লার করা ব্যাকড্রপ একটি সাধারণ এলিমেন্ট-লেভেল ব্লারের চেয়ে উল্লেখযোগ্যভাবে বেশি ব্যয়বহুল হতে পারে।

গ্লাসমরফিজম ডিজাইন ট্রেন্ড — উজ্জ্বল গ্রেডিয়েন্ট বা ফটোগ্রাফিক ব্যাকগ্রাউন্ডের ওপর ভাসমান ফ্রস্টেড গ্লাস প্যানেল — Apple-এর macOS Big Sur ও iOS 14 ২০২০ সালে জনপ্রিয় করে এবং দ্রুত UI ডিজাইনে ছড়িয়ে পড়ে। এর ইমপ্লিমেন্টেশন সম্পূর্ণভাবে backdrop-filter: blur(20px)-এর ওপর নির্ভর করে একটি আধা-স্বচ্ছ ব্যাকগ্রাউন্ডের সাথে মিলিয়ে: background: rgba(255,255,255,0.15)। ট্রেন্ডের শীর্ষ পার হয়ে গেলেও, অন্তর্নিহিত টেকনিকটি মডাল, টুলটিপ, নেভিগেশন বার এবং যেকোনো UI এলিমেন্টের জন্য উপযোগী থেকে যায় যেটির একটি সমৃদ্ধ ব্যাকগ্রাউন্ডে প্রেক্ষাপটগতভাবে এমবেডেড অনুভব করা প্রয়োজন।