🛠️

Whiz Tools

Build • Create • Innovate

বেস64 ইমেজ ডিকোডার এবং ভিউয়ার | বেস64 থেকে ইমেজে রূপান্তর করুন

বেস64-এ এনকোড করা ইমেজ স্ট্রিংগুলি তাত্ক্ষণিকভাবে ডিকোড এবং প্রিভিউ করুন। JPEG, PNG, GIF এবং অন্যান্য সাধারণ ফরম্যাট সমর্থন করে এবং অবৈধ ইনপুটের জন্য ত্রুটি পরিচালনা করে।

বেস64 ইমেজ ডিকোডার এবং ভিউয়ার

একটি বেস64-কোড করা ইমেজ স্ট্রিং পেস্ট করুন এবং এটি ডিকোড করে ইমেজটি দেখুন।

ইমেজ প্রিভিউ

দেখানোর জন্য কোন ইমেজ নেই। একটি বেস64 স্ট্রিং পেস্ট করুন যাতে এটি স্বয়ংক্রিয়ভাবে ডিকোড হয়।

JPEG, PNG, GIF এবং অন্যান্য সাধারণ ইমেজ ফরম্যাট সমর্থন করে।

নির্দেশনা

1. উপরের টেক্সট এরিয়াতে একটি বেস64-কোড করা ইমেজ স্ট্রিং পেস্ট করুন।

2. আপনি টাইপ করার সময় ইমেজটি স্বয়ংক্রিয়ভাবে ডিকোড হবে, অথবা 'ইমেজ ডিকোড করুন' বোতামে ক্লিক করুন।

3. ডিকোড করা ইমেজটি নিচের প্রিভিউ এলাকায় প্রদর্শিত হবে।

দ্রষ্টব্য: সেরা ফলাফলের জন্য স্ট্রিংটি 'data:image/' দিয়ে শুরু হওয়া উচিত, তবে এই টুলটি এই প্রিফিক্স ছাড়াও স্ট্রিংগুলি ডিকোড করার চেষ্টা করবে।

📚

ডকুমেন্টেশন

বেস64 চিত্র ডিকোডার এবং ভিউয়ার

পরিচিতি

বেস64 হল একটি বাইনারি-টু-টেক্সট এনকোডিং স্কিম যা বাইনারি ডেটাকে একটি ASCII স্ট্রিং ফরম্যাটে উপস্থাপন করে। এটি সাধারণত HTML, CSS, JavaScript, JSON এবং অন্যান্য টেক্সট-ভিত্তিক ফরম্যাটে চিত্রের ডেটা সরাসরি এম্বেড করার জন্য ব্যবহৃত হয় যেখানে বাইনারি ডেটা সরাসরি অন্তর্ভুক্ত করা যায় না। এই টুলটি আপনাকে বেস64-এনকোডেড চিত্র স্ট্রিংগুলি ডিকোড করতে এবং ফলস্বরূপ চিত্রগুলি আপনার ব্রাউজারে সরাসরি দেখতে দেয়।

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

আমাদের বেস64 চিত্র ডিকোডার টুলটি একটি সহজ ইন্টারফেস প্রদান করে যেখানে আপনি একটি বেস64-এনকোডেড চিত্র স্ট্রিং পেস্ট করতে পারেন এবং তাৎক্ষণিকভাবে ডিকোড করা চিত্রটি দেখতে পারেন। এটি JPEG, PNG, GIF, WebP এবং SVG সহ সমস্ত সাধারণ চিত্র ফরম্যাট সমর্থন করে এবং ডেটা URL ফরম্যাট (যার সাথে data:image/... প্রিফিক্স থাকে) এবং কাঁচা বেস64 স্ট্রিং উভয়কেই পরিচালনা করতে পারে।

প্রযুক্তিগত বিবরণ

বেস64 এনকোডিং ফরম্যাট

বেস64 এনকোডিং বাইনারি ডেটাকে 64টি ASCII অক্ষরে (A-Z, a-z, 0-9, +, এবং /) রূপান্তরিত করে, যেখানে = প্যাডিংয়ের জন্য ব্যবহৃত হয়। ওয়েবের চিত্রগুলির জন্য, বেস64 ডেটা সাধারণত একটি ডেটা URL হিসাবে নিম্নলিখিত কাঠামোতে ফরম্যাট করা হয়:

1data:[<media type>][;base64],<data>
2

উদাহরণস্বরূপ, একটি বেস64-এনকোডেড PNG চিত্রের মতো দেখতে হতে পারে:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

এই ফরম্যাটের উপাদানগুলি হল:

  • data: - URL স্কিম
  • image/png - ডেটার MIME টাইপ
  • ;base64 - এনকোডিং পদ্ধতি
  • , - হেডার এবং ডেটার মধ্যে একটি বিভাজক
  • প্রকৃত বেস64-এনকোডেড ডেটা

ডিকোডিং প্রক্রিয়া

একটি বেস64 চিত্র স্ট্রিং ডিকোড করার সময়, নিম্নলিখিত পদক্ষেপগুলি ঘটে:

  1. স্ট্রিংটি বিশ্লেষণ করা হয় যাতে এটি ডেটা URL প্রিফিক্স রয়েছে কিনা তা চিহ্নিত করা যায়
  2. যদি একটি প্রিফিক্স থাকে, তবে চিত্রের ফরম্যাট নির্ধারণ করতে MIME টাইপটি নিষ্কাশন করা হয়
  3. বেস64 ডেটার অংশটি আলাদা করা হয় এবং বাইনারি ডেটাতে ডিকোড করা হয়
  4. বাইনারি ডেটা একটি Blob বা একটি অবজেক্ট URL-এ রূপান্তরিত হয় যা একটি চিত্র হিসাবে প্রদর্শিত হতে পারে

যদি ইনপুটটিতে ডেটা URL প্রিফিক্স না থাকে, তবে ডিকোডারটি এটিকে কাঁচা বেস64 ডেটা হিসাবে বিবেচনা করতে চেষ্টা করে এবং ডিকোড করা বাইনারি হেডার থেকে চিত্রের টাইপ অনুমান করে বা PNG-এ ডিফল্ট করে।

সমর্থিত চিত্র ফরম্যাট

এই টুলটি সমস্ত সাধারণ ওয়েব চিত্র ফরম্যাট সমর্থন করে:

ফরম্যাটMIME টাইপসাধারণ ব্যবহার ক্ষেত্র
JPEGimage/jpegফটো, অনেক রঙের সাথে জটিল চিত্র
PNGimage/pngস্বচ্ছতা প্রয়োজন চিত্র, স্ক্রিনশট, গ্রাফিক্স
GIFimage/gifসাধারণ অ্যানিমেশন, সীমিত রঙের চিত্র
WebPimage/webpJPEG/PNG এর চেয়ে ভাল সংকোচনের আধুনিক ফরম্যাট
SVGimage/svg+xmlভেক্টর গ্রাফিক্স, স্কেলযোগ্য আইকন এবং চিত্র

ব্যবহার ক্ষেত্র

বেস64-এনকোডেড চিত্রগুলির ওয়েব ডেভেলপমেন্ট এবং এর বাইরের কয়েকটি ব্যবহারিক অ্যাপ্লিকেশন রয়েছে:

  1. HTML/CSS/JS-তে চিত্র এম্বেড করা: ছোট চিত্রগুলির জন্য কোডের মধ্যে সরাসরি চিত্রগুলি অন্তর্ভুক্ত করে HTTP অনুরোধগুলি কমাতে সহায়তা করে, যা পৃষ্ঠার লোড সময় উন্নত করতে পারে।

  2. ইমেইল টেমপ্লেট: ইমেইল ক্লায়েন্টগুলিতে বাইরের চিত্রগুলি ডিফল্টভাবে ব্লক করা হলে সেগুলি সঠিকভাবে প্রদর্শন নিশ্চিত করে।

  3. একক-ফাইল অ্যাপ্লিকেশন: সমস্ত সম্পদ একটি একক ফাইলে এম্বেড করে স্ব-নির্ভর HTML অ্যাপ্লিকেশন তৈরি করে।

  4. API প্রতিক্রিয়া: আলাদা চিত্রের এন্ডপয়েন্টগুলি ছাড়াই JSON প্রতিক্রিয়াগুলিতে সরাসরি চিত্রের ডেটা অন্তর্ভুক্ত করে।

  5. CSS-তে ডেটা URI: ছোট আইকন এবং ব্যাকগ্রাউন্ড চিত্রগুলি সরাসরি CSS ফাইলে এম্বেড করে।

  6. ক্যানভাস ম্যানিপুলেশন: ক্যানভাস চিত্রের ডেটা সংরক্ষণ এবং স্থানান্তর সহজতর করে।

  7. অফলাইন অ্যাপ্লিকেশন: স্থানীয়Storage বা IndexedDB-তে চিত্রগুলি টেক্সট স্ট্রিং হিসাবে সংরক্ষণ করে।

কর্মক্ষমতা বিবেচনা

যদিও বেস64 এনকোডিং সুবিধা প্রদান করে, তবে এর সাথে কিছু ট্রেড-অফ রয়েছে:

  • ফাইলের আকার বৃদ্ধি: বেস64 এনকোডিং প্রায় 33% ডেটার আকার বাড়ায়।
  • ব্রাউজার ক্যাশিং নেই: এম্বেড করা চিত্রগুলি আলাদা চিত্র ফাইলের মতো আলাদাভাবে ক্যাশ করা যায় না।
  • প্যার্সিং ওভারহেড: ব্রাউজারগুলিকে রেন্ডার করার আগে বেস64 স্ট্রিংটি ডিকোড করতে হবে।
  • রক্ষণাবেক্ষণের চ্যালেঞ্জ: এম্বেড করা চিত্রগুলি রেফারেন্স করা ফাইলগুলির চেয়ে আপডেট করা কঠিন।

সর্বোত্তম কর্মক্ষমতার জন্য, সাধারণত বেস64 এনকোডিং কেবল ছোট চিত্রগুলির (10KB এর নিচে) জন্য সুপারিশ করা হয়। বড় চিত্রগুলি সাধারণত আলাদা ফাইল হিসাবে পরিবেশন করা হয় যা সঠিকভাবে ক্যাশ এবং অপ্টিমাইজ করা যেতে পারে।

বিকল্প

বিভিন্ন ব্যবহার ক্ষেত্রের জন্য বেস64 এনকোডিংয়ের কয়েকটি বিকল্প রয়েছে:

  1. SVG ইনলাইন এম্বেডিং: ভেক্টর গ্রাফিক্সের জন্য, ইনলাইন SVG প্রায়শই বেস64-এনকোডেড SVG-এর চেয়ে ভাল কর্মক্ষমতা এবং নমনীয়তা প্রদান করে।

  2. WebP এবং আধুনিক চিত্র ফরম্যাট: এগুলি বেস64-এনকোডেড JPEG/PNG এর চেয়ে ভাল সংকোচন প্রদান করে।

  3. ইমেজ স্প্রাইটস: CSS অবস্থান ব্যবহার করে একক ফাইলে একাধিক ছোট চিত্রকে একত্রিত করা।

  4. CDN (কনটেন্ট ডেলিভারি নেটওয়ার্ক): উৎপাদন সাইটগুলির জন্য, অপ্টিমাইজড চিত্রগুলি CDN থেকে পরিবেশন করা প্রায়শই আরও কার্যকর।

  5. ডেটা সংকোচন: বড় পরিমাণের বাইনারি ডেটা স্থানান্তরের জন্য, বিশেষায়িত সংকোচন অ্যালগরিদম যেমন gzip বা Brotli বেস64-এর চেয়ে আরও কার্যকর।

কোড উদাহরণ

বিভিন্ন প্রোগ্রামিং ভাষায় বেস64-এনকোডেড চিত্রগুলির সাথে কাজ করার উদাহরণ এখানে দেওয়া হল:

1// JavaScript (ব্রাউজার) এ একটি চিত্রকে বেস64-এ রূপান্তর করা
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // ডেটা URL (বেস64 স্ট্রিং) হিসাবে পান
11  return canvas.toDataURL('image/png');
12}
13
14// একটি বেস64 চিত্র প্রদর্শন করা
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // ডেটা URL প্রিফিক্স ছাড়া স্ট্রিংগুলি পরিচালনা করুন
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

HTML বাস্তবায়ন

এখানে HTML-তে সরাসরি একটি বেস64 চিত্র এম্বেড করার উপায় রয়েছে:

1<!-- HTML-তে একটি বেস64 চিত্র সরাসরি এম্বেড করা -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="বেস64 এনকোডেড চিত্র">
3
4<!-- CSS-তে একটি বেস64 ব্যাকগ্রাউন্ড চিত্র ব্যবহার করা -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

ইতিহাস

বেস64 এনকোডিংয়ের মূল উৎস 1970-এর দশকে ইলেকট্রনিক মেইল সিস্টেমের উন্নয়নে। এটি বাইনারি ডেটা এমন সিস্টেমগুলির মাধ্যমে প্রেরণ করার সমস্যা সমাধানের জন্য ডিজাইন করা হয়েছিল যা কেবল ASCII টেক্সট পরিচালনা করতে সক্ষম।

এনকোডিং স্কিমটি 1987 সালে RFC 989 প্রকাশের মাধ্যমে আনুষ্ঠানিকভাবে প্রতিষ্ঠিত হয়, যা প্রাইভেসি এনহ্যান্সড মেইল (PEM) স্ট্যান্ডার্ডকে সংজ্ঞায়িত করে। এটি পরে RFC 1421 এবং অন্যান্য সম্পর্কিত মান দ্বারা আপডেট করা হয়। "বেস64" শব্দটি নিজেই আসে কারণ এনকোডিংটি বাইনারি ডেটাকে উপস্থাপন করতে 64টি ভিন্ন ASCII অক্ষর ব্যবহার করে।

ওয়েব ডেভেলপমেন্টের প্রেক্ষাপটে, বেস64 এনকোডেড চিত্রগুলি 1998 সালে RFC 2397 প্রকাশের সাথে জনপ্রিয়তা পায়, যা ডেটা URI সরাসরি HTML, CSS এবং অন্যান্য ওয়েব নথিতে অন্তর্ভুক্ত করার অনুমতি দেয়।

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

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

রেফারেন্স

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)
🔗

সম্পর্কিত টুলস

আপনার কাজের প্রবাহের জন্য উপকারী হতে পারে এমন আরও টুল আবিষ্কার করুন