এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

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

মাত্রা	পিক্সেল	ফাইলের আকার
100 x 100	10,000	39 কেবি
200 x 200	40,000	156 কেবি
300 x 300	90,000	351 কেবি
500 x 500	250,000	977 কেবি
800 x 800	640,000	2500 KB

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

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