Online Tool Store
ব্লারহ্যাশ জেনারেটর
ছবিগুলি BlurHash স্ট্রিংয়ে এনকোড করুন দ্রুত লোডিংয়ের জন্য। কম্পোনেন্ট সামঞ্জস্য করুন, হ্যাশ ডিকোড করুন এবং রঙের ত্রুটি যাচাই করুন। ব্রাউজারে সম্পূর্ণরূপে চলে।
এই টুলটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে। আপনার ফাইল কখনও সার্ভারে আপলোড করা হয় না।
উৎস
ডিকোড করা প্লেসহোল্ডার
শুধুমাত্র ডিকোড করার সময়; হ্যাশে সংরক্ষিত হয় না।
একটি BlurHash হলো একটি স্ট্রিং যা আপনি একটি ছবির পাশে সংরক্ষণ করেন এবং রেন্ডার করার সময় একটি ঝাপসা প্লেসহোল্ডারে প্রসারিত করেন — যাতে আসল ছবি আসার আগেই লেআউট অর্থপূর্ণ কিছু দেখাতে পারে, দ্বিতীয় কোনো নেটওয়ার্ক অনুরোধ ছাড়াই। এটি প্রদর্শনের জন্য আপনার ক্লায়েন্টের একটি ডিকোডার প্রয়োজন; ডেটা ইউআরআই বোতামটি পরিবর্তে আপনাকে একটি তৈরি ছবি দেয়, যার কোনো ডিকোডার প্রয়োজন হয় না কিন্তু আকারে বড়। কিছুই আপলোড হয় না।
এটি কীভাবে ব্যবহার করবেন
- একটি ছবি ড্রপ করুন, একটি ফাইল বেছে নিন, অথবা Ctrl+V দিয়ে পেস্ট করুন — ফলাফলের ধরন দেখার জন্য একটি নমুনা আগে থেকেই এনকোড করা আছে।
- পরিবর্তনের বিশেষ কারণ না থাকলে ডিটেইল 4 × 3-এ রাখুন।
- হ্যাশটি কপি করে ছবির মতো একই সারি বা রেকর্ডে সংরক্ষণ করুন।
- আপনার ক্লায়েন্টে এটি ডিকোড করুন, অথবা ডিকোডার যোগ না করতে চাইলে ডেটা ইউআরআই বা ডাউনলোড বোতাম ব্যবহার করুন।
আপনি আসলে কী পাচ্ছেন
কম্পোনেন্ট সংখ্যা দ্বারা দৈর্ঘ্য নির্দিষ্ট থাকে — হেডারে চারটি অক্ষর এবং প্রতিটি কম্পোনেন্টের জন্য দুটি করে। এটি এনকোড করার আগেই আকারকে সম্পূর্ণ পূর্বানুমানযোগ্য করে তোলে:
1 × 1 ৬টি অক্ষর সমান গড় রঙ 3 × 3 ২২টি অক্ষর আনুমানিক উজ্জ্বল ও অন্ধকার অংশ 4 × 3 ২৮টি অক্ষর সাধারণ ডিফল্ট 9 × 9 ১৬৬টি অক্ষর ক্রমহ্রাসমান সুবিধা
আটাশ বাইট এতটাই ছোট যে এটি আপনার ছবির তালিকা দেখানো JSON প্রতিক্রিয়ায় বিনামূল্যে অন্তর্ভুক্ত করা যায় — বেশিরভাগ একক HTTP হেডারের চেয়েও ছোট। ফরম্যাটটির পুরো উদ্দেশ্যই এটি: প্লেসহোল্ডারটি মেটাডেটার সাথেই, আপনি আগে থেকেই যে অনুরোধটি করছিলেন তার মধ্যেই আসে, তাই পৃষ্ঠাটি কিছু দেখানোর আগে দ্বিতীয় কোনো রাউন্ড ট্রিপের প্রয়োজন হয় না। রূপান্তরটি কাঁচা sRGB বাইটের পরিবর্তে লিনিয়ার আলোতেও চলে: গামা-এনকোড করা মানগুলোর সরাসরি গড় নিলে ঠিক সেই ঘোলাটে, অতিরিক্ত অন্ধকার ঝাপসা ভাব তৈরি হয় যা কখনও কখনও দেখা যায়। এই প্রভাবটি একটি কম্পোনেন্টে সবচেয়ে সহজে দেখা যায়, যেখানে হ্যাশটি শুধুই একটি গড় — একটি পরীক্ষামূলক গ্রেডিয়েন্ট যার sRGB বাইট গড় rgb(130, 110, 95), তা 1 × 1-এ ডিকোড হয়ে rgb(147, 116, 103) হয়, এবং লিনিয়ার ফলাফলটিই পদার্থবিজ্ঞানগতভাবে সঠিক — এটি সেই মানের সাথে মেলে যা আপনি ছবির দিকে তাক করা একটি ক্যামেরা ফোকাসের বাইরে রাখলে পরিমাপ করতেন। বেশি কম্পোনেন্টে সামগ্রিক গড়ের ব্যবধান ২৫৫-এর মধ্যে প্রায় এক বা দুই স্তরে নেমে আসে।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
আমি কি হ্যাশটি সরাসরি একটি <img> ট্যাগে ব্যবহার করতে পারি?
না, এবং এটিই মানুষকে সবচেয়ে বেশি অবাক করে। একটি BlurHash কোনো ছবির ফরম্যাট নয় — এটি ২০ থেকে ৩০টি অক্ষর যা একটি ডিকোডার পিক্সেলে রূপান্তরিত করে। এটি প্রদর্শনের জন্য আপনার অ্যাপে একটি ডিকোডার প্রয়োজন। যদি আপনি এমন কিছু চান যা কোনো ডিকোডার ছাড়াই কাজ করে, তাহলে পরিবর্তে ডেটা ইউআরআই বা ডাউনলোড-অ্যাজ-পিএনজি বোতাম ব্যবহার করুন — দুটিই আপনাকে ঝাপসা প্লেসহোল্ডারের একটি প্রকৃত PNG দেয়, যা বড় কিন্তু সরাসরি একটি src অ্যাট্রিবিউট বা ডিস্কের একটি ফাইলে বসে যায়।
আমার কতগুলো কম্পোনেন্ট ব্যবহার করা উচিত?
চারটি আড়াআড়ি এবং তিনটি লম্বালম্বি হলো সাধারণ ডিফল্ট এবং এই টুলটি এটি দিয়েই শুরু হয়। এর কম হলে ফ্রেমে জিনিসগুলো কোথায় আছে তার বোধ হারিয়ে যায়; এর বেশি হলে হ্যাশ দ্রুত বড় হয় কিন্তু দৃশ্যমান লাভ খুবই কম হয়, কারণ ফলাফলটি যেকোনোভাবেই ঝাপসা হবে। নয় বাই নয় হলো ১৬৬টি অক্ষর — যে প্লেসহোল্ডারের দিকে কেউ ভালো করে তাকায় না তার জন্য 4×3-এর ছয়গুণ দৈর্ঘ্য।
একটি 1×1 হ্যাশ কেন আমার ছবির চেয়ে উজ্জ্বল দেখায়?
কারণ গড়টি লিনিয়ার আলোতে গণনা করা হয়, sRGB বাইটে নয়। একটি পরীক্ষামূলক গ্রেডিয়েন্ট এনকোড করলে যার sRGB চ্যানেলের গড় rgb(130, 110, 95), তা এমন একটি 1×1 হ্যাশ দেয় যা rgb(147, 116, 103)-এ ডিকোড হয়। এটি কোনো বাগ নয় — গামা-এনকোড করা মানগুলোর সরাসরি গড় নেওয়াই ভুল, এবং এই কারণেই সরলভাবে গড় করা থাম্বনেইলগুলো প্রায়ই ঘোলাটে দেখায়। লিনিয়ার গড়টিই উপলব্ধিগতভাবে সঠিক।
কনট্রাস্ট স্লাইডার কি হ্যাশ পরিবর্তন করে?
না। পাঞ্চ ডিকোড করার সময় প্রয়োগ করা হয়, তাই আপনি যে মানই সেট করুন না কেন স্ট্রিংটি অভিন্ন থাকে। এটি এখানে অন্তর্ভুক্ত করা হয়েছে কারণ বেশিরভাগ ডিকোডার লাইব্রেরি একই প্যারামিটার প্রকাশ করে, এবং নিজের কোডে একটি মান বাছাই করার আগে এর প্রভাব দেখাটা কার্যকর।
একটি BlurHash কি স্বচ্ছতা বজায় রাখে?
না। ফরম্যাটটিতে কোনো আলফা চ্যানেল নেই, তাই একটি স্বচ্ছ PNG এমনভাবে এনকোড হয় যেন এটি ক্যানভাসে যা ছিল তার উপর সমতল করে দেওয়া হয়েছে। প্রকৃত স্বচ্ছতাযুক্ত ছবির জন্য সাধারণত ঝাপসার চেয়ে একটি প্লেসহোল্ডার রঙই ভালো পছন্দ।
আমার ছবি কি আপলোড করা হয়?
না। এটি পৃষ্ঠাতেই ডিকোড, ডাউনস্যাম্পল এবং রূপান্তরিত হয়। এখানকার এনকোডার এবং ডিকোডার উভয়ই আপনার ব্রাউজারে চলা নিছক গণিত, এবং কোনো সময়েই কোনো অনুরোধ পাঠানো হয় না।
স্পিনারের বদলে একটি ঝাপসা প্লেসহোল্ডার কেন দেখানো হয়?
একটি প্লেসহোল্ডার যা ছবির রঙ এবং মোটামুটি গঠনের সাথে মেলে তা দুটি উপকারী কাজ করে। এটি সঠিক জায়গাটি সংরক্ষণ করে রাখে, যাতে আসল ছবি এলে কিছু সরে না যায় — যা ছবি-ভারী পৃষ্ঠাগুলোতে লেআউট-শিফট অভিযোগের প্রধান কারণ। এবং এটি চোখকে সাথে সাথে বিশ্বাসযোগ্য কিছু দেয়, যার ফলে একটি ধূসর বাক্সের বিপরীতে সমান সময় অপেক্ষা করার চেয়ে লোডিং কম সময়ের মনে হয়, কারণ অপেক্ষা করার মতো কিছুর পরিবর্তে দেখার মতো কিছু থাকে।
আমরা কীভাবে তুলনায় দাঁড়াই
| বৈশিষ্ট্য | Online Tool Store | কমান্ড-লাইন এনকোডার | ইমেজ CDN প্লেসহোল্ডার |
|---|---|---|---|
| ছবি কখনও আপনার ডিভাইস ছেড়ে যায় না | ✓ | ✓ | ✗ |
| ইনস্টল করার কিছু নেই | ✓ | ✗ | ✓ |
| যাচাই করতে একটি বিদ্যমান হ্যাশ ডিকোড করে | ✓ | আলাদা কমান্ড | ✗ |
| রাউন্ড-ট্রিপ রঙের ত্রুটি দেখায় | ✓ | ✗ | ✗ |
| একটি ডিকোডার-মুক্ত ডেটা ইউআরআইও এক্সপোর্ট করে | ✓ | অতিরিক্ত ধাপ সহ | ✓ |
| ড্র্যাগ, ব্রাউজ, বা ক্লিপবোর্ড পেস্ট দিয়ে ছবি লোড করে | ✓ | শুধু ফাইল পাথ | শুধু ড্র্যাগ বা ব্রাউজ |
| এক ধাপে একটি সম্পূর্ণ লাইব্রেরি এনকোড করে | ✗ | ✓ | ✓ |
| আপলোডে স্বয়ংক্রিয়ভাবে চলে | ✗ | ✓ | ✓ |
ফরম্যাটটি বুঝতে, কম্পোনেন্ট সংখ্যা টিউন করতে এবং কয়েকটি ছবির জন্য হ্যাশ তৈরি করতে এটি ব্যবহার করুন। আপনি যখন প্রতিটি আপলোড এনকোড করা শুরু করবেন, তখন সেটি আপনার পাইপলাইনে থাকা উচিত — একটি বিল্ড ধাপ বা আপলোড হ্যান্ডলারে — একটি ব্রাউজার ট্যাবে নয়। এই টুলটি হলো সেই কোড লেখার আগে আপনি কী চান তা বের করার জায়গা।