সঠিক প্যাটার্ন বেছে নিন
Resolution switching একই কম্পোজিশন রাখে এবং বিভিন্ন ফাইল প্রস্থ অফার করে। এটি পণ্যের ছবি, নিবন্ধ চিত্র, এবং কার্ডের জন্য সাধারণ প্যাটার্ন। লে-আউট অনুযায়ী রেন্ডার করা প্রস্থ পরিবর্তিত হলে 480w বা 1200w-এর মতো width descriptors ব্যবহার করুন। এই সংখ্যা ফোন টার্গেট বা CSS কমান্ড নয়—এটি ফাইলের আসল পিক্সেল প্রস্থ।
Density switching একটি স্থির CSS স্লটকে উচ্চ-ডেনসিটির ডিসপ্লের জন্য বেশি উৎস পিক্সেল সরবরাহ করে। এর ডেস্ক্রিপ্টরগুলো 1x, 1.5x বা 2x ধরনের এবং এটি এমন লোগো বা আইকনের জন্য উপযোগী যা ধারাবাহিকভাবে—for example—160 CSS পিক্সেল প্রশস্ত থাকে। একই srcset-এ width এবং density ডেস্ক্রিপ্টর মিশ্রিত করবেন না।
কোনো কম্পোনেন্ট বাড়ে বা ছোট হয় এমন ক্ষেত্রে sizes সহ w ডেস্ক্রিপ্টর ব্যবহার করুন।
রেন্ডার করা CSS সাইজ স্থির হলে কেবল x ডেস্ক্রিপ্টর ব্যবহার করুন এবং sizes ছাড়া রাখুন।
sizes কিভাবে নির্বাচন প্রভাবিত করে তা জানা জরুরি
Width descriptors ব্যবহার করলে ব্রাউজার ইমেজ ডাউনলোডের আগে sizes মূল্যায়ন করে। প্রতিটি এন্ট্রি একটি ঐচ্ছিক media condition-এর সাথে একটি length জোড়া করে। প্রথম মিল করা কন্ডিশন উৎস-সাইজ সরবরাহ করে; শেষের অবিচ্ছিন্ন length হলো ফ্যালব্যাক। sizes একটি নির্বাচন সূচক (selection hint), CSS নিয়ম নয়।
ব্রাউজার ঐ উৎস-সাইজকে প্রার্থী প্রস্থের সঙ্গে তুলনা করে কার্যকর ডেনসিটি হিসাব করে, তারপর ডিসপ্লে ডেনসিটি, জুম, এবং নেটওয়ার্ক শর্তও বিবেচনা করতে পারে। এটি গাণিতিকভাবে সবচেয়ে কাছের ফাইলই বেছে নিতে বাধ্য নয়। সৎ প্রার্থীরা এবং বিশ্বাসযোগ্য স্লট অনুমান প্রদান করুন; ব্রাউজারের নির্বাচন ব্যবহারকারী এজেন্টের সিদ্ধান্ত হিসেবে থাকে।
প্রথম মিল করা media condition জিতে যায়, তাই তালিকাটি এমনভাবে লিখুন যাতে প্রথম মিল সঠিক হয়।
ভিউপোর্ট-ওয়াইড হিসেবে বর্ণিত এক-তৃতীয় ডেস্কটপ কার্ড অনিষ্টকরভাবে বড় প্রার্থী ট্রিগার করতে পারে।
প্রার্থীরা প্রকৃত লে-আউট থেকে উদ্ভূত করুন
পৃষ্ঠাগুলি নয়, কম্পোনেন্টগুলোর ইনভেন্টরি তৈরি করুন। একটি হিরো, সম্পাদকীয় চিত্র, পণ্য গ্যালারি, সার্চ থাম্বনেইল, এবং ফুটার লোগো প্রায়ই আলাদা স্লট প্রস্থ রাখে। প্রতিটির জন্য সংকীর্ণ এবং সর্বোচ্চ রেন্ডার করা প্রস্থ, অনুপাত (aspect ratio), ক্রপ আচরণ, এবং প্রথম-স্ক্রীন দৃশ্যমানতা রেকর্ড করুন।
কম্পোনেন্টের অর্থপূর্ণ স্লট রেঞ্জের চারপাশে প্রস্থ জেনারেট করুন, উচ্চ-ডেনসিটি রেন্ডারিং যুক্তিযুক্ত হলে একটি বড় বিকল্প রাখুন। প্রায়-একই ফাইলগুলো বিল্ড এবং ক্যাশ জটিলতা বাড়ায়; খুব ছোট এবং অত্যধিক বড় ফাইলই আপস ঘটায়। ইমেজ ট্রান্সফর্মেশন কাজ করে না ধরে নেওয়ার চেয়ে উৎপন্ন URL পরীক্ষা করুন।
একটি বৈধ src ফ্যালব্যাক এবং ডেলিভার হওয়া অনুপাতে মিলানো width এবং height মান রাখুন। এগুলো স্থান সংরক্ষণ করে, কিন্তু প্রতিক্রিয়াশীল CSS চূড়ান্ত মাপ পরিবর্তন করতে বাধা দেয় না।
একটি প্রার্থী যদি 800w হিসেবে ঘোষণা করা হয় তবে সেটি বাস্তবে 800 পিক্সেল প্রস্থ হতে হবে।
টেমপ্লেট এবং ডিজাইন পরিবর্তনের সাথে স্লট ও প্রার্থী পরিকল্পনা বজায় রাখুন।
আর্ট-ডিরেকশনের জন্য picture ব্যবহার করুন
Art direction কম্পোজিশন পরিবর্তন করে, শুধু ফাইল সাইজ নয়। একটি চওড়া ল্যান্ডস্কেপ ফটো সরু স্ক্রিনে সাবজেক্ট যাতে দেখা যায় তা নিশ্চিত করতে টাইটার পোর্ট্রেট ক্রপ দরকার হতে পারে। picture উপাদান মিডিয়া-নির্দিষ্ট সোর্স অপশন দিতে পারে, যার পরে একটি img ফ্যালব্যাক থাকে। ব্রাউজার প্রতিটি source-এর media, type, এবং srcset তথ্য বিবেচনা করে; img-এ alternative টেক্সট, ডাইমেনশন এবং ফ্যালব্যাক আচরণ থাকে।
প্রতিটি ক্রপকে সম্পাদকীয় ও অ্যাক্সেসিবিলিটি রিভিউ দিয়ে প্রস্তুত করুন। একটি মোবাইল ক্রপ পণ্যের বিবরণ বা alt-এ উল্লেখিত কোনো ব্যক্তিকে বাদ দিতে পারে। img-এ alt রাখুন এবং ইমেজ যে তথ্য বা ফাংশনটি দান করে তা বর্ণনা করুন। শুধুমাত্র সত্যি ডেকোরেটিভ ইমেজের জন্য alt="" ব্যবহার করুন; লিংক বা বাটন ইমেজের জন্য চেহারা নয় বরং ক্রিয়াটি বর্ণনা করুন। ক্রপ অপরিবর্তিত থাকলে picture যোগ করবেন না: সাধারণ width-ভিত্তিক srcset সহজ।
একটি ব্যস্ত ডেস্কটপ হিরো ফোনের জন্য একটি পৃথক পোর্ট্রেট ক্রপ প্রয়োজন।
picture source টাইপ হিন্ট দিতে পারে এবং ব্যবহারযোগ্য img ফ্যালব্যাক বজায় রাখে।
মহongiভূত লোডিং এবং মার্কআপ ভুল এড়ান
সাধারণ অপচয় হল sizes="100vw" প্রতিটি ইমেজে কপি করা। এটি একটি সরু ফুল-ওয়িদথ ফিগারের জন্য মানতে পারে কিন্তু একটি capped container বা ডেস্কটপ কার্ডের জন্য সঠিক হবে না। বিপরীত ব্যর্থতা হলো রিডিজাইন পর sizes অবশিষ্ট থাকা। CSS এবং sizes একসাথে পরিবর্তন করুন।
প্রাথমিক দৃশ্যে থাকা গুরুত্বপূর্ণ ইমেজ লেজি-লোড করবেন না। নির্দেশনা অনুযায়ী fold-এর নিচের ইমেজগুলো লেজি-লোড করুন এবং দৃশ্যমান হিরো eager রাখুন। Fetch priority সত্যিই গুরুত্বপূর্ণ ইমেজকে উর্ধ্বতন করতে পারে, কিন্তু বিস্তৃত high-priority বা preload নিয়ম পারফরম্যান্স খারাপ করতে পারে। ফাইলনাম বা ক্যাশড ফলাফলের ওপর নির্ভর করবেন না।
একটি CMS, প্রক্সি, বা ক্যাশ একটি ভুল ডেস্ক্রিপ্টর বা অনিচ্ছাকৃত ইমেজ অনুরোধ লুকাতে পারে।
গুরুত্বপূর্ণ পৃষ্ঠার টেক্সট শুধুমাত্র আর্ট-ডিরেক্টেড ক্রপের ওপর নির্ভর করবেন না।
অনুরোধ, ক্রপ, এবং মেরামত পরীক্ষা করুন
লে-আউট-চেঞ্জ প্রস্থে প্রতিনিধিত্বশীল পৃষ্ঠাগুলো পরীক্ষা করুন, যার মধ্যে গ্রিড ব্রেকপয়েন্টের ঠিক উপরে ও নিচে থাকা ভিউপোর্ট অন্তর্ভুক্ত। হাই-ডেনসিটি সেটিং, চওড়া ডেস্কটপ, এবং স্লট পরিবর্তনকারী স্টেটও অন্তর্ভুক্ত করুন। রেন্ডার করা মাত্রা, ক্রপ, alternative টেক্সট, এবং ভিজুয়াল তীক্ষ্ণতা নিশ্চিত করুন।
Chrome DevTools-এ Network খুলুন, ক্যাশ অক্ষম করে রিলোড করুন বা Empty Cache And Hard Reload ব্যবহার করুন, ইমেজ অনুরোধ ফিল্টার করুন এবং URL, transfer size, headers, initiator, এবং timing পরীক্ষা করুন। থ্রোটলিং করে দেরি বা অপচয়জনক কাজ উন্মোচন করুন। ভিউপোর্ট, device scale factor, স্লট, প্রার্থী, ট্রান্সফার কন্টেন্ট-বাইট, এবং প্রত্যাশিত ফলাফল রেকর্ড করুন।
যখন কোনো টেমপ্লেট, ব্রেকপয়েন্ট, CDN, বা অ্যাসেট পাইপলাইন পরিবর্তন হয়, এটি রিলিজ গেট করুন। সরলভাবে মেরামত করুন: sizes ঠিক করুন, একটি ডেস্ক্রিপ্টর সংশোধন করুন, একটি ক্রপ পুনরায় জেনারেট করুন, ফ্যালব্যাক পুনরুদ্ধার করুন, বা অনাবশ্যক preload সরিয়ে ফেলুন। empty-cache reload দিয়ে পুনরায় পরীক্ষা করুন।
Network প্যানেল যে প্রার্থী বাস্তবে অনুরোধ করা হয়েছে তা রেকর্ড করে।
এটি ইমেজ ডেলিভারি আচরণ যাচাই করে; origin ক্ষমতা, CDN উপলভ্যতা, বা সামগ্রিক আপটাইম যাচাই করে না।
SIU রেজিলিয়েন্স কন্ট্রোল হিসেবে প্রয়োগ করুন
রেসপনসিভ ইমেজ অনাবশ্যক ট্রান্সফার কমায় কিন্তু সফল অনুরোধ নিশ্চিত করে না। Origin ত্রুটি, অনুপলব্ধ ট্রান্সফর্মেশন, তৃতীয়-পক্ষ হোস্ট এবং CDN ব্যর্থতা আলাদা কনটিনিউটি ও রিকভারি পরিকল্পনা চায়।
SIU-এর জন্য টেস্ট রেকর্ড ব্যবহার করে ডেলিভারি রিগ্রেশন দ্রুত ধরুন, দায়ী টেমপ্লেট বা ট্রান্সফর্মেশন নিয়ম শনাক্ত করুন, এবং লঞ্চের আগে সবচেয়ে ছোট সুরক্ষিত সংশোধন করুন। এটিকে উপলভ্যতা প্রিফ্লাইট ও রোলব্যাক পরিকল্পনার সঙ্গে জোড়া দিন।
প্রতিটি ব্যর্থ সিলেকশন চেকের জন্য একটি কম্পোনেন্ট এবং ইমেজ-পাইপলাইন মালিক নির্ধারণ করুন।