কম্প্রেশন সঠিক স্তর নির্বাচন করুন

Ilya Grigorik

Jeremy Wagner

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

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

ভেক্টর ইমেজ অপ্টিমাইজ করা

সমস্ত আধুনিক ব্রাউজার স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) সমর্থন করে, যা দ্বি-মাত্রিক গ্রাফিক্সের জন্য একটি XML-ভিত্তিক চিত্র বিন্যাস। আপনি সরাসরি পৃষ্ঠায় বা বহিরাগত সম্পদ হিসাবে SVG মার্কআপ এম্বেড করতে পারেন। বেশিরভাগ ভেক্টর-ভিত্তিক অঙ্কন সফ্টওয়্যারগুলি SVG ফাইল তৈরি করতে পারে বা আপনি সরাসরি আপনার প্রিয় পাঠ্য সম্পাদকে তাদের হাতে লিখতে পারেন।

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

উপরের উদাহরণটি একটি কালো আউটলাইন এবং লাল ব্যাকগ্রাউন্ড সহ নীচের সাধারণ বৃত্তের আকার রেন্ডার করে এবং অ্যাডোব ইলাস্ট্রেটর থেকে রপ্তানি করা হয়েছিল।

<?xml version="1.0" encoding="utf-8"?>

আপনি বলতে পারেন, এতে অনেক মেটাডেটা রয়েছে, যেমন স্তর তথ্য, মন্তব্য এবং XML নেমস্পেস যা ব্রাউজারে সম্পদ রেন্ডার করার জন্য প্রায়ই অপ্রয়োজনীয়। ফলস্বরূপ, SVGO-এর মতো একটি টুলের মাধ্যমে আপনার SVG ফাইলগুলিকে ছোট করা সর্বদা একটি ভাল ধারণা।

ক্ষেত্রে, SVGO ইলাস্ট্রেটর দ্বারা উত্পন্ন উপরের SVG ফাইলের আকার 58% হ্রাস করে, এটিকে 470 থেকে 199 বাইটে নিয়ে যায়।

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

যেহেতু SVG একটি XML-ভিত্তিক ফর্ম্যাট, আপনি এটির স্থানান্তর আকার কমাতে GZIP কম্প্রেশনও প্রয়োগ করতে পারেন—নিশ্চিত করুন যে আপনার সার্ভার SVG সম্পদগুলিকে সংকুচিত করার জন্য কনফিগার করা আছে!

একটি রাস্টার ইমেজ হল স্বতন্ত্র "পিক্সেল"-এর একটি দ্বি-মাত্রিক গ্রিড-উদাহরণস্বরূপ, একটি 100x100 পিক্সেল চিত্র হল 10,000 পিক্সেলের একটি ক্রম। পরিবর্তে, প্রতিটি পিক্সেল " RGBA " মান সংরক্ষণ করে: (R) লাল চ্যানেল, (G) সবুজ চ্যানেল, (B) নীল চ্যানেল এবং (A) আলফা (স্বচ্ছতা) চ্যানেল।

অভ্যন্তরীণভাবে, ব্রাউজার প্রতিটি চ্যানেলের জন্য 256টি মান (শেড) বরাদ্দ করে, যা প্রতি চ্যানেলে 8 বিট (2^8 = 256) এবং পিক্সেল প্রতি 4 বাইট (4 চ্যানেল x 8 বিট = 32 বিট = 4 বাইট) অনুবাদ করে। ফলস্বরূপ, যদি আমরা গ্রিডের মাত্রাগুলি জানি তবে আমরা সহজেই ফাইলের আকার গণনা করতে পারি:

• 100x100 পিক্সেল ছবি 10,000 পিক্সেলের সমন্বয়ে গঠিত
• 10,000 পিক্সেল x 4 বাইট = 40,000 বাইট
• 40,000 বাইট / 1024 = 39 KB

একটি 100x100 পিক্সেল চিত্রের জন্য 39 KB একটি বড় চুক্তি বলে মনে নাও হতে পারে, তবে ফাইলের আকার বড় ছবির জন্য দ্রুত বিস্ফোরিত হয় এবং ডাউনলোড করা ধীর এবং ব্যয়বহুল উভয়ই ছবির সম্পদ তৈরি করে৷ এই পোস্টটি এখন পর্যন্ত শুধুমাত্র "অসংকুচিত" চিত্র বিন্যাসে ফোকাস করেছে৷ ধন্যবাদ, ইমেজ ফাইলের আকার কমাতে অনেক কিছু করা যেতে পারে।

একটি সহজ কৌশল হল প্রতি চ্যানেলে 8 বিট থেকে একটি ছোট রঙের প্যালেটে চিত্রের "বিট-গভীরতা" কমানো: প্রতি চ্যানেলে 8 বিট আমাদের চ্যানেল প্রতি 256টি মান এবং মোট 16,777,216 (256 ^ 3) রঙ দেয়। আপনি যদি প্যালেটটিকে 256 রঙে কমিয়ে দেন? তাহলে আপনার আরজিবি চ্যানেলের জন্য মোট 8 বিট লাগবে এবং অবিলম্বে প্রতি পিক্সেলে দুটি বাইট সংরক্ষণ করতে হবে—এটি প্রতি পিক্সেল ফরম্যাটে আসল 4 বাইটের তুলনায় 50% কম্প্রেশন সেভ!

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

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

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

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

সুতরাং, আবারও, এটি সবই দুর্দান্ত, তবে খুব একাডেমিকও: এটি কীভাবে আপনাকে আপনার সাইটে চিত্রগুলি অপ্টিমাইজ করতে সহায়তা করে? ঠিক আছে, সমস্যাটির আকার বোঝা গুরুত্বপূর্ণ: RGBA পিক্সেল, বিট-গভীরতা এবং বিভিন্ন অপ্টিমাইজেশন কৌশল। বিভিন্ন রাস্টার ইমেজ ফরম্যাটের আলোচনায় ডুব দেওয়ার আগে এই সমস্ত ধারণাগুলি বোঝার জন্য এবং মনে রাখার জন্য গুরুত্বপূর্ণ।

লসলেস বনাম ক্ষতিকর ইমেজ কম্প্রেশন

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

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

1. ছবি একটি ক্ষতিকারক ফিল্টার দিয়ে প্রক্রিয়া করা হয় যা কিছু পিক্সেল ডেটা মুছে দেয়।
2. ছবি একটি ক্ষতিহীন ফিল্টার দিয়ে প্রক্রিয়া করা হয় যা পিক্সেল ডেটা সংকুচিত করে।

প্রথম ধাপটি ঐচ্ছিক, এবং সঠিক অ্যালগরিদমটি নির্দিষ্ট চিত্র বিন্যাসের উপর নির্ভর করবে, তবে এটি বোঝা গুরুত্বপূর্ণ যে কোনও চিত্র তার আকার হ্রাস করার জন্য ক্ষতিকারক কম্প্রেশন পদক্ষেপের মধ্য দিয়ে যেতে পারে। প্রকৃতপক্ষে, GIF, PNG, JPEG এবং অন্যদের মতো বিভিন্ন চিত্র বিন্যাসের মধ্যে পার্থক্য হল ক্ষতিকর এবং ক্ষতিহীন পদক্ষেপগুলি প্রয়োগ করার সময় তারা যে নির্দিষ্ট অ্যালগরিদমগুলি ব্যবহার করে (বা বাদ দেওয়া) তার সংমিশ্রণে।

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

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

কোর ওয়েব ভাইটালগুলিতে ইমেজ কম্প্রেশনের প্রভাব

যেহেতু চিত্রগুলি প্রায়শই সবচেয়ে বড় বিষয়বস্তুর পেইন্টের প্রার্থী হয়, তাই একটি চিত্রের রিসোর্স লোডের সময়কাল হ্রাস করা ল্যাব এবং ক্ষেত্রে উভয় ক্ষেত্রেই আরও ভাল LCP-তে অনুবাদ করতে পারে৷

রাস্টার ইমেজ ফরম্যাটে কম্প্রেশন সেটিংসের সাথে খেলার সময়, পুরানো ফরম্যাটের তুলনায় আপনি একই ইমেজ একটি ছোট ফুটপ্রিন্টে সরবরাহ করতে পারেন কিনা তা দেখতে WebP এবং AVIF ফর্ম্যাটগুলির সাথে পরীক্ষা করতে ভুলবেন না।

আপনি সতর্কতা অবলম্বন করতে চান যে রাস্টার চিত্রগুলিকে অতিরিক্ত সংকুচিত করবেন না। একটি ভাল সমাধান হল আপনার জন্য সেরা কম্প্রেশন সেটিংস খুঁজে পেতে একটি ইমেজ অপ্টিমাইজেশান CDN ব্যবহার করা, তবে একটি বিকল্প হতে পারে ভিজ্যুয়াল পার্থক্য অনুমান করার জন্য Butteraugli এর মতো টুল ব্যবহার করা যাতে আপনি ছবিগুলিকে খুব আক্রমনাত্মকভাবে এনকোড না করেন এবং খুব বেশি গুণমান হারান না৷

ইমেজ অপ্টিমাইজেশান চেকলিস্ট

আপনার ছবি অপ্টিমাইজ করার জন্য কিছু টিপস এবং কৌশল মনে রাখবেন:

• ভেক্টর বিন্যাস পছন্দ করুন: ভেক্টর চিত্রগুলি রেজোলিউশন এবং স্কেল স্বাধীন, যা তাদের মাল্টি-ডিভাইস এবং উচ্চ-রেজোলিউশন বিশ্বের জন্য উপযুক্ত করে তোলে।
• SVG সম্পদগুলিকে ছোট করুন এবং সংকুচিত করুন: বেশিরভাগ অঙ্কন অ্যাপ্লিকেশন দ্বারা উত্পাদিত XML মার্কআপে প্রায়শই অপ্রয়োজনীয় মেটাডেটা থাকে যা সরানো যেতে পারে; আপনার সার্ভারগুলি SVG সম্পদের জন্য GZIP কম্প্রেশন প্রয়োগ করার জন্য কনফিগার করা হয়েছে তা নিশ্চিত করুন।
• পুরানো রাস্টার ফর্ম্যাটের চেয়ে WebP বা AVIF পছন্দ করুন : WebP এবং AVIF ছবিগুলি সাধারণত পুরানো ইমেজ ফর্ম্যাটের থেকে অনেক ছোট হবে৷
• সেরা রাস্টার ইমেজ ফরম্যাট বেছে নিন: আপনার কার্যকরী প্রয়োজনীয়তা নির্ধারণ করুন এবং প্রতিটি নির্দিষ্ট সম্পদের জন্য উপযুক্ত একটি নির্বাচন করুন ।
• রাস্টার ফর্ম্যাটের জন্য সর্বোত্তম মানের সেটিংস নিয়ে পরীক্ষা করুন: "গুণমান" সেটিংস ডায়াল করতে ভয় পাবেন না, ফলাফলগুলি প্রায়শই খুব ভাল এবং বাইট সঞ্চয় উল্লেখযোগ্য।
• অপ্রয়োজনীয় ইমেজ মেটাডেটা সরান: অনেক রাস্টার ইমেজে সম্পদ সম্পর্কে অপ্রয়োজনীয় মেটাডেটা থাকে: জিও তথ্য, ক্যামেরার তথ্য ইত্যাদি। এই তথ্য ফালা করতে উপযুক্ত সরঞ্জাম ব্যবহার করুন.
• স্কেল করা ছবিগুলি পরিবেশন করুন: ছবিগুলির আকার পরিবর্তন করুন এবং নিশ্চিত করুন যে "প্রদর্শন" আকারটি ছবির "প্রাকৃতিক" আকারের যতটা সম্ভব কাছাকাছি। বিশেষ করে বড় ছবিগুলিতে গভীর মনোযোগ দিন, কারণ আকার পরিবর্তন করার সময় সেগুলি সবচেয়ে বড় ওভারহেডের জন্য অ্যাকাউন্ট করে!
• স্বয়ংক্রিয়, স্বয়ংক্রিয়, স্বয়ংক্রিয়: স্বয়ংক্রিয় সরঞ্জাম এবং পরিকাঠামোতে বিনিয়োগ করুন যা নিশ্চিত করবে যে আপনার সমস্ত চিত্র সম্পদ সর্বদা অপ্টিমাইজ করা হয়।