কম্প্রেশন কৌশল

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

WebP হল একটি নতুন ইমেজ ফরম্যাট যা Google দ্বারা বিকশিত হয়েছে এবং Chrome, Opera এবং Android-এ সমর্থিত যা ওয়েবে দ্রুত এবং ছোট ছবিগুলিকে সক্ষম করার জন্য অপ্টিমাইজ করা হয়েছে৷ ওয়েবপি ছবিগুলি PNG এবং JPEG ছবিগুলির তুলনায় প্রায় 30% ছোট আকারের সমান ভিজ্যুয়াল মানের। উপরন্তু, WebP চিত্র বিন্যাসে অন্যান্য বিন্যাসের সাথে বৈশিষ্ট্য সমতা রয়েছে। এটি সমর্থন করে:

• ক্ষতিকারক কম্প্রেশন: ক্ষতিকারক কম্প্রেশন VP8 কী ফ্রেম এনকোডিংয়ের উপর ভিত্তি করে। VP8 হল একটি ভিডিও কম্প্রেশন ফরম্যাট যা On2 Technologies দ্বারা VP6 এবং VP7 ফরম্যাটের উত্তরসূরি হিসেবে তৈরি করা হয়েছে।

• লসলেস কম্প্রেশন: লসলেস কম্প্রেশন ফরম্যাটটি WebP টিম তৈরি করেছে।

• স্বচ্ছতা: 8-বিট আলফা চ্যানেল গ্রাফিকাল চিত্রের জন্য দরকারী। আলফা চ্যানেলটি ক্ষতিকারক RGB এর সাথে ব্যবহার করা যেতে পারে, এমন একটি বৈশিষ্ট্য যা বর্তমানে অন্য কোনো বিন্যাসের সাথে উপলব্ধ নয়।

• অ্যানিমেশন: এটি সত্যিকারের রঙের অ্যানিমেটেড ছবি সমর্থন করে।

• মেটাডেটা: এতে EXIF ​​এবং XMP মেটাডেটা থাকতে পারে (উদাহরণস্বরূপ, ক্যামেরা দ্বারা ব্যবহৃত)।

• রঙের প্রোফাইল: এটিতে একটি এমবেডেড আইসিসি প্রোফাইল থাকতে পারে।

ছবিগুলির আরও ভাল সংকোচন এবং এই সমস্ত বৈশিষ্ট্যগুলির জন্য সমর্থনের কারণে, ওয়েবপি বেশিরভাগ চিত্র বিন্যাসের জন্য একটি চমৎকার প্রতিস্থাপন হতে পারে: PNG, JPEG বা GIF। আরও ভাল, আপনি কি জানেন যে WebP নতুন ছবি অপ্টিমাইজেশানের সুযোগগুলি সক্ষম করে, যেমন স্বচ্ছতার সাথে ক্ষতিকারক চিত্রগুলির জন্য সমর্থন? হ্যাঁ! WebP হল চিত্র বিন্যাসের সুইস আর্মি ছুরি।

তাহলে, এই জাদুটি কীভাবে করা হয়? এর আমাদের হাতা গুটানো এবং ফণা অধীনে একটি কটাক্ষপাত করা যাক.

ক্ষতিকর WebP

WebP-এর ক্ষতিকর কম্প্রেশন (ভিডিও) ফ্রেমের পূর্বাভাস দেওয়ার জন্য VP8 এর মতো একই পদ্ধতি ব্যবহার করে। VP8 ব্লক ভবিষ্যদ্বাণীর উপর ভিত্তি করে এবং যেকোন ব্লক-ভিত্তিক কোডেকের মতো, VP8 ফ্রেমটিকে ম্যাক্রোব্লক নামে ছোট ছোট অংশে ভাগ করে।

প্রতিটি ম্যাক্রোব্লকের মধ্যে, এনকোডার পূর্বে প্রক্রিয়াকৃত ব্লকের উপর ভিত্তি করে অপ্রয়োজনীয় গতি এবং রঙের তথ্যের পূর্বাভাস দিতে পারে। ছবির ফ্রেমটি "কী" এই অর্থে যে এটি শুধুমাত্র প্রতিটি ম্যাক্রোব্লকের তাৎক্ষণিক স্থানিক আশেপাশে ইতিমধ্যেই ডিকোড করা পিক্সেলগুলি ব্যবহার করে এবং সেগুলির অজানা অংশ পূরণ করার চেষ্টা করে৷ একে ভবিষ্যদ্বাণীমূলক কোডিং বলা হয় ( ভিপি8 ভিডিওর ইন্ট্রা-ফ্রেম কোডিং দেখুন)।

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

গাণিতিকভাবে ইনভার্টেবল ট্রান্সফর্মের (বিখ্যাত ডিসিটি, যা ডিসক্রিট কোসাইন ট্রান্সফর্মের জন্য দাঁড়ায়) এর অধীন হওয়ার পরে, অবশিষ্টাংশে সাধারণত অনেকগুলি শূন্য মান থাকে, যা আরও কার্যকরভাবে সংকুচিত করা যায়। ফলাফল তারপর quantized এবং এনট্রপি কোডেড হয়. মজার বিষয় হল, কোয়ান্টাইজেশন ধাপটিই একমাত্র যেখানে বিটগুলি ক্ষতিকারকভাবে বাতিল করা হয় (নীচের চিত্রে QPj দ্বারা বিভাজনের জন্য অনুসন্ধান করুন)। অন্য সব ধাপগুলি ইনভার্টেবল এবং ক্ষতিহীন!

নিম্নলিখিত চিত্রটি WebP ক্ষতিকর কম্প্রেশনের সাথে জড়িত পদক্ষেপগুলি দেখায়৷ JPEG-এর তুলনায় পার্থক্যকারী বৈশিষ্ট্যগুলি লাল রঙে প্রদক্ষিণ করা হয়েছে।

WebP ব্লক কোয়ান্টাইজেশন ব্যবহার করে এবং বিভিন্ন ইমেজ সেগমেন্টে অভিযোজিতভাবে বিট বিতরণ করে: কম এনট্রপি সেগমেন্টের জন্য কম বিট এবং উচ্চ এনট্রপি সেগমেন্টের জন্য উচ্চতর বিট। WebP পাটিগণিত এনট্রপি এনকোডিং ব্যবহার করে, JPEG-তে ব্যবহৃত হাফম্যান এনকোডিং- এর তুলনায় আরও ভালো কম্প্রেশন অর্জন করে।

VP8 ইন্ট্রা-প্রেডিকশন মোড

VP8 ইন্ট্রা-প্রেডিকশন মোড তিন ধরনের ম্যাক্রোব্লকের সাথে ব্যবহার করা হয়:

• 4x4 লুমা
• 16x16 লুমা
• 8x8 ক্রোমা

চারটি সাধারণ ইন্ট্রা-প্রেডিকশন মোড এই ম্যাক্রোব্লকগুলি দ্বারা ভাগ করা হয়েছে:

• H_PRED (অনুভূমিক পূর্বাভাস)। ব্লকের প্রতিটি কলাম বাম কলামের একটি অনুলিপি দিয়ে পূরণ করে, এল।

• V_PRED (উল্লম্ব পূর্বাভাস)। উপরের সারির একটি অনুলিপি দিয়ে ব্লকের প্রতিটি সারি পূরণ করে, A।

• DC_PRED (ডিসি পূর্বাভাস)। A উপরের সারিতে পিক্সেলের গড় এবং L এর বাম দিকের কলাম ব্যবহার করে একটি একক মান দিয়ে ব্লকটি পূরণ করে।

• TM_PRED (TrueMotion পূর্বাভাস)। একটি মোড যা On2 Technologies দ্বারা বিকাশিত একটি কম্প্রেশন কৌশল থেকে এর নাম পেয়েছে। সারি A এবং কলাম L ছাড়াও, TM_PRED ব্লকের উপরে এবং বাম দিকে পিক্সেল P ব্যবহার করে। A-তে পিক্সেলের মধ্যে অনুভূমিক পার্থক্য (P থেকে শুরু) প্রতিটি সারি শুরু করতে L থেকে পিক্সেল ব্যবহার করে প্রচার করা হয়।

নীচের চিত্রটি WebP ক্ষতিকর কম্প্রেশনে ব্যবহৃত বিভিন্ন ভবিষ্যদ্বাণী মোডগুলিকে চিত্রিত করে৷

4x4 লুমা ব্লকের জন্য, V_PRED এবং H_PRED-এর মতো ছয়টি অতিরিক্ত ইন্ট্রা মোড রয়েছে, কিন্তু এটি বিভিন্ন দিকের পিক্সেলের পূর্বাভাসের সাথে মিলে যায়। এই মোডগুলি সম্পর্কে আরও বিশদ VP8 বিটস্ট্রিম গাইডে পাওয়া যাবে।

অভিযোজিত ব্লক কোয়ান্টাইজেশন

একটি চিত্রের গুণমান উন্নত করার জন্য, চিত্রটিকে এমন এলাকায় ভাগ করা হয় যেখানে দৃশ্যত একই বৈশিষ্ট্য রয়েছে৷ এই প্রতিটি সেগমেন্টের জন্য, কম্প্রেশন প্যারামিটার (পরিমাণ নির্ধারণের ধাপ, ফিল্টারিং শক্তি, ইত্যাদি) স্বাধীনভাবে সুর করা হয়। এটি বিটগুলিকে যেখানে তারা সবচেয়ে দরকারী সেখানে পুনরায় বিতরণ করে দক্ষ কম্প্রেশন দেয়। VP8 সর্বাধিক চারটি সেগমেন্টের অনুমতি দেয় (VP8 বিটস্ট্রিমের একটি সীমাবদ্ধতা)।

কেন WebP (ক্ষতিকর) JPEG থেকে ভাল

ভবিষ্যদ্বাণী কোডিং হল একটি প্রধান কারণ WebP JPEG-এর উপর জয়লাভ করে৷ ব্লক অভিযোজিত কোয়ান্টাইজেশনও একটি বড় পার্থক্য করে। ফিল্টারিং মধ্য/নিম্ন বিটরেটে সাহায্য করে। বুলিয়ান গাণিতিক এনকোডিং হাফম্যান এনকোডিংয়ের তুলনায় 5%-10% কম্প্রেশন লাভ প্রদান করে।

লসলেস ওয়েবপি

WebP-লসলেস এনকোডিং বিভিন্ন কৌশল ব্যবহার করে ছবিকে রূপান্তরের উপর ভিত্তি করে। তারপরে, এনট্রপি কোডিং ট্রান্সফর্ম প্যারামিটার এবং রূপান্তরিত চিত্র ডেটাতে সঞ্চালিত হয়। ছবিতে প্রয়োগ করা রূপান্তরগুলির মধ্যে রয়েছে পিক্সেলের স্থানিক পূর্বাভাস, রঙের স্থান পরিবর্তন, স্থানীয়ভাবে উদীয়মান প্যালেট ব্যবহার করে, একাধিক পিক্সেলকে এক পিক্সেলে প্যাক করা এবং আলফা প্রতিস্থাপন। এনট্রপি কোডিংয়ের জন্য আমরা LZ77-হাফম্যান কোডিংয়ের একটি রূপ ব্যবহার করি, যা দূরত্বের মান এবং কমপ্যাক্ট স্পারস মানগুলির 2D এনকোডিং ব্যবহার করে।

ভবিষ্যদ্বাণীকারী (স্থানিক) রূপান্তর

প্রতিবেশী পিক্সেলগুলি প্রায়শই পারস্পরিক সম্পর্কযুক্ত এই সত্যকে কাজে লাগিয়ে এনট্রপি কমাতে স্থানিক পূর্বাভাস ব্যবহার করা হয়। ভবিষ্যদ্বাণীকারী রূপান্তরে, বর্তমান পিক্সেল মানটি ইতিমধ্যেই ডিকোড করা (স্ক্যান-লাইন ক্রমে) পিক্সেল থেকে অনুমান করা হয় এবং শুধুমাত্র অবশিষ্ট মান (প্রকৃত - পূর্বাভাসিত) এনকোড করা হয়। ভবিষ্যদ্বাণী মোড ব্যবহার করার জন্য ভবিষ্যদ্বাণীর ধরন নির্ধারণ করে। ছবিটি একাধিক বর্গক্ষেত্রে বিভক্ত এবং একটি বর্গক্ষেত্রের সমস্ত পিক্সেল একই ভবিষ্যদ্বাণী মোড ব্যবহার করে৷

13টি ভিন্ন সম্ভাব্য ভবিষ্যদ্বাণী মোড আছে। প্রচলিত আছে বাম, উপরে, উপরে-বাম এবং উপরে-ডান পিক্সেল। অবশিষ্টগুলি হল বাম, উপরে, উপরে-বাম এবং উপরে-ডান এর সমন্বয় (গড়)।

রঙ (ডি-সম্পর্ক) রূপান্তর

কালার ট্রান্সফর্মের লক্ষ্য হল প্রতিটি পিক্সেলের R, G এবং B মানগুলিকে সাজানো। কালার ট্রান্সফর্ম সবুজ (G) মানটিকে যেমন আছে তেমন রাখে, সবুজের উপর ভিত্তি করে লাল (R) কে রূপান্তরিত করে এবং সবুজের উপর ভিত্তি করে নীল (B) কে রূপান্তরিত করে এবং তারপরে লালের উপর ভিত্তি করে।

ভবিষ্যদ্বাণীকারী রূপান্তরের ক্ষেত্রে যেমন, প্রথমে ছবিটিকে ব্লকে ভাগ করা হয় এবং ব্লকের সমস্ত পিক্সেলের জন্য একই রূপান্তর মোড ব্যবহার করা হয়। প্রতিটি ব্লকের জন্য তিনটি ধরণের রঙের রূপান্তর উপাদান রয়েছে: সবুজ_থেকে_লাল, সবুজ_থেকে_নীল এবং লাল_থেকে_নীল।

সবুজ রূপান্তর বিয়োগ করুন

"সবুজ রূপান্তর বিয়োগ" প্রতিটি পিক্সেলের লাল এবং নীল মান থেকে সবুজ মান বিয়োগ করে। যখন এই রূপান্তরটি উপস্থিত থাকে, তখন ডিকোডারকে লাল এবং নীল উভয়ের সাথে সবুজ মান যোগ করতে হবে। এটি উপরের সাধারণ রঙের সাজসজ্জার ট্রান্সফর্মের একটি বিশেষ কেস, এটি একটি কাটঅফ নিশ্চিত করার জন্য যথেষ্ট ঘন ঘন।

কালার ইনডেক্সিং (প্যালেট) ট্রান্সফর্ম

যদি অনেকগুলি অনন্য পিক্সেল মান না থাকে তবে একটি রঙ সূচক অ্যারে তৈরি করা এবং অ্যারের সূচকগুলির দ্বারা পিক্সেল মানগুলি প্রতিস্থাপন করা আরও কার্যকর হতে পারে। কালার ইনডেক্সিং ট্রান্সফর্ম এটি অর্জন করে। কালার ইনডেক্সিং ট্রান্সফর্ম ইমেজে অনন্য ARGB মানের সংখ্যা পরীক্ষা করে। যদি সেই সংখ্যাটি একটি থ্রেশহোল্ডের নিচে থাকে (256), এটি সেই ARGB মানগুলির একটি অ্যারে তৈরি করে, যা পিক্সেল মানগুলিকে সংশ্লিষ্ট সূচকের সাথে প্রতিস্থাপন করতে ব্যবহৃত হয়।

কালার ক্যাশে কোডিং

লসলেস WebP কম্প্রেশন নতুন পিক্সেল পুনর্গঠন করার জন্য ইতিমধ্যেই দেখা ছবির টুকরো ব্যবহার করে। এটি একটি স্থানীয় প্যালেট ব্যবহার করতে পারে যদি কোন আকর্ষণীয় মিল না পাওয়া যায়। সাম্প্রতিক রঙগুলি পুনরায় ব্যবহার করার জন্য এই প্যালেটটি ক্রমাগত আপডেট করা হয়। নীচের ছবিতে, আপনি দেখতে পাচ্ছেন যে স্ক্যানটি নিম্নগামী হওয়ার সাথে সাথে 32টি সম্প্রতি ব্যবহৃত রঙের সাথে ক্রমান্বয়ে আপডেট হচ্ছে স্থানীয় রঙের ক্যাশে।

LZ77 ব্যাকওয়ার্ড রেফারেন্স

ব্যাকওয়ার্ড রেফারেন্স হল দৈর্ঘ্য এবং দূরত্ব কোডের টিপল। দৈর্ঘ্য নির্দেশ করে কত পিক্সেল স্ক্যান-লাইন ক্রমে কপি করা হবে। দূরত্ব কোড হল একটি সংখ্যা যা পূর্বে দেখা একটি পিক্সেলের অবস্থান নির্দেশ করে, যেখান থেকে পিক্সেলগুলি কপি করা হবে। LZ77 উপসর্গ কোডিং ব্যবহার করে দৈর্ঘ্য এবং দূরত্বের মান সংরক্ষণ করা হয়।

LZ77 উপসর্গ কোডিং বড় পূর্ণসংখ্যার মানকে দুটি ভাগে ভাগ করে: উপসর্গ কোড এবং অতিরিক্ত বিট। প্রিফিক্স কোডটি একটি এনট্রপি কোড ব্যবহার করে সংরক্ষণ করা হয়, যখন অতিরিক্ত বিটগুলি যেমন রয়েছে (এনট্রপি কোড ছাড়াই) সংরক্ষণ করা হয়।

নিচের চিত্রটি LZ77 (2D ভেরিয়েন্ট) শব্দের সাথে মিল (পিক্সেলের পরিবর্তে) চিত্রিত করে।

আলফার সাথে ক্ষতিকারক WebP

ক্ষতিকর WebP (RGB কালার) এবং লসলেস WebP (আলফা সহ লসলেস RGB) ছাড়াও, আরেকটি WebP মোড আছে যা RGB চ্যানেলের জন্য ক্ষতিকর এনকোডিং এবং আলফা চ্যানেলের জন্য ক্ষতিহীন এনকোডিংকে অনুমতি দেয়। এই ধরনের একটি সম্ভাবনা (ক্ষতিগ্রস্ত RGB এবং ক্ষতিহীন আলফা) বর্তমান চিত্র বিন্যাসের সাথে উপলব্ধ নেই। আজ, যে ওয়েবমাস্টারদের স্বচ্ছতার প্রয়োজন তাদের অবশ্যই PNG তে ছবিগুলিকে ক্ষতিকারকভাবে এনকোড করতে হবে, যার ফলে একটি উল্লেখযোগ্য আকারের ফোলা দেখা যায়। WebP আলফা কম বিট-প্রতি-পিক্সেল সহ ছবি এনকোড করে এবং এই ধরনের ছবির আকার কমানোর একটি কার্যকর উপায় প্রদান করে। আলফা চ্যানেলের লসলেস কম্প্রেশন ক্ষতিকারক (গুণমান 90) WebP এনকোডিংয়ের চেয়ে মাত্র 22% বাইট যোগ করে।

সামগ্রিকভাবে, ক্ষতিকারক+আলফা ওয়েবপি দিয়ে স্বচ্ছ PNG প্রতিস্থাপন করলে গড়ে 60-70% আকার সাশ্রয় হয়। এটি আইকন সমৃদ্ধ মোবাইল সাইটগুলির জন্য একটি দুর্দান্ত আকর্ষণীয় বৈশিষ্ট্য হিসাবে নিশ্চিত করা হয়েছে (উদাহরণস্বরূপ, everything.me )৷