ছবির কাজ অনুযায়ী নির্বাচন করুন
এক্সটেনশন নয়, অ্যাসেট দিয়ে শুরু করুন। একটি ফটোগ্রাফ ধারাবাহিক-টোন কনটেন্ট, তাই প্রদর্শিত সাইজে কিছু লস গ্রহণযোগ্য হতে পারে। একটি স্ক্রিনশট, চার্ট, লোগো, বা লাইন ড্রইংয়ে সবুজ এজ এবং টেক্সট যেখানে আরটিফ্যাক্টগুলি সহজেই নজরে আসে। এগুলো লসলেস আউটপুট বা সুচিত অনুমোদন দিয়ে সংরক্ষণ করুন। ভেক্টর লোগো বা ডায়াগ্রামের জন্য উপলব্ধ হলে SVG ব্যবহার করুন।
তারপর সক্ষমতাগুলি শনাক্ত করুন। Alpha মানে প্রতি-পিক্সেল ট্রান্সপারেন্সি। Animation হল ফ্রেমগুলোর ক্রম। প্রয়োজনীয় ব্রাউজার কভারেজ, পাবলিশিং ভলিউম, এবং বিল্ড সময় হলো ডেলিভারি সীমাবদ্ধতা যা ছোট ফর্ম্যাটকে ওভাররাইড করতে পারে।
প্রথমে lossy AVIF এবং WebP পরীক্ষা করুন। বিস্তৃত সামঞ্জস্যপূর্ণ অপ্রকাশ্য ফallback দরকার হলে JPEG রাখা উচিত।
একটি lossless সোর্স রাখুন। আসল ডিসপ্লে স্কেলে PNG এবং lossless WebP বা AVIF তুলনা করে নির্বাচন করুন।
AVIF, WebP, বা PNG ব্যবহার করুন; JPEG নির্বাচন করবেন না কারণ এতে alpha চ্যানেল নেই।
প্রতিটি ফর্ম্যাট কী দেয় তা বুঝুন
AVIF একটি HEIF-ভিত্তিক ফর্ম্যাটে AV1-কোডেড ইমেজ সংরক্ষণ করে। এর স্পেসিফিকেশন স্টিল ইমেজ, ইমেজ সিকোয়েন্স, এবং আলফা ইমেজ আইটেমসহ ধারণ করে। এটি lossy এবং lossless এনকোডিং, ট্রান্সপারেন্সি, এবং এনিমেশন সাপোর্ট করে। সেভিং একরকম নয়: সোর্স কনটেন্ট, এনকোডার, স্পিড, টার্গেট কোয়ালিটি, এবং মেটাডেটা ফলাফল পরিবর্তন করে।
WebP lossy এবং lossless মোড, ট্রান্সপারেন্সি, এবং এনিমেশন সাপোর্ট করে। JPEG একটি lossy স্টিল-ইমেজ ফর্ম্যাট যার খুব বিস্তৃত ঐতিহাসিক সাপোর্ট আছে,Opaque ফটোগ্রাফের ফallback হিসেবে কার্যকর। PNG lossless এবং alpha সমর্থন করে, সুতরাং এটি সঠিক গ্রাফিক্সের জন্য নির্ভরযোগ্য ফallback; যদিও ফটোগ্রাফিক PNG প্রায়ই অপ্রয়োজনীয়ভাবে অপ্রদক্ষ। সাধারণ PNG স্ট্যাটিক; মোশন দরকার হলে আলাদা এনিমেশন ফর্ম্যাট পরীক্ষা করুন।
কম ট্রান্সফার সাইজে ক্ষতিপূরণ দেওয়া যেতে পারে এমন উচ্চ-মূল্যের রাষ্টার ইমেজগুলোর জন্য সবচেয়ে উপযোগী পরীক্ষা।
ট্রান্সপারেন্সি ও এনিমেশনসহ আধুনিক সাধারণ-প্রয়োগের রাষ্টার বিকল্প হিসেবে কাজে লাগে।
অপ্রকাশ্য ফটোগ্রাফিক ফallback হিসেবে ব্যবহার করুন, ট্রান্সপারেন্ট লোগো বা কাটআউটের জন্য নয়।
লসলেস, ট্রান্সপারেন্ট রাষ্টার ফallback এবং পিক্সেল ফিডেলিটির জন্য ব্যবহার করুন—যেখানে সর্বনিম্ন বাইটের চেয়ে পিক্সেল সততা গুরুত্বপূর্ণ।
একটি একক ফর্ম্যাটে বাজি না রেখে ফallback পথ তৈরি করুন
picture element ব্রাউজারকে বিকল্পগুলো মূল্যায়ন করতে দেয়। প্রথমে AVIF, তারপর WebP, এবং JPEG বা PNG-র img ফallback রাখুন, যথাযথ MIME type সহ। ব্রাউজার একটি অ-সমর্থিত সোর্স স্কিপ করে এবং কোনো সোর্স ব্যবহারযোগ্য না হলে ফallback ব্যবহার করে। একই অর্থবহ আল্টারনেটিভ টেক্সট বজায় রাখুন যদি না আপনি ইচ্ছাকৃতভাবে ক্রপ পরিবর্তন করেন।
ফর্ম্যাট ফallback-responsive সাইজিং প্রতিস্থাপন করে না। যখন স্লট পরিবর্তনশীল হয় তখন width-ভিত্তিক ক্যান্ডিডেট এবং ssizes (sizes) মান সঠিকভাবে প্রদান করুন। ব্রাউজার জায়গা নির্ধারণ করতে width এবং height অন্তর্ভুক্ত করুন। ছোট ফর্ম্যাট ফাইল যদি আকারে আকারে অতিরঞ্জিত পিক্সেল ডাইমেনশন থাকে তবুও বাইট নষ্ট করে।
প্রথমে AVIF, দ্বিতীয়ে WebP, তারপর অপ্রকাশ্য ফটোগ্রাফের জন্য JPEG বা ফallback-এ ট্রান্সপারেন্সি বা লসলেস এজেস প্রয়োজন হলে PNG।
যদি সার্ভার request capability থেকে ফর্ম্যাট নির্বাচন করে picture markup না ব্যবহার করে, তবে ক্যাশ ভ্যারিয়েশন সঠিকভাবে কনফিগার করুন এবং নিশ্চিত করুন যে প্রতিটি ক্লায়েন্ট ডিকোডেবল রেপ্রেজেন্টেশন পায়।
প্রিয় ডিকোডার ছাড়া কোনো ক্লায়েন্ট ব্যবহার করে বা স্টেজিং-এ ইচ্ছাকৃতভাবে কোনো সোর্স নিষ্ক্রিয় করে; নিশ্চিত করুন ইমেজ, ডাইমেনশন, এবং আল্টারনেটিভ টেক্সট সঠিক থাকে।
এনকোডিং সময় বাজেট করুন এবং ভিজ্যুয়াল কোয়ালিটি রক্ষা করুন
আধুনিক কম্প্রেশন এনকোডিংয়ে কাজ বাড়ায়। AVIF-এর রেফারেন্স এনকোডার 0 (সবচেয়ে ধীর) থেকে 10 (সবচেয়ে দ্রুত) পর্যন্ত স্পিড রেঞ্জ দেয়; WebP ও এনকোডিং সময়, আউটপুট সাইজ এবং কোয়ালিটির মধ্যে আরবিট্রেজ করে। ব্যাচ রি-এনকোড বা অন-ডিমান্ড ট্রান্সফরমেশনকে অপারেশনাল সিদ্ধান্ত হিসেবে বিবেচনা করুন, ফ্রি সেটিং পরিবর্তন নয়।
অ্যাসেট ক্লাস অনুযায়ী পুনরাবৃত্ত পলিসি সেট করুন এবং কমন ডিসপ্লে সাইজে অরিজিনালগুলো পর্যালোচনা করুন। মুখ, গ্রেডিয়েন্ট, টেক্সট, এজেস, এবং ট্রান্সপারেন্ট বাউন্ডারি পরীক্ষা করুন। মাস্টার রাখুন এবং এনকোডার ভার্সন ও সেটিংস রেকর্ড করুন যাতে কোনো ত্রুটি পুনরূদ্ধার ও রোলব্যাক করা যায়।
দ্রুত এনকোডিং বিল্ড চাপ কমাতে পারে কিন্তু বড় ফাইল বা কম কার্যকর কম্প্রেসন দিতে পারে; আপনার নিজস্ব সোর্স সেটে বেন্চমার্ক করুন।
একটি স্কোর বা প্রিসেট দর্শকরা দেখতে যে ইমেজ অঞ্চলে অর্থ বহন করে সেই ভিজ্যুয়াল রিভিউকে বদলাতে পারে না।
ইমেজ-ফর্ম্যাট পরিবর্তনকে সক্রিয় রিলায়াবিলিটি অনুশীলন বানান
For Status Is UP, ইমেজ অপ্টিমাইজেশন একটি প্রোঅ্যাকটিভ আপটাইম কাজ যখন তা একটি রিলিজ থেকে একটি গুরুত্বপূর্ণ পেজকে অবনতি থেকে রক্ষা করে। ক্রিটিক্যাল ইমেজ URL-গুলো ইনভেন্টরি করুন, প্রতিনিধিত্বশীল কনভার্শন স্টেজ করুন, এবং প্রকাশ-সামগ্রী টেক্সট টাইপ, CDN আচরণ, এবং ক্যাশ ইনভ্যালিডেশন যাচাই করুন সাইট-ওয়াইড মাইগ্রেশনের আগে।
রিভার্সিবল ব্যাচে ডিপ্লয় করুন। রিলিজ ক্যান্ডিডেটে রেন্ডারিং ও ট্রান্সফার আচরণ তুলনা করুন, তারপর নতুন পথ প্রমাণিত না হওয়া পর্যন্ত পুরনো রেপ্রেজেন্টেশনটি রাখুন। যদি কোনো ট্রান্সফরমেশন বা ক্যাশ নিয়ম ব্যর্থ হয়, পরিচিত-ভাল সোর্স পুনঃস্থাপন করুন। এটি একটি স্থিতিস্থাপক ডেলিভারি দিকনির্দেশনা, AVIF বা একাধিক ফর্ম্যাটের সর্বজনীন ম্যান্ডেট নয়।
প্রাথমিক ভিউকে প্রভাবিত করা লিড ইমেজ এবং কনটেন্ট ইমেজগুলোকে অগ্রাধিকার দিন, প্রতিটি আর্কাইভ ইমেজ একসাথে নয়।
ডিটারমিনিস্টিক অ্যাসেট নাম বা একটি ভার্সনড ম্যাপিং রাখুন যাতে পূর্বের JPEG, PNG, বা WebP পথ দ্রুত পুনঃস্থাপন করা যায়।